"use client";

import Link from "next/link";
import { useRef, useState } from "react";
import { AlertTriangle, Check, FolderOpen, Loader2, Upload } from "lucide-react";

import { EscolherDaBiblioteca } from "@/components/digitais/biblioteca";
import { pedirDigitais } from "@/components/digitais/comum";
import { FIO_DA_LINHA } from "@/components/ui/folha-de-ajustes";

/*
 * Sob encomenda: cada unidade comprada espera o arquivo feito para aquele
 * comprador. A loja vê o que ele respondeu na compra e envia o arquivo final
 * (do computador ou da biblioteca); o comprador recebe por e-mail e em Minhas
 * compras, e o pedido sai da produção. Dá para trocar o arquivo depois.
 */

export type Encomenda = {
  acessoId: string;
  pedidoId: string;
  numero: number | null;
  numeroNaLoja: number | null;
  cliente: string;
  emailDoCliente: string | null;
  produto: string;
  unidade: number;
  unidades: number;
  entregarAte: string | null;
  atrasada: boolean;
  respostas: Array<{ pergunta: string; resposta: string }>;
  arquivoFinal: { nome: string; enviadoEm: string } | null;
};

/* "2026-10-14" → "14/10" (a data do calendário, sem fuso). */
function dia(data: string | null): string {
  if (!data) return "";
  const [, mes, d] = data.slice(0, 10).split("-");
  return d && mes ? `${d}/${mes}` : data;
}

