/* JRN — Portal: Home de empresas + Visualizador de dashboard */

/* Card de empresa com dashboards revelados por hover OU clique */
function CompanyCard({ company, dashboards, mode, active, onActivate, onDeactivate, onOpen }) {
  const accessible = dashboards.length;
  const hoverMode = mode === 'hover';

  const handlers = hoverMode
    ? { onMouseEnter: onActivate, onMouseLeave: onDeactivate }
    : { onClick: () => (active ? onDeactivate() : onActivate()) };

  return (
    <div
      {...handlers}
      style={{
        position: 'relative', background: '#fff', border: '1px solid var(--line)',
        borderRadius: 'var(--r-lg)', cursor: hoverMode ? 'default' : 'pointer',
        boxShadow: active ? 'var(--sh-lg)' : 'var(--sh-sm)',
        transform: active && hoverMode ? 'translateY(-3px)' : 'none',
        transition: 'box-shadow .2s, transform .2s', overflow: 'hidden',
        zIndex: active && hoverMode ? 5 : 1,
      }}
    >
      <div style={{ height: 4, background: company.cor }}></div>
      <div style={{ padding: '22px 22px 18px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 14 }}>
          <CompanyMark company={company} size={54} ring />
          <span className="badge badge-neutral" style={{ background: company.corSoft, color: company.cor }}>
            {accessible} {accessible === 1 ? 'painel' : 'painéis'}
          </span>
        </div>
        <h3 style={{ fontSize: 19, marginTop: 16 }}>{company.nome}</h3>
        <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>{company.tipo}</div>

        {!hoverMode && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 14, fontSize: 12.5, fontWeight: 600, color: company.cor }}>
            {active ? 'Ocultar painéis' : 'Ver painéis'}
            <Icons.chevDown size={15} style={{ transform: active ? 'rotate(180deg)' : 'none', transition: '.2s' }} />
          </div>
        )}
      </div>

      {/* Lista de dashboards */}
      <div style={{
        maxHeight: active ? 360 : 0, opacity: active ? 1 : 0,
        transition: 'max-height .32s ease, opacity .25s', overflow: 'hidden',
        borderTop: active ? '1px solid var(--line-2)' : 'none',
      }}>
        <div style={{ padding: '12px 14px 16px', maxHeight: 320, overflowY: 'auto' }}>
          <div className="kicker" style={{ padding: '4px 8px 8px' }}>Painéis liberados</div>
          {dashboards.length === 0 && (
            <div style={{ padding: '10px 8px', fontSize: 13, color: 'var(--muted)' }}>Nenhum painel liberado para você nesta empresa.</div>
          )}
          {dashboards.map(d => (
            <button key={d.id} onClick={(e) => { e.stopPropagation(); onOpen(d); }}
              style={{
                display: 'flex', alignItems: 'center', gap: 11, width: '100%', textAlign: 'left',
                padding: '10px 10px', borderRadius: 8, border: 'none', background: 'transparent', cursor: 'pointer',
                transition: 'background .12s',
              }}
              onMouseEnter={e => e.currentTarget.style.background = company.corSoft}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
              <span style={{ width: 32, height: 32, borderRadius: 8, background: company.corSoft, color: company.cor, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icons.chart size={16} />
              </span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: 'block', fontSize: 13.5, fontWeight: 600, color: 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.nome}</span>
                <span style={{ display: 'block', fontSize: 11.5, color: 'var(--muted)' }}>{d.categoria}{d.status === 'manutencao' ? ' · em manutenção' : ''}</span>
              </span>
              <Icons.chevRight size={16} style={{ color: 'var(--muted-2)' }} />
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function PortalHome({ user, empresas, mode, onOpen }) {
  const [activeId, setActiveId] = useState(null);
  const totalPaineis = (empresas || []).reduce((s, c) => s + (c.dashboards || []).length, 0);

  return (
    <div className="fade-in">
      <PageHead
        kicker="Visão geral"
        title={`Olá, ${(user.nome || '').split(' ')[0]}`}
        sub={`Você tem acesso a ${(empresas || []).length} ${(empresas || []).length === 1 ? 'empresa' : 'empresas'} do grupo e ${totalPaineis} painéis de indicadores. ${mode === 'hover' ? 'Passe o mouse sobre uma empresa' : 'Clique em uma empresa'} para ver seus painéis.`}
      />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 20 }}>
        {(empresas || []).map(c => (
          <CompanyCard
            key={c.id} company={c} dashboards={c.dashboards || []} mode={mode}
            active={activeId === c.id}
            onActivate={() => setActiveId(c.id)}
            onDeactivate={() => setActiveId(id => (id === c.id ? null : id))}
            onOpen={onOpen}
          />
        ))}
      </div>

      {(!empresas || empresas.length === 0) && (
        <div className="card" style={{ padding: 20 }}>
          <Empty icon="building" title="Nenhuma empresa liberada" sub="Solicite acesso ao administrador do portal." />
        </div>
      )}
    </div>
  );
}

/* ---- Conteúdo ilustrativo do relatório, varia por categoria ---- */
function reportContent(dash) {
  const meses = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun'];
  const presets = {
    Financeiro: {
      kpis: [['Receita (mês)', 'R$ 8,4 mi', '+6,2%', true], ['Margem EBITDA', '23,8%', '+1,4 p.p.', true], ['Custo operacional', 'R$ 5,1 mi', '+2,1%', false], ['Resultado líquido', 'R$ 1,9 mi', '+9,0%', true]],
      bars: meses.map((l, i) => ({ l, v: 5 + Math.sin(i) + i * 0.6 })),
      line: [62, 65, 61, 70, 73, 78], donut: 76, donutL: 'Meta de margem',
    },
    Comercial: {
      kpis: [['Vendas (mês)', 'R$ 12,6 mi', '+11,4%', true], ['Ticket médio', 'R$ 84,2 mil', '+3,1%', true], ['Conversão', '28,5%', '-1,2 p.p.', false], ['Pipeline', 'R$ 41 mi', '+7,8%', true]],
      bars: meses.map((l, i) => ({ l, v: 8 + (i % 3) + i * 0.8 })),
      line: [40, 52, 48, 61, 66, 72], donut: 84, donutL: 'Atingimento da meta',
    },
    Operacional: {
      kpis: [['Produção', '14,2 mil t', '+4,6%', true], ['OEE', '81,3%', '+2,0 p.p.', true], ['Refugo', '2,1%', '-0,4 p.p.', true], ['Prazo médio', '6,2 dias', '+0,3 d', false]],
      bars: meses.map((l, i) => ({ l, v: 10 + Math.cos(i) * 2 + i * 0.5 })),
      line: [70, 74, 72, 78, 80, 81], donut: 81, donutL: 'Eficiência (OEE)',
    },
    'RH & Pessoas': {
      kpis: [['Headcount', '1.284', '+12', true], ['Turnover', '1,8%', '-0,3 p.p.', true], ['Absenteísmo', '2,4%', '+0,2 p.p.', false], ['eNPS', '+47', '+5', true]],
      bars: meses.map((l, i) => ({ l, v: 1200 + i * 18 })),
      line: [38, 41, 40, 44, 46, 47], donut: 92, donutL: 'Posições preenchidas',
    },
    Diretoria: {
      kpis: [['Receita consolidada', 'R$ 58,1 mi', '+8,3%', true], ['EBITDA grupo', 'R$ 14,2 mi', '+5,1%', true], ['Empresas no verde', '5 de 7', '+1', true], ['Caixa', 'R$ 31 mi', '+4,4%', true]],
      bars: meses.map((l, i) => ({ l, v: 40 + i * 3 + (i % 2) * 4 })),
      line: [44, 48, 51, 53, 55, 58], donut: 71, donutL: 'Metas do grupo',
    },
  };
  return presets[dash.categoria] || presets.Financeiro;
}

function DashboardViewer({ dashboard, user, empresas, onBack }) {
  // Tenta encontrar nos dados da sessão; cai de volta no estático
  const company = (empresas || []).find(c => c.id === dashboard.companyId)
    || COMPANIES.find(c => c.id === dashboard.companyId)
    || { cor: '#15233f', corSoft: '#eef1f6', nome: dashboard.companyId, logo: '', tipo: '' };
  const accent = company.cor;
  const [loading, setLoading] = useState(true);
  const c = reportContent(dashboard);

  useEffect(() => {
    setLoading(true);
    const t = setTimeout(() => setLoading(false), 850);
    return () => clearTimeout(t);
  }, [dashboard.id]);

  return (
    <div className="fade-in">
      <button onClick={onBack} className="btn btn-ghost btn-sm" style={{ border: 'none', padding: '6px 0', marginBottom: 16, color: 'var(--muted)' }}>
        <Icons.arrowLeft size={16} /> Voltar às empresas
      </button>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 20, marginBottom: 22, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
          <CompanyMark company={company} size={52} ring />
          <div>
            <div className="kicker" style={{ color: accent }}>{company.nome} · {dashboard.categoria}</div>
            <h1 style={{ fontSize: 26, marginTop: 6 }}>{dashboard.nome}</h1>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <Btn variant="ghost" sm icon="refresh" onClick={() => { setLoading(true); setTimeout(() => setLoading(false), 700); }}>Atualizar</Btn>
          <Btn variant="ghost" sm icon="external">Abrir no Power BI</Btn>
        </div>
      </div>

      <div className="card" style={{ overflow: 'hidden' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '11px 16px', borderBottom: '1px solid var(--line-2)', background: 'var(--surface-2)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, fontSize: 12.5, color: 'var(--muted)', fontWeight: 600 }}>
            <span style={{ display: 'flex', gap: 4 }}>
              <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#f1b417' }}></span>
              <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#d9d9d9' }}></span>
            </span>
            <span className="mono" style={{ fontSize: 11.5 }}>app.powerbi.com · relatório embarcado (iframe)</span>
          </div>
          {dashboard.atualizacao && (
            <span className="badge badge-ok">
              <span className="dot" style={{ background: 'currentColor' }}></span>
              Dados de {dashboard.atualizacao.split('-').reverse().join('/')}
            </span>
          )}
        </div>

        <div style={{ position: 'relative', minHeight: 460, background: 'var(--surface-2)', padding: 20 }}>
          {loading ? (
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14, color: 'var(--muted)' }}>
              <Icons.refresh className="spin" size={26} style={{ color: accent }} />
              <span style={{ fontSize: 13, fontWeight: 500 }}>Carregando relatório do Power BI…</span>
            </div>
          ) : (
            <div className="fade-in" style={{ display: 'grid', gridTemplateColumns: 'repeat(12,1fr)', gap: 16 }}>
              {c.kpis.map((k, i) => (
                <div key={i} style={{ gridColumn: 'span 3' }}>
                  <KpiCard label={k[0]} value={k[1]} delta={k[2]} up={k[3]} accent={accent} />
                </div>
              ))}
              <div style={{ gridColumn: 'span 7' }}>
                <ChartCard title="Evolução nos últimos 6 meses" sub="Comparativo mensal acumulado">
                  <BarChart data={c.bars} accent={accent} />
                </ChartCard>
              </div>
              <div style={{ gridColumn: 'span 5' }}>
                <ChartCard title="Tendência do indicador-chave" sub="Série temporal">
                  <LineChart data={c.line} accent={accent} />
                </ChartCard>
              </div>
              <div style={{ gridColumn: 'span 4' }}>
                <ChartCard title="Atingimento" sub="Realizado vs. meta">
                  <div style={{ display: 'flex', justifyContent: 'center', padding: '6px 0' }}>
                    <Donut value={c.donut} accent={accent} label={c.donutL} />
                  </div>
                </ChartCard>
              </div>
              <div style={{ gridColumn: 'span 8' }}>
                <ChartCard title="Detalhamento por unidade">
                  <table className="tbl">
                    <thead><tr><th>Unidade</th><th>Realizado</th><th>Meta</th><th>Variação</th><th>Status</th></tr></thead>
                    <tbody>
                      {['Sede', 'Filial Norte', 'Filial Sul', 'Operação Leste'].map((u, i) => (
                        <tr key={u}>
                          <td style={{ fontWeight: 600, color: 'var(--ink)' }}>{u}</td>
                          <td>R$ {(2.1 + i * 0.7).toFixed(1)} mi</td>
                          <td>R$ {(2.4 + i * 0.6).toFixed(1)} mi</td>
                          <td style={{ color: i % 2 ? 'var(--ok)' : 'var(--danger)', fontWeight: 600 }}>{i % 2 ? '+' : '−'}{(3 + i).toFixed(1)}%</td>
                          <td><StatusBadge status={i === 2 ? 'manutencao' : 'ativo'} /></td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </ChartCard>
              </div>
            </div>
          )}
        </div>
      </div>
      <p style={{ fontSize: 12, color: 'var(--muted-2)', marginTop: 14, display: 'flex', alignItems: 'center', gap: 7 }}>
        <Icons.shield size={14} /> Conteúdo ilustrativo. Em produção, esta área embarca o relatório real do Power BI via iframe seguro, respeitando as permissões do usuário.
      </p>
    </div>
  );
}

Object.assign(window, { PortalHome, DashboardViewer });