/* global React */

/* ============================================================
   MinerSuite mockups — small visual components used in the hero
   dashboard and inside module-panels. All written with brand
   tokens and JetBrains Mono for IDs / numbers.
   ============================================================ */

const { useState, useEffect, useMemo } = React;

/* --------- Brand mark (3×3 grid like the logo) --------- */
function BrandMark({ size = 28, gold = true }) {
  const cells = [
    "ink", gold ? "gold" : "ink", "soft",
    "ink", "ink", "ink",
    "ink", "ink", "ink",
  ];
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden="true">
      {cells.map((c, i) => {
        const x = (i % 3) * 34 + 4;
        const y = Math.floor(i / 3) * 34 + 4;
        const fill = c === "gold" ? "#C9A24A" : c === "soft" ? "#2A5D72" : "#0E3A4C";
        return <rect key={i} x={x} y={y} width="26" height="26" rx="3" fill={fill} />;
      })}
    </svg>
  );
}

/* --------- Brand mark, reversed for dark backgrounds --------- */
function BrandMarkLight({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden="true">
      <rect x="4"  y="4"  width="26" height="26" rx="3" fill="#F6F4EE" />
      <rect x="38" y="4"  width="26" height="26" rx="3" fill="#C9A24A" />
      <rect x="72" y="4"  width="26" height="26" rx="3" fill="rgba(246,244,238,0.5)" />
      <rect x="4"  y="38" width="26" height="26" rx="3" fill="#F6F4EE" />
      <rect x="38" y="38" width="26" height="26" rx="3" fill="#F6F4EE" />
      <rect x="72" y="38" width="26" height="26" rx="3" fill="#F6F4EE" />
      <rect x="4"  y="72" width="26" height="26" rx="3" fill="#F6F4EE" />
      <rect x="38" y="72" width="26" height="26" rx="3" fill="#F6F4EE" />
      <rect x="72" y="72" width="26" height="26" rx="3" fill="#F6F4EE" />
    </svg>
  );
}

/* --------- Header logo --------- */
function HeaderLogo() {
  return (
    <a href="#top" className="header-logo" aria-label="MinerSuite — início">
      <BrandMark size={24} />
      <span>Miner<span className="suite">Suite</span></span>
    </a>
  );
}

/* --------- Sidebar item --------- */
function NavItem({ children, active, badge }) {
  return (
    <div className={"ds-item" + (active ? " active" : "")}>
      <span className="ds-dot" />
      <span>{children}</span>
      {badge && <span className="ds-badge">{badge}</span>}
    </div>
  );
}

