/**
 * <DetalheItem> — o painel lateral de um item: etapas (previsto vs real, datas
 * anteriores, quem alterou), negócio, equipamento, observações e histórico.
 * As acções abrem modais por cima; editar o item abre uma página.
 */

const VARIANTE_ESTADO = {
  'concluida': 'sucesso',
  'concluida-atraso': 'accent',
  'atencao': 'accent',
  'atraso': 'erro',
  'no-prazo': 'contorno',
  'por-confirmar': 'contorno',
  'na': 'contorno',
};

function SeccaoDetalhe({ titulo, children }) {
  return (
    <section className="mt-7 first:mt-0">
      <h3 className="mb-3 text-sm font-semibold">{titulo}</h3>
      {children}
    </section>
  );
}

function CampoDetalhe({ rotulo, children }) {
  if (children === null || children === undefined || children === '') return null;
  return (
    <>
      <dt className="text-muted-foreground">{rotulo}</dt>
      <dd>{children}</dd>
    </>
  );
}

function EtapaDetalhe({ item, etapa, podeEditar, onAccao }) {
  const { acoes } = useLista();
  const replans = etapa.replaneamentos || [];
  return (
    <li className="grid grid-cols-[36px_minmax(0,1fr)] gap-4 border-t border-border py-4 first:border-t-0 first:pt-0">
      <Cabine etapa={etapa} className="!h-9" />
      <div className="min-w-0">
        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
          <span className="font-medium">{nomeEtapa(etapa)}</span>
          <span className="text-sm text-muted-foreground">{etapa.responsavel}</span>
          <Badge variante={VARIANTE_ESTADO[etapa.estado]}>{ROTULO_ESTADO[etapa.estado]}</Badge>
          {etapa.falhou && etapa.estado !== 'atraso' && etapa.estado !== 'concluida-atraso' && <Badge variante="erro">Prazo falhado</Badge>}
        </div>

        {etapa.aplicavel && (
          <dl className="mt-2 grid grid-cols-[auto_1fr] gap-x-4 gap-y-0.5 text-sm tabular-nums">
            <dt className="text-muted-foreground">Prevista</dt>
            <dd>{previstaLonga(etapa.prevista)}</dd>
            {replans.length > 0 && (
              <>
                <dt className="text-muted-foreground">Antes</dt>
                <dd>
                  {replans.slice().reverse().map((r, i) => (
                    <span key={i} className={`block ${r.falhado ? 'text-[hsl(var(--offline))]' : 'text-muted-foreground'}`}>
                      <s>{previstaLonga(r.de)}</s>{r.falhado ? ' (prazo falhado)' : ''} — mudada por {r.por}, {fmtMomento(r.em)}
                    </span>
                  ))}
                </dd>
              </>
            )}
            <dt className="text-muted-foreground">Real</dt>
            <dd>{etapa.concluida ? (etapa.dataReal ? fmtLongo(parseData(etapa.dataReal)) : 'Feita, sem data registada') : '—'}</dd>
            {etapa.atualizadoPor && (
              <>
                <dt className="text-muted-foreground">Atualizada</dt>
                <dd className="text-muted-foreground">{etapa.atualizadoPor}, {fmtMomento(etapa.atualizadoEm)}</dd>
              </>
            )}
          </dl>
        )}

        {etapa.risco && <p className="mt-2 text-sm text-accent">Em risco: uma etapa anterior está em atraso.</p>}
        {etapa.depoisDe && (
          <p className="mt-2 text-sm text-accent">Prevista para depois de "{nomeEtapa(etapa.depoisDe)}" ({previstaLonga(etapa.depoisDe.prevista)}): confirma as duas datas.</p>
        )}
        {etapa.nota && <p className="mt-2 text-sm text-muted-foreground">{etapa.nota}</p>}

        {(etapa.subtarefas || []).map((s, si) => (
          <label key={si} className="mt-2 flex items-start gap-2 text-sm">
            <input
              type="checkbox"
              className="mt-0.5"
              checked={s.concluida}
              disabled={!podeEditar}
              onChange={() => acoes.alternarSubtarefa(item.numero, etapa.idx, si)}
            />
            <span>{s.texto} <span className="text-muted-foreground">({s.responsavel})</span></span>
          </label>
        ))}

        {etapa.aplicavel && podeEditar && (
          <div className="mt-3 flex flex-wrap gap-2">
            {etapa.concluida ? (
              <button type="button" className={BOTAO_DISCRETO} onClick={() => acoes.reabrirEtapa(item.numero, etapa.idx)}>
                Reabrir etapa
              </button>
            ) : (
              <>
                <button type="button" className={BOTAO_PRIMARIO} onClick={() => onAccao('concluir', etapa.idx)}>
                  <IconCheck size={14} /> Marcar concluída
                </button>
                <button type="button" className={BOTAO_SECUNDARIO} onClick={() => onAccao('data', etapa.idx)}>
                  <IconCalendario size={14} /> Alterar data prevista
                </button>
              </>
            )}
          </div>
        )}
      </div>
    </li>
  );
}

