/**
 * Os modais das decisões curtas sobre um item: concluir uma etapa, mudar a
 * data prevista, mudar o estado. Modal e não painel — são decisões de um ou
 * dois campos (docs/padroes-interface.md do NetScreen AI).
 *
 * As classes dos botões seguem as do NetScreen AI, sem as maiúsculas (versão C).
 */

const BOTAO_PRIMARIO = 'inline-flex items-center gap-2 bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-1 focus-visible:ring-accent disabled:bg-secondary disabled:text-muted-foreground';
const BOTAO_SECUNDARIO = 'inline-flex items-center gap-2 bg-secondary px-4 py-2 text-sm text-foreground outline-none hover:bg-secondary/70 focus-visible:ring-1 focus-visible:ring-accent';
const BOTAO_DISCRETO = 'inline-flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-accent';

function ModalConcluirEtapa({ item, etapa, onFechar }) {
  const { acoes } = useLista();
  const [data, setData] = React.useState(paraISO(HOJE));
  if (!etapa) return null;
  const prazo = prazoDe(etapa.prevista);
  const tarde = prazo && data && parseData(data) > prazo;
  const futura = data && data > paraISO(HOJE);

  function confirmar() {
    if (futura) return;
    acoes.concluirEtapa(item.numero, etapa.idx, data || paraISO(HOJE));
    onFechar();
  }

  return (
    <Modal
      aberto
      onFechar={onFechar}
      titulo={`Concluir: ${nomeEtapa(etapa)}`}
      acoes={
        <>
          <button type="button" className={BOTAO_SECUNDARIO} onClick={onFechar}>Cancelar</button>
          <button type="button" className={BOTAO_PRIMARIO} onClick={confirmar} disabled={!data || futura} data-foco-inicial>Marcar concluída</button>
        </>
      }
    >
      <p>
        Item {item.numero}, {item.cliente}. Estava prevista para {previstaLonga(etapa.prevista).replace(/^Semana/, 'a semana')}.
      </p>
      <label className="mt-4 block">
        <span className="mb-1.5 block text-foreground">Data em que ficou concluída</span>
        <input type="date" className="campo" value={data} max={paraISO(HOJE)} onChange={(e) => setData(e.target.value)} />
      </label>
      {futura && <p className="mt-2 text-[hsl(var(--offline))]">A data de conclusão não pode ser no futuro.</p>}
      {tarde && !futura && <p className="mt-2 text-[hsl(var(--offline))]">Fica registada como concluída com atraso (prazo falhado).</p>}
      <p className="mt-4">Fica registado em teu nome e é publicado no grupo do Teams, quando estiver ligado.</p>
    </Modal>
  );
}

function ModalDataPrevista({ item, etapa, onFechar }) {
  const { acoes } = useLista();
  const [data, setData] = React.useState(etapa ? etapa.prevista.data || '' : '');
  // Uma etapa "por definir" começa em "dia certo": quem escolhe uma data quer vê-la guardada
  const [precisao, setPrecisao] = React.useState(etapa && etapa.prevista.precisao !== 'desconhecida' ? etapa.prevista.precisao : 'dia');
  if (!etapa) return null;
  // Sem data só com "por definir" (antes, apagar a data punha "??" sem aviso)
  const semData = !data && precisao !== 'desconhecida';
  const nova = novaPrevista(data || null, precisao);
  const igual = (nova.data || null) === (etapa.prevista.data || null) && nova.precisao === etapa.prevista.precisao;
  const seguinte = data ? etapaSeguinteComData(item.etapas, etapa.idx) : null;
  const depoisDaSeguinte = seguinte && data > seguinte.prevista.data;

  function guardar() {
    if (semData || igual) return;
    acoes.alterarPrevista(item.numero, etapa.idx, nova);
    onFechar();
  }

  return (
    <Modal
      aberto
      onFechar={onFechar}
      titulo={`Data prevista: ${nomeEtapa(etapa)}`}
      acoes={
        <>
          <button type="button" className={BOTAO_SECUNDARIO} onClick={onFechar}>Cancelar</button>
          <button type="button" className={BOTAO_PRIMARIO} onClick={guardar} disabled={semData || igual}>Guardar data</button>
        </>
      }
    >
      <p>Prevista atualmente: {previstaLonga(etapa.prevista)}.</p>
      {etapa.estado === 'atraso' && (
        <p className="mt-2 text-[hsl(var(--offline))]">
          Este prazo já passou. A nova data fica, mas a etapa mantém a marca de prazo falhado e a data antiga fica no histórico.
        </p>
      )}
      <div className="mt-4 grid grid-cols-2 gap-3">
        <label>
          <span className="mb-1.5 block text-foreground">Nova data</span>
          <input type="date" className="campo" value={data} onChange={(e) => setData(e.target.value)} data-foco-inicial />
        </label>
        <label>
          <span className="mb-1.5 block text-foreground">Precisão</span>
          <select className="campo" value={precisao} onChange={(e) => setPrecisao(e.target.value)}>
            {OPCOES_PRECISAO.map((o) => <option key={o.valor} value={o.valor}>{o.rotulo}</option>)}
          </select>
        </label>
      </div>
      {semData && <p className="mt-2 text-muted-foreground">Escolhe uma data, ou a precisão "Por definir (??)".</p>}
      {depoisDaSeguinte && (
        <p className="mt-3 flex gap-2 text-accent">
          <IconAlerta size={16} className="mt-0.5 shrink-0" />
          <span>Fica depois de "{nomeEtapa(seguinte)}" ({previstaLonga(seguinte.prevista)}). Muda também essa data, se for preciso: não muda sozinha.</span>
        </p>
      )}
      <p className="mt-4">A mudança fica no histórico, em teu nome, e é publicada no grupo do Teams, quando estiver ligado.</p>
    </Modal>
  );
}