/* --------- Hero Dashboard mockup --------- */
function HeroDashboard() {
  const bars = [62, 48, 71, 55, 80, 64, 92, 76, 58, 88, 70, 95];
  return (
    <div className="dashboard" role="img" aria-label="Visão geral da plataforma MinerSuite">
      <aside className="dashboard-sidebar">
        <div className="ds-brand">
          <BrandMarkLight size={20} />
          <span className="name">Miner<span className="suite">Suite</span></span>
        </div>
        <div className="ds-section">Operação</div>
        <NavItem badge="7">Agenda</NavItem>
        <NavItem badge="41">Projeto</NavItem>
        <NavItem>CRM</NavItem>
        <NavItem badge="312">Cliente 360º</NavItem>
        <div className="ds-section">Financeiro</div>
        <NavItem>Financeiro</NavItem>
        <NavItem>Minerário</NavItem>
        <div className="ds-section">Comercial</div>
        <NavItem active badge="24">Nova Proposta</NavItem>
        <NavItem badge="58">Novo Contrato</NavItem>
        <div className="ds-section">Auditoria</div>
        <NavItem>Histórico</NavItem>
      </aside>

      <div className="dashboard-main">
        <div className="dash-topbar">
          <div>
            <div className="crumb">Operação · Visão geral</div>
            <h4>Painel da consultoria</h4>
          </div>
          <div className="dash-search">
            <span>Buscar cliente, proposta, ANM…</span>
            <span className="kbd">⌘ K</span>
          </div>
        </div>

        <div className="kpi-row">
          <div className="kpi">
            <span className="label">Contratos ativos</span>
            <span className="value">58</span>
            <span className="delta">+6 este mês</span>
          </div>
          <div className="kpi gold">
            <span className="label">A receber · 30d</span>
            <span className="value">R$ 482k</span>
            <span className="delta">12 parcelas</span>
          </div>
          <div className="kpi">
            <span className="label">Propostas abertas</span>
            <span className="value">24</span>
            <span className="delta">9 em análise</span>
          </div>
          <div className="kpi danger">
            <span className="label">Vencidas</span>
            <span className="value">3</span>
            <span className="delta down">2 críticas</span>
          </div>
        </div>

        <div className="dash-grid">
          <div className="panel">
            <div className="panel-head">
              <h5>Propostas — fluxo trimestral</h5>
              <div className="tabs">
                <span>Mês</span>
                <span className="on">Trim.</span>
                <span>Ano</span>
              </div>
            </div>
            <div className="bars" aria-hidden="true">
              {bars.map((h, i) => (
                <span key={i} className={i === 10 ? "gold" : ""} style={{ height: h + "%" }} />
              ))}
            </div>
            <div className="bars-x">
              {["J","F","M","A","M","J","J","A","S","O","N","D"].map((m, i) =>
                <span key={i}>{m}</span>
              )}
            </div>
          </div>

          <div className="panel">
            <div className="panel-head">
              <h5>Propostas recentes</h5>
              <span className="tag mono">24 ATIVAS</span>
            </div>
            <div className="row">
              <div>
                <div className="title">PRP-2026-0418</div>
                <div className="meta">Aurélia Mineração · Itabira/MG</div>
              </div>
              <span className="tag gold">EM ANÁLISE</span>
              <span className="meta">R$ 84k</span>
            </div>
            <div className="row">
              <div>
                <div className="title">PRP-2026-0417</div>
                <div className="meta">Carbonífera Mato Verde</div>
              </div>
              <span className="tag success">APROVADA</span>
              <span className="meta">R$ 162k</span>
            </div>
            <div className="row">
              <div>
                <div className="title">PRP-2026-0416</div>
                <div className="meta">Granito Serra Azul</div>
              </div>
              <span className="tag ink">ENVIADA</span>
              <span className="meta">R$ 47k</span>
            </div>
            <div className="row">
              <div>
                <div className="title">PRP-2026-0415</div>
                <div className="meta">MinExplor · Conceição do Mato</div>
              </div>
              <span className="tag warn">PENDENTE</span>
              <span className="meta">R$ 219k</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* --------- Module visuals --------- */
function Visual_Cliente360() {
  return (
    <div className="mp-visual">
      <div className="proc-list" style={{ fontSize: 12 }}>
        <div className="row-l head">
          <span>PROCESSO</span><span>OBJETO · LOCAL</span><span>FASE</span><span className="v">ÁREA (HA)</span>
        </div>
        <div className="row-l">
          <span className="id">831.214/2018</span>
          <span className="name">Ferro · Itabira/MG</span>
          <span className="status"><span className="tag gold">CONCESSÃO</span></span>
          <span className="v">486,2</span>
        </div>
        <div className="row-l">
          <span className="id">831.892/2021</span>
          <span className="name">Quartzito · Diamantina/MG</span>
          <span className="status"><span className="tag ink">REQUERIMENTO</span></span>
          <span className="v">198,7</span>
        </div>
        <div className="row-l">
          <span className="id">832.044/2023</span>
          <span className="name">Granito · Nova Lima/MG</span>
          <span className="status"><span className="tag success">AUTORIZAÇÃO</span></span>
          <span className="v">122,4</span>
        </div>
        <div className="row-l">
          <span className="id">832.301/2024</span>
          <span className="name">Areia industrial · Sete Lagoas</span>
          <span className="status"><span className="tag warn">DISPONIB.</span></span>
          <span className="v">64,9</span>
        </div>
      </div>
    </div>
  );
}

function Visual_CRM() {
  return (
    <div className="mp-visual">
      <div className="funnel">
        <div className="stage">
          <span className="label">Identificação</span>
          <div className="track"><span style={{ width: "100%" }} /></div>
          <span className="v">38</span>
        </div>
        <div className="stage">
          <span className="label">Qualificação</span>
          <div className="track"><span style={{ width: "76%" }} /></div>
          <span className="v">29</span>
        </div>
        <div className="stage">
          <span className="label">Proposta</span>
          <div className="track"><span style={{ width: "55%" }} /></div>
          <span className="v">21</span>
        </div>
        <div className="stage">
          <span className="label">Negociação</span>
          <div className="track"><span style={{ width: "32%" }} /></div>
          <span className="v">12</span>
        </div>
        <div className="stage">
          <span className="label">Ganho · mês</span>
          <div className="track"><span style={{ width: "18%", background: "#4A8A5C" }} /></div>
          <span className="v">7</span>
        </div>
      </div>
    </div>
  );
}

function Visual_Propostas() {
  return (
    <div className="mp-visual">
      <div className="proc-list" style={{ fontSize: 12 }}>
        <div className="row-l head">
          <span>PROPOSTA</span><span>CLIENTE</span><span>STATUS</span><span className="v">VALOR</span>
        </div>
        <div className="row-l">
          <span className="id">PRP-0418</span>
          <span className="name">Aurélia Mineração</span>
          <span className="status"><span className="tag gold">EM ANÁLISE · v3</span></span>
          <span className="v">R$ 84.200</span>
        </div>
        <div className="row-l">
          <span className="id">PRP-0417</span>
          <span className="name">Carbonífera Mato Verde</span>
          <span className="status"><span className="tag success">APROVADA</span></span>
          <span className="v">R$ 162.500</span>
        </div>
        <div className="row-l">
          <span className="id">PRP-0416</span>
          <span className="name">Granito Serra Azul</span>
          <span className="status"><span className="tag ink">ENVIADA · v1</span></span>
          <span className="v">R$ 47.000</span>
        </div>
        <div className="row-l">
          <span className="id">PRP-0415</span>
          <span className="name">MinExplor Consultoria</span>
          <span className="status"><span className="tag warn">RASCUNHO · v2</span></span>
          <span className="v">R$ 219.800</span>
        </div>
      </div>
    </div>
  );
}

function Visual_Contratos() {
  return (
    <div className="mp-visual">
      <div className="fin-grid" style={{ marginBottom: 12 }}>
        <div className="fin-card"><span className="k">Contratos ativos</span><span className="v">58</span></div>
        <div className="fin-card gold"><span className="k">A renovar · 60d</span><span className="v">7</span></div>
        <div className="fin-card"><span className="k">Faturado · mês</span><span className="v">R$ 318k</span></div>
        <div className="fin-card danger"><span className="k">Em atraso</span><span className="v">3</span></div>
      </div>
      <div className="proc-list">
        <div className="row-l">
          <span className="id">CTR-241</span>
          <span className="name">Aurélia · Projeto técnico ANM</span>
          <span className="status"><span className="tag success">VIGENTE</span></span>
          <span className="v">12/12 parcelas</span>
        </div>
        <div className="row-l">
          <span className="id">CTR-238</span>
          <span className="name">Carbonífera · Recursos minerais</span>
          <span className="status"><span className="tag gold">RENOVAR</span></span>
          <span className="v">10/12 parcelas</span>
        </div>
      </div>
    </div>
  );
}

function Visual_Financeiro() {
  const months = [42, 56, 38, 64, 71, 58, 82, 76, 65, 88, 92, 84];
  return (
    <div className="mp-visual">
      <div className="fin-grid" style={{ marginBottom: 12 }}>
        <div className="fin-card gold"><span className="k">Receita · mês</span><span className="v">R$ 482.300</span></div>
        <div className="fin-card"><span className="k">A receber · 30d</span><span className="v">R$ 218.400</span></div>
        <div className="fin-card danger"><span className="k">Inadimplência</span><span className="v">2,8%</span></div>
        <div className="fin-card"><span className="k">Margem média</span><span className="v">38,4%</span></div>
      </div>
      <div className="bars" style={{ height: 60 }}>
        {months.map((h, i) => (
          <span key={i} className={i === 10 ? "gold" : ""} style={{ height: h + "%", background: i === 10 ? undefined : "rgba(246,244,238,0.32)" }} />
        ))}
      </div>
    </div>
  );
}

function Visual_Projetos() {
  return (
    <div className="mp-visual">
      <div className="kanban">
        <div className="kanban-col">
          <h6><span>A FAZER</span><span>5</span></h6>
          <div className="kanban-card">
            <div className="t">Levantamento topográfico</div>
            <div className="m"><span className="dot warn"></span><span>PRJ-218 · 14/06</span></div>
          </div>
          <div className="kanban-card">
            <div className="t">Memorial descritivo</div>
            <div className="m"><span className="dot"></span><span>PRJ-220 · 22/06</span></div>
          </div>
        </div>
        <div className="kanban-col">
          <h6><span>EM EXECUÇÃO</span><span>3</span></h6>
          <div className="kanban-card">
            <div className="t">RAL · Aurélia Itabira</div>
            <div className="m"><span className="dot"></span><span>PRJ-214 · 12/06</span></div>
          </div>
          <div className="kanban-card">
            <div className="t">PAE · Serra Azul</div>
            <div className="m"><span className="dot danger"></span><span>PRJ-209 · ATRASO</span></div>
          </div>
        </div>
        <div className="kanban-col">
          <h6><span>REVISÃO</span><span>2</span></h6>
          <div className="kanban-card">
            <div className="t">Plano de pesquisa</div>
            <div className="m"><span className="dot success"></span><span>PRJ-206 · 09/06</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Visual_Templates() {
  return (
    <div className="mp-visual">
      <div className="template-grid">
        <div className="template-tile">
          <div className="n">Relatório de pesquisa mineral</div>
          <div className="m">12 tarefas · 4 checklists · 8 anexos</div>
        </div>
        <div className="template-tile">
          <div className="n">Plano de aproveitamento econômico</div>
          <div className="m">18 tarefas · 6 checklists · 14 anexos</div>
        </div>
        <div className="template-tile">
          <div className="n">RAL anual</div>
          <div className="m">9 tarefas · 3 checklists · 5 anexos</div>
        </div>
        <div className="template-tile">
          <div className="n">Disponibilidade · análise</div>
          <div className="m">6 tarefas · 2 checklists · 3 anexos</div>
        </div>
      </div>
    </div>
  );
}

function Visual_Equipe() {
  return (
    <div className="mp-visual">
      <div className="checklist">
        <div className="item done">
          <span className="box" />
          <div>
            <div className="t" style={{ color: "rgba(246,244,238,0.5)" }}>Eng. Marília C. — Líder técnico</div>
          </div>
          <span className="meta">04 PROJETOS</span>
        </div>
        <div className="item">
          <span className="box" />
          <div className="t" style={{ color: "var(--ms-paper)" }}>Eng. Rafael T. — Geólogo sênior</div>
          <span className="meta">07 PROJETOS</span>
        </div>
        <div className="item">
          <span className="box" />
          <div className="t" style={{ color: "var(--ms-paper)" }}>Beatriz O. — Coord. comercial</div>
          <span className="meta">12 PROPOSTAS</span>
        </div>
        <div className="item">
          <span className="box" />
          <div className="t" style={{ color: "var(--ms-paper)" }}>João P. — Colaborador técnico</div>
          <span className="meta">03 PROJETOS</span>
        </div>
      </div>
    </div>
  );
}

function Visual_ANM() {
  return (
    <div className="mp-visual">
      <div className="proc-list">
        <div className="row-l head">
          <span>PROCESSO</span><span>SUBSTÂNCIA · UF</span><span>FASE</span><span className="v">ÁREA</span>
        </div>
        <div className="row-l">
          <span className="id">831.214/2018</span>
          <span className="name">Minério de ferro · MG</span>
          <span className="status"><span className="tag gold">CONCESSÃO</span></span>
          <span className="v">486,2 ha</span>
        </div>
        <div className="row-l">
          <span className="id">801.927/2019</span>
          <span className="name">Calcário · BA</span>
          <span className="status"><span className="tag ink">REQUERIMENTO</span></span>
          <span className="v">1.204,6 ha</span>
        </div>
        <div className="row-l">
          <span className="id">880.412/2022</span>
          <span className="name">Caulim · PA</span>
          <span className="status"><span className="tag success">AUTORIZAÇÃO</span></span>
          <span className="v">832,1 ha</span>
        </div>
        <div className="row-l">
          <span className="id">832.301/2024</span>
          <span className="name">Areia industrial · MG</span>
          <span className="status"><span className="tag warn">DISPONIBILIDADE</span></span>
          <span className="v">64,9 ha</span>
        </div>
      </div>
    </div>
  );
}

/* --------- Agenda — calendário colaborativo --------- */
function Visual_Agenda() {
  const days = ["SEG 10", "TER 11", "QUA 12", "QUI 13", "SEX 14"];
  // events[day] = [{start, span, kind, title}]
  const events = [
    [
      { start: 1, span: 2, kind: "meet",     title: "Kickoff · Aurélia" },
    ],
    [
      { start: 0, span: 1, kind: "deadline", title: "Prazo RAL" },
      { start: 3, span: 2, kind: "contract", title: "Renovação CTR-238" },
    ],
    [
      { start: 1, span: 1, kind: "meet",     title: "Revisão técnica" },
      { start: 4, span: 2, kind: "anm",      title: "Protocolo ANM" },
    ],
    [
      { start: 2, span: 2, kind: "finance",  title: "Cobrança · 12 parc." },
    ],
    [
      { start: 0, span: 2, kind: "meet",     title: "Status semanal" },
      { start: 3, span: 1, kind: "deadline", title: "Entrega PAE" },
    ],
  ];
  return (
    <div className="mp-visual agenda-visual">
      <div className="agenda-week">
        <div className="agenda-times">
          <span>09</span><span>10</span><span>11</span><span>12</span><span>14</span><span>16</span>
        </div>
        {days.map((d, i) => (
          <div key={d} className="agenda-day">
            <div className="agenda-day-head">{d}</div>
            <div className="agenda-day-track">
              {events[i].map((ev, j) => (
                <div
                  key={j}
                  className={"agenda-event k-" + ev.kind}
                  style={{ top: ev.start * 18 + "px", height: ev.span * 18 - 2 + "px" }}
                  title={ev.title}
                >
                  <span>{ev.title}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div className="agenda-detail">
        <div className="agenda-detail-head">
          <span className="tag gold">REUNIÃO · TER 11 · 10h</span>
          <span className="agenda-conflict">! Conflito · Marília</span>
        </div>
        <div className="agenda-detail-title">Kickoff · Aurélia Mineração</div>
        <div className="agenda-detail-meta">
          <span>PRJ-218 · projeto técnico</span>
          <span className="dot-sep">·</span>
          <span>Meet · video</span>
        </div>
        <div className="agenda-rsvp">
          <div className="rsvp-row">
            <span className="avatar">MC</span>
            <span className="name">Marília C.</span>
            <span className="rsvp accepted">Confirmou</span>
          </div>
          <div className="rsvp-row">
            <span className="avatar">RT</span>
            <span className="name">Rafael T.</span>
            <span className="rsvp accepted">Confirmou</span>
          </div>
          <div className="rsvp-row">
            <span className="avatar ext">AA</span>
            <span className="name">A. Aurélia <span className="ext-tag">externo</span></span>
            <span className="rsvp pending">Pendente</span>
          </div>
          <div className="rsvp-row">
            <span className="avatar">BO</span>
            <span className="name">Beatriz O.</span>
            <span className="rsvp watch">Acompanhando</span>
          </div>
        </div>
        <div className="agenda-comments">
          <span className="mono-eyebrow">2 COMENTÁRIOS · 1 MENÇÃO</span>
          <div className="comment">
            <span className="avatar sm">RT</span>
            <span><b>@marilia</b> levo o memorial atualizado para a pauta.</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* --------- Histórico — log de auditoria / atividade --------- */
function Visual_Historico() {
  const items = [
    { who: "MC", name: "Marília C.",   verb: "alterou status",     entity: "PRP-0418", from: "RASCUNHO", to: "APROVADA", time: "14:32", kind: "gold" },
    { who: "RT", name: "Rafael T.",    verb: "adicionou tarefa",    entity: "PRJ-218",  note: "Memorial descritivo",                time: "11:18", kind: "ink" },
    { who: "BO", name: "Beatriz O.",   verb: "criou proposta",      entity: "PRP-0419", note: "R$ 84.200 · Carbonífera",              time: "10:04", kind: "gold" },
    { who: "MC", name: "Marília C.",   verb: "confirmou RSVP",      entity: "AGD-K-118", note: "Kickoff Aurélia · TER 11/06",         time: "09:22", kind: "success" },
    { who: "AA", name: "A. Aurélia",   verb: "respondeu convite",   entity: "AGD-K-118", note: "Externo · ACEITOU",                   time: "08:47", kind: "ext" },
    { who: "RT", name: "Rafael T.",    verb: "encerrou contrato",   entity: "CTR-204",   from: "VIGENTE", to: "ENCERRADO",            time: "08:12", kind: "danger" },
  ];
  return (
    <div className="mp-visual">
      <div className="history-log">
        <div className="history-head">
          <span className="mono-eyebrow">LINHA DO TEMPO · HOJE</span>
          <span className="mono-eyebrow" style={{ opacity: 0.6 }}>6 EVENTOS</span>
        </div>
        {items.map((it, i) => (
          <div key={i} className="history-row">
            <span className={"history-avatar a-" + it.kind}>{it.who}</span>
            <div className="history-body">
              <div className="history-line">
                <b>{it.name}</b> <span className="verb">{it.verb}</span> <span className="entity">{it.entity}</span>
              </div>
              {it.from && it.to && (
                <div className="history-delta">
                  <span className="from">{it.from}</span>
                  <span className="arr">→</span>
                  <span className={"to k-" + it.kind}>{it.to}</span>
                </div>
              )}
              {it.note && (
                <div className="history-note">{it.note}</div>
              )}
            </div>
            <span className="history-time">{it.time}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* --------- Expose to global scope --------- */
Object.assign(window, {
  BrandMark, BrandMarkLight, HeaderLogo,
  HeroDashboard,
  Visual_Cliente360, Visual_CRM, Visual_Propostas, Visual_Contratos,
  Visual_Financeiro, Visual_Projetos, Visual_Templates,
  Visual_Equipe, Visual_ANM, Visual_Agenda, Visual_Historico
});