"use client";

import { Check, Circle } from "lucide-react";

type Etapa = {
  rotulo: string;
  em: string | null;
  detalhe?: string | null;
};

/**
 * Linha do tempo do pedido, do orcamento a entrega.
 *
 * Existe para responder o cliente que liga perguntando "e o meu?" sem abrir
 * quatro telas. Cada marco ja estava registrado em algum lugar; o que faltava
 * era ve-los na ordem em que aconteceram.
 *
 * Etapa sem data aparece apagada em vez de sumir: a lacuna e a informacao.
 * Uma producao que nunca comecou e exatamente o que se quer enxergar.
 */
export default function LinhaDoTempo({
  orcamentoEm,
  aprovadoEm,
  producaoIniciadaEm,
  prazoEntrega,
  entregueEm,
  status,
}: {
  orcamentoEm: string | null;
  aprovadoEm: string | null;
  producaoIniciadaEm: string | null;
  prazoEntrega: string | null;
  entregueEm: string | null;
  status: string;
}) {
  const dia = (v: string | null) => {
    if (!v) return null;
    const d = new Date(v);
    return Number.isNaN(d.getTime()) ? null : d.toLocaleDateString("pt-BR");
  };

  /* Data pura (AAAA-MM-DD) nao passa por new Date com fuso, senao o prazo
     aparece um dia antes no Brasil. */
  const diaPuro = (v: string | null) => {
    if (!v) return null;
    const [a, m, d] = String(v).slice(0, 10).split("-");
    return a && m && d ? `${d}/${m}/${a}` : null;
  };

  const entregue = ["delivered", "finished"].includes(status);
  const cancelado = status === "canceled";

  const etapas: Etapa[] = [
    { rotulo: "Orçamento criado", em: dia(orcamentoEm) },
    { rotulo: "Aprovado pelo cliente", em: dia(aprovadoEm) },
    { rotulo: "Produção começou", em: dia(producaoIniciadaEm) },
    {
      rotulo: "Entrega prometida",
      em: diaPuro(prazoEntrega),
      detalhe: prazoEntrega ? null : "sem prazo definido",
    },
    {
      rotulo: cancelado ? "Cancelado" : "Entregue",
      em: entregue ? dia(entregueEm) || "concluído" : null,
    },
  ];

  return (
    <ol className="space-y-0">
      {etapas.map((e, i) => {
        const feito = Boolean(e.em);
        const ultimo = i === etapas.length - 1;
        return (
          <li key={e.rotulo} className="flex gap-3">
            <div className="flex flex-col items-center">
              <span
                className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 ${
                  feito
                    ? "border-[var(--ks-color-primary)] bg-[var(--ks-color-primary)] text-white"
                    : "border-[var(--ks-color-border-subtle)] text-[var(--ks-color-text-muted)]"
                }`}
              >
                {feito ? <Check className="h-3 w-3" /> : <Circle className="h-2 w-2" />}
              </span>
              {!ultimo && (
                <span
                  className={`w-0.5 flex-1 ${
                    feito ? "bg-[var(--ks-color-primary)]" : "bg-[var(--ks-color-border-subtle)]"
                  }`}
                  style={{ minHeight: 18 }}
                />
              )}
            </div>
            <div className={`pb-4 ${feito ? "" : "opacity-50"}`}>
              <p className="text-[13px] font-bold text-[var(--ks-color-text-primary)]">{e.rotulo}</p>
              <p className="text-[11px] text-[var(--ks-color-text-muted)]">
                {e.em || e.detalhe || "ainda não"}
              </p>
            </div>
          </li>
        );
      })}
    </ol>
  );
}