const OPCOES_ESTADO_ITEM = [
  { valor: 'ativo', rotulo: 'Ativo', ajuda: 'Segue o plano normal.' },
  { valor: 'stand_by', rotulo: 'Stand-by', ajuda: 'Parado por agora; as datas deixam de pressionar.' },
  { valor: 'bloqueado', rotulo: 'Bloqueado', ajuda: 'Ninguém avança até ao teu OK.' },
  { valor: 'concluido', rotulo: 'Concluído', ajuda: 'Validado e fechado: nada pendente (entrega, faturação). Sai das listas.' },
  { valor: 'perdido', rotulo: 'Perdido', ajuda: 'O negócio caiu. Sai das listas, fica na base.' },
];

function ModalEstadoItem({ item, onFechar, inicial }) {
  const { acoes } = useLista();
  const [estado, setEstado] = React.useState(inicial || item.estado);
  const [motivo, setMotivo] = React.useState(item.bloqueioMotivo || '');
  const [nota, setNota] = React.useState('');

  function guardar() {
    acoes.mudarEstado(item.numero, estado, estado === 'concluido' ? nota.trim() : motivo.trim());
    onFechar();
  }

  return (
    <Modal
      aberto
      onFechar={onFechar}
      titulo={`Estado do item ${item.numero}`}
      acoes={
        <>
          <button type="button" className={BOTAO_SECUNDARIO} onClick={onFechar}>Cancelar</button>
          <button type="button" className={BOTAO_PRIMARIO} onClick={guardar} disabled={(estado === item.estado && motivo === (item.bloqueioMotivo || '')) || (estado === 'bloqueado' && !motivo.trim())}>
            Guardar e avisar a equipa
          </button>
        </>
      }
    >
      <fieldset className="space-y-2">
        <legend className="sr-only">Estado</legend>
        {OPCOES_ESTADO_ITEM.map((o) => (
          <label key={o.valor} className="flex cursor-pointer items-start gap-3 rounded-md p-2 hover:bg-secondary/60">
            <input type="radio" name="estado" className="mt-1" checked={estado === o.valor} onChange={() => setEstado(o.valor)} />
            <span>
              <span className="block text-foreground">{o.rotulo}</span>
              {o.ajuda}
            </span>
          </label>
        ))}
      </fieldset>
      {estado === 'bloqueado' && (
        <label className="mt-3 block">
          <span className="mb-1.5 block text-foreground">Porquê? <span className="text-muted-foreground">(obrigatório: aparece a quem abre o item)</span></span>
          <input className="campo" value={motivo} onChange={(e) => setMotivo(e.target.value)} placeholder="Ex.: falta oficialização do cliente" />
        </label>
      )}
      {estado === 'concluido' && item.estado !== 'concluido' && (
        <label className="mt-3 block">
          <span className="mb-1.5 block text-foreground">Observação <span className="text-muted-foreground">(opcional, fica no histórico)</span></span>
          <input className="campo" value={nota} onChange={(e) => setNota(e.target.value)} placeholder="Ex.: instalado e faturado; falta só a 2.ª face em outubro" />
        </label>
      )}
    </Modal>
  );
}