export function EncomendasDaLoja({
  encomendas,
  podeEditar,
  aoMudar,
  aoAvisar,
}: {
  encomendas: Encomenda[];
  podeEditar: boolean;
  aoMudar: () => Promise<void>;
  aoAvisar: (tom: "bom" | "ruim", texto: string) => void;
}) {
  const [enviando, setEnviando] = useState<string | null>(null);
  const [escolhendo, setEscolhendo] = useState<Encomenda | null>(null);
  const [trocando, setTrocando] = useState<string | null>(null);
  const entrada = useRef<HTMLInputElement | null>(null);
  const paraQual = useRef<Encomenda | null>(null);

  if (!encomendas.length) return null;
  const pendentes = encomendas.filter((e) => !e.arquivoFinal).length;
  const atrasadas = encomendas.filter((e) => e.atrasada).length;

  async function anexar(encomenda: Encomenda, arquivoId: string) {
    await pedirDigitais(`/api/digitais/entregas/${encomenda.pedidoId}`, {
      method: "POST",
      body: JSON.stringify({ acao: "anexar", acessoId: encomenda.acessoId, arquivoId }),
    });
    aoAvisar("bom", `Arquivo enviado para ${encomenda.cliente}. O e-mail com o arquivo está saindo.`);
    setTrocando(null);
    await aoMudar();
  }

  async function daBiblioteca(encomenda: Encomenda, arquivoId: string) {
    setEscolhendo(null);
    setEnviando(encomenda.acessoId);
    try {
      await anexar(encomenda, arquivoId);
    } catch (e) {
      aoAvisar("ruim", e instanceof Error ? e.message : "Não foi possível entregar agora.");
    } finally {
      setEnviando(null);
    }
  }

  async function doComputador(encomenda: Encomenda, arquivo: File) {
    setEnviando(encomenda.acessoId);
    try {
      const { enviarArquivo } = await import("@/components/digitais/enviar-arquivo");
      const id = await enviarArquivo(arquivo, () => undefined, new AbortController().signal);
      await anexar(encomenda, id);
    } catch (e) {
      aoAvisar("ruim", e instanceof Error ? e.message : "O envio do arquivo não deu certo.");
    } finally {
      setEnviando(null);
    }
  }

  return (
    <section className="overflow-hidden rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] shadow-[var(--ks-shadow-subtle)]">
      <div className="border-b border-[var(--ks-color-border-subtle)] px-5 py-3">
        <h2 className="flex flex-wrap items-center gap-2 text-[15px] font-extrabold text-[var(--ks-color-text-primary)]">
          Sob encomenda
          {pendentes ? <span className="rounded-full bg-[color:rgba(234,179,8,0.16)] px-2 py-0.5 text-xs font-bold text-[#a16207]">{pendentes} para fazer</span> : null}
          {atrasadas ? <span className="rounded-full bg-[color:rgba(225,58,88,0.12)] px-2 py-0.5 text-xs font-bold text-[#c2263f]">{atrasadas} atrasada{atrasadas === 1 ? "" : "s"}</span> : null}
        </h2>
        <p className="text-xs text-[var(--ks-color-text-muted)]">
          Envie o arquivo feito para cada comprador: ele recebe por e-mail e em Minhas compras, e o pedido sai da produção.
        </p>
      </div>
      <ul className="px-2 sm:px-3">
        {encomendas.map((encomenda) => {
          const ocupada = enviando === encomenda.acessoId;
          const mostrarBotoes = podeEditar && (!encomenda.arquivoFinal || trocando === encomenda.acessoId);
          return (
            <li key={encomenda.acessoId} className={FIO_DA_LINHA}>
              <div className="grid grid-cols-1 items-start gap-3 rounded-xl px-2 py-3 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.3fr)_minmax(0,1fr)] lg:gap-5">
                <span className="min-w-0">
                  <Link href={`/dashboard/orders/${encomenda.pedidoId}`} className="text-sm font-bold text-[var(--ks-color-text-primary)] hover:underline">
                    {encomenda.numero ? `#${encomenda.numero}` : "Pedido"}
                  </Link>
                  <span className="ml-2 text-sm text-[var(--ks-color-text-secondary)]">{encomenda.cliente}</span>
                  <span className="block truncate text-xs text-[var(--ks-color-text-muted)]">
                    {encomenda.produto}
                    {encomenda.unidades > 1 ? ` · ${encomenda.unidade} de ${encomenda.unidades}` : ""}
                  </span>
                </span>
                <span className="min-w-0">
                  {encomenda.respostas.length ? (
                    <dl className="space-y-1 text-[13px]">
                      {encomenda.respostas.map((r) => (
                        <div key={r.pergunta} className="flex flex-wrap gap-x-1.5">
                          <dt className="font-semibold text-[var(--ks-color-text-secondary)]">{r.pergunta}:</dt>
                          <dd className="min-w-0 break-words text-[var(--ks-color-text-primary)]">{r.resposta}</dd>
                        </div>
                      ))}
                    </dl>
                  ) : (
                    <span className="text-xs text-[var(--ks-color-text-muted)]">O comprador não respondeu perguntas.</span>
                  )}
                </span>
                <span className="flex min-w-0 flex-col gap-2 lg:items-end">
                  {encomenda.arquivoFinal ? (
                    <span className="flex items-center gap-1.5 text-xs font-semibold text-[var(--ks-emerald)]">
                      <Check size={14} />
                      <span className="truncate">Entregue · {encomenda.arquivoFinal.nome}</span>
                    </span>
                  ) : encomenda.atrasada ? (
                    <span className="flex items-center gap-1.5 text-xs font-bold text-[#c2263f]">
                      <AlertTriangle size={14} />
                      Atrasada · era até {dia(encomenda.entregarAte)}
                    </span>
                  ) : encomenda.entregarAte ? (
                    <span className="text-xs font-semibold text-[#a16207]">Entregar até {dia(encomenda.entregarAte)}</span>
                  ) : null}
                  {mostrarBotoes ? (
                    <span className="flex flex-wrap gap-1.5 lg:justify-end">
                      <button
                        type="button"
                        className="ks-button ks-button-primary ks-button-sm"
                        disabled={Boolean(enviando)}
                        onClick={() => {
                          paraQual.current = encomenda;
                          entrada.current?.click();
                        }}
                      >
                        {ocupada ? <Loader2 size={14} className="animate-spin" /> : <Upload size={14} />}
                        {ocupada ? "Enviando…" : "Enviar arquivo"}
                      </button>
                      <button type="button" className="ks-button ks-button-soft ks-button-sm" disabled={Boolean(enviando)} onClick={() => setEscolhendo(encomenda)}>
                        <FolderOpen size={14} />
                        Da biblioteca
                      </button>
                      {encomenda.arquivoFinal ? (
                        <button type="button" className="ks-button ks-button-ghost ks-button-sm" onClick={() => setTrocando(null)}>
                          Cancelar
                        </button>
                      ) : null}
                    </span>
                  ) : podeEditar && encomenda.arquivoFinal ? (
                    <button type="button" className="ks-button ks-button-ghost ks-button-sm" onClick={() => setTrocando(encomenda.acessoId)}>
                      Trocar o arquivo
                    </button>
                  ) : null}
                </span>
              </div>
            </li>
          );
        })}
      </ul>
      <input
        ref={entrada}
        type="file"
        className="hidden"
        onChange={(e) => {
          const arquivo = e.target.files?.[0];
          const encomenda = paraQual.current;
          e.target.value = "";
          if (arquivo && encomenda) void doComputador(encomenda, arquivo);
        }}
      />
      {escolhendo ? (
        <EscolherDaBiblioteca
          titulo={`Arquivo final para ${escolhendo.cliente}`}
          aoFechar={() => setEscolhendo(null)}
          aoEscolher={(arquivo) => void daBiblioteca(escolhendo, arquivo.id)}
        />
      ) : null}
    </section>
  );
}