function DetalheItem({ numero, onFechar }) {
  const { dados, utilizador, acoes, irPara } = useLista();
  const [modal, setModal] = React.useState(null); // { tipo, idx }
  const bruto = dados.itens.find((i) => i.numero === numero);
  if (!bruto) return null;
  const item = analisarItem(bruto);
  const admin = utilizador.perfil === 'admin';
  const editor = admin || utilizador.perfil === 'editor';
  // Bloqueado, perdido ou concluído: as etapas não avançam (o servidor também recusa)
  const podeAvancar = editor && !['bloqueado', 'perdido', 'concluido'].includes(item.estado);
  const historico = (item.historico || []).slice().reverse().sort((a, b) => b.data.localeCompare(a.data));
  const etapaModal = modal && modal.idx != null ? item.etapas[modal.idx] : null;
  const comercial = Object.entries(item.comercial || {}).filter(([, v]) => v !== null && v !== '');
  const aplicaveis = item.etapas.filter((e) => e.aplicavel);
  const naoAplicaveis = item.etapas.filter((e) => !e.aplicavel);

  return (
    <Drawer
      aberto
      onFechar={onFechar}
      largura="max-w-xl"
      eyebrow={<div className="flex flex-wrap gap-1.5"><EtiquetasItem item={item} /></div>}
      titulo={<span className="font-display tabular-nums text-5xl leading-none">{item.numero}</span>}
      subtitulo={
        <>
          <span className="block text-lg font-semibold text-foreground">{item.cliente}</span>
          {item.comerciais.length ? item.comerciais.join(' / ') : 'Comercial por atribuir'}
          {item.fornecedor ? ` — ${item.fornecedor}` : ''}
          {item.faturacao ? ` (${item.faturacao === 'faturado' ? 'faturado' : 'por faturar'})` : ''}
        </>
      }
      rodape={editor && (
        <>
          <button type="button" className={BOTAO_SECUNDARIO} onClick={() => irPara('editar', item.numero)}>Editar item</button>
          {admin && item.porValidar && (
            <button type="button" className={BOTAO_PRIMARIO} onClick={() => acoes.validarItem(item.numero)}>
              <IconCheck size={14} /> Validar item
            </button>
          )}
          {admin && <button type="button" className={BOTAO_SECUNDARIO} onClick={() => setModal({ tipo: 'estado' })}>Mudar estado</button>}
          {admin && (
            <button type="button" className={BOTAO_SECUNDARIO} onClick={() => acoes.mudarChamada(item.numero, !item.chamadaAtencao)}>
              <IconBandeira size={14} /> {item.chamadaAtencao ? 'Retirar chamada' : 'Chamada de atenção'}
            </button>
          )}
        </>
      )}
    >
      {item.estado === 'bloqueado' && (
        <div className="mb-6 flex gap-3 rounded-lg bg-[hsl(var(--offline)/0.12)] p-3 text-sm text-[hsl(var(--offline))]">
          <IconCadeado size={16} className="mt-0.5 shrink-0" />
          {item.bloqueioMotivo || 'Bloqueado: não avançar até ao OK do Bruno.'}
        </div>
      )}
      {editor && !podeAvancar && item.estado !== 'bloqueado' && (
        <p className="mb-6 text-sm text-muted-foreground">
          Este item está {item.estado === 'perdido' ? 'perdido' : 'concluído'}: as etapas já não avançam.{admin ? ' Para as mexer, volta a pô-lo ativo em "Mudar estado".' : ''}
        </p>
      )}
      {item.porFinalizar && (
        <div className="mb-6 flex flex-wrap items-center gap-3 rounded-lg bg-card p-3 text-sm shadow-[inset_0_0_0_1px_var(--border)]">
          <IconCheck size={16} className="shrink-0 text-[hsl(var(--online))]" />
          <span className="min-w-0 flex-1">Todas as etapas estão feitas. O item fica na lista até o Bruno o finalizar (nada pendente: entrega, faturação).</span>
          {admin && (
            <button type="button" className={BOTAO_PRIMARIO} onClick={() => setModal({ tipo: 'estado', inicial: 'concluido' })}>Finalizar item</button>
          )}
        </div>
      )}
      {item.porValidar && (
        <div className="mb-6 flex gap-3 rounded-lg bg-[hsl(var(--accent)/0.1)] p-3 text-sm text-accent">
          <IconAlerta size={16} className="mt-0.5 shrink-0" />
          Veio do Excel da Ana e não estava na lista de 22 de setembro. Confirma as datas e o estado, e valida.
        </div>
      )}

      <SeccaoDetalhe titulo="Etapas">
        <ol>
          {aplicaveis.map((e) => (
            <EtapaDetalhe key={e.idx} item={item} etapa={e} podeEditar={podeAvancar} onAccao={(tipo, idx) => setModal({ tipo, idx })} />
          ))}
        </ol>
        {naoAplicaveis.length > 0 && (
          <p className="mt-3 text-sm text-muted-foreground">Não se aplicam: {naoAplicaveis.map(nomeEtapa).join(', ')}.</p>
        )}
      </SeccaoDetalhe>

      <SeccaoDetalhe titulo="Negócio">
        <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
          <CampoDetalhe rotulo="Cliente">{item.cliente}{item.clienteNumero != null ? ` (nº ${item.clienteNumero})` : ''}</CampoDetalhe>
          <CampoDetalhe rotulo="Valor">{fmtEuros(item.valor)}</CampoDetalhe>
          <CampoDetalhe rotulo="Tipo de venda">{item.tipoVenda}</CampoDetalhe>
          <CampoDetalhe rotulo="Situação">{item.situacao}</CampoDetalhe>
          <CampoDetalhe rotulo="Departamento">{item.departamento}</CampoDetalhe>
          <CampoDetalhe rotulo="Ano">{item.ano}</CampoDetalhe>
          <CampoDetalhe rotulo="Origem">{{ email: 'Lista de 22 set', 'email+excel': 'Lista de 22 set e Excel da Ana', excel: 'Excel da Ana', app: 'Criado na app' }[item.origem]}</CampoDetalhe>
        </dl>
        {comercial.length > 0 && (
          <details className="mt-3 text-sm">
            <summary className="cursor-pointer text-muted-foreground hover:text-foreground">Encomenda e faturação ({comercial.length} campos do Excel)</summary>
            <dl className="mt-2 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1">
              {comercial.map(([k, v]) => <CampoDetalhe key={k} rotulo={ROTULO_COMERCIAL[k] || k}>{fmtComercial(v)}</CampoDetalhe>)}
            </dl>
          </details>
        )}
      </SeccaoDetalhe>

      <SeccaoDetalhe titulo="Equipamento">
        {item.equipamentos.length === 0 && <p className="text-sm text-muted-foreground">Sem equipamento indicado.</p>}
        <div className="divide-y divide-[var(--border)]">
          {item.equipamentos.map((q, i) => (
            <div key={i} className="py-2.5 first:pt-0">
              <p className="font-medium">{q.qtd} × {q.descricao}</p>
              {q.cabines && <p className="text-sm text-muted-foreground">{q.cabines}</p>}
              {q.artigo && <p className="text-xs text-muted-foreground">Artigo {q.artigo}</p>}
              {q.series.map((s) => <p key={s} className="text-xs tabular-nums text-muted-foreground">{s}</p>)}
            </div>
          ))}
        </div>
      </SeccaoDetalhe>

      <SeccaoDetalhe titulo="Observações">
        {!item.obs && !item.obsExcel && <p className="text-sm text-muted-foreground">Sem observações.</p>}
        {item.obs && <p className="whitespace-pre-line rounded-lg bg-card p-3 text-sm shadow-[inset_0_0_0_1px_var(--border)]">{item.obs}</p>}
        {item.obsExcel && (
          <p className="mt-2 text-sm text-muted-foreground">No Excel: {item.obsExcel}</p>
        )}
      </SeccaoDetalhe>

      <SeccaoDetalhe titulo="Histórico">
        {historico.length === 0 && <p className="text-sm text-muted-foreground">Sem alterações registadas.</p>}
        <ul className="space-y-2 text-sm">
          {historico.map((h, i) => (
            <li key={i} className="grid grid-cols-[92px_1fr] gap-2">
              <span className="tabular-nums text-muted-foreground">{fmtMomento(h.data)}</span>
              <span>{h.texto} <span className="text-muted-foreground">({h.autor})</span></span>
            </li>
          ))}
        </ul>
      </SeccaoDetalhe>

      {modal && modal.tipo === 'concluir' && <ModalConcluirEtapa item={item} etapa={etapaModal} onFechar={() => setModal(null)} />}
      {modal && modal.tipo === 'data' && <ModalDataPrevista item={item} etapa={etapaModal} onFechar={() => setModal(null)} />}
      {modal && modal.tipo === 'estado' && <ModalEstadoItem item={item} inicial={modal.inicial} onFechar={() => setModal(null)} />}
    </Drawer>
  );
}