"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Info, Loader2, Plus } from "lucide-react";

import { CapaDoProduto } from "@/components/digitais/capa-do-produto";
import { AreaFechada, CarregandoArea, ErroDaArea, FalhaDaArea, moeda, pedirDigitais } from "@/components/digitais/comum";
import { Aviso } from "@/components/ui/aviso";
import { FIO_DA_LINHA } from "@/components/ui/folha-de-ajustes";
import { PageHeader } from "@/components/ui/page-header";

type ProdutoNaLista = {
  id: string;
  nome: string;
  preco: number;
  imagem: string | null;
  naLoja: boolean;
  tipo: "curso" | "arquivos" | "link" | "codigo" | "live";
  rotuloDoTipo: string;
  /* Live: a sala, para abrir o editor dela. */
  liveId?: string | null;
  itens: number;
  criadoEm: string;
  pedidos30: number;
  /* Código ou licença: quantos sobram e quem espera. */
  codigos: { livres: number; total: number; esperando: number; situacao: "esgotado" | "acabando" | "ok" } | null;
  /* Grátis: quantos aceitaram receber novidades da loja. */
  aceitaramNovidades: number;
  sobEncomenda: boolean;
  preVenda: string | null;
  receita30: number;
  comAcesso: number;
  downloads: number;
};

type Resposta = { podeEditar: boolean; produtos: ProdutoNaLista[] };

type Filtro = "todos" | "curso" | "arquivos" | "link" | "codigo" | "live" | "rascunhos";

const TIPOS = [
  {
    valor: "curso",
    titulo: "Conteúdo em vídeo",
    texto: "Vídeos e textos numa área de membros sua: módulos, progresso, comentários e certificado.",
    exemplo: "Sublimação do zero",
    emBreve: false,
  },
  {
    valor: "arquivos",
    titulo: "Arquivos para baixar",
    texto: "PDF, imagens, ZIP, vídeos e moldes. Até 2 GB por arquivo, com link seguro para quem comprou.",
    exemplo: "kit festa, moldes, mockups",
    emBreve: false,
  },
  {
    valor: "link",
    titulo: "Link de acesso",
    texto: "Um endereço que só quem comprou recebe: grupo, planilha, Canva, Drive ou sua plataforma.",
    exemplo: "grupo VIP, modelo no Canva",
    emBreve: false,
  },
  {
    valor: "codigo",
    titulo: "Código ou licença",
    texto: "Uma lista de códigos e cada compra leva um, sem repetir. Avisa quando estiver acabando.",
    exemplo: "licença de fonte, chave",
    emBreve: false,
  },
  {
    valor: "live",
    titulo: "Live",
    texto: "Apresentação ou venda ao vivo com bate-papo, mão levantada, tela compartilhada e gravação. Também vira liveshop na página dos produtos.",
    exemplo: "apresentação ao vivo, liveshop",
    emBreve: false,
  },
] as const;

const FILTROS: Array<{ valor: Filtro; rotulo: string }> = [
  { valor: "todos", rotulo: "Todos" },
  { valor: "curso", rotulo: "Conteúdos em vídeo" },
  { valor: "arquivos", rotulo: "Arquivos" },
  { valor: "link", rotulo: "Links" },
  { valor: "codigo", rotulo: "Códigos" },
  { valor: "live", rotulo: "Lives" },
  { valor: "rascunhos", rotulo: "Rascunhos" },
];

export default function ProdutosDigitais() {
  const router = useRouter();
  const [dados, setDados] = useState<Resposta | null>(null);
  const [erro, setErro] = useState<Error | null>(null);
  const [escolhendo, setEscolhendo] = useState(false);
  const [tipoEscolhido, setTipoEscolhido] = useState<string>("arquivos");
  const [criando, setCriando] = useState(false);
  const [aviso, setAviso] = useState<string | null>(null);
  const [filtro, setFiltro] = useState<Filtro>("todos");

  const carregar = useCallback(
    () =>
      pedirDigitais<Resposta>("/api/digitais/produtos")
        .then((resposta) => {
          setDados(resposta);
          setErro(null);
        })
        .catch((e: unknown) => setErro(e instanceof Error ? e : new Error("Não foi possível carregar."))),
    []
  );

  useEffect(() => {
    void carregar();
  }, [carregar]);

  const contagem = useMemo(() => {
    const lista = dados?.produtos ?? [];
    return {
      todos: lista.length,
      curso: lista.filter((p) => p.tipo === "curso").length,
      arquivos: lista.filter((p) => p.tipo === "arquivos").length,
      link: lista.filter((p) => p.tipo === "link").length,
      codigo: lista.filter((p) => p.tipo === "codigo").length,
      live: lista.filter((p) => p.tipo === "live").length,
      rascunhos: lista.filter((p) => !p.naLoja).length,
    } satisfies Record<Filtro, number>;
  }, [dados]);

  const visiveis = useMemo(() => {
    const lista = dados?.produtos ?? [];
    if (filtro === "todos") return lista;
    if (filtro === "rascunhos") return lista.filter((p) => !p.naLoja);
    return lista.filter((p) => p.tipo === filtro);
  }, [dados, filtro]);

  const criar = async () => {
    /* A live nasce na tela dela: lá ela ganha a sala junto com o produto. */
    if (tipoEscolhido === "live") {
      router.push("/dashboard/digitais/lives/nova");
      return;
    }
    setCriando(true);
    setAviso(null);
    try {
      const resposta = await pedirDigitais<{ id: string }>("/api/digitais/produtos", {
        method: "POST",
        body: JSON.stringify({ tipo: tipoEscolhido }),
      });
      router.push(tipoEscolhido === "curso" ? `/dashboard/digitais/cursos/${resposta.id}` : `/dashboard/digitais/produtos/${resposta.id}`);
    } catch (e) {
      setAviso(e instanceof Error ? e.message : "Não foi possível criar.");
      setCriando(false);
    }
  };

  if (erro instanceof ErroDaArea && erro.status === 403) return <AreaFechada erro={erro} />;
  if (erro && !dados) return <FalhaDaArea erro={erro} aoTentarDeNovo={() => void carregar()} />;
  if (!dados) return <CarregandoArea />;

  return (
    <div className="space-y-5">
      <PageHeader
        eyebrow="O que você vende"
        title="Produtos digitais"
        subtitle="Eles aparecem na sua loja ao lado dos produtos físicos e são entregues sozinhos depois do pagamento."
        actions={
          dados.podeEditar && !escolhendo ? (
            <button type="button" onClick={() => setEscolhendo(true)} className="ks-button ks-button-primary">
              <Plus size={16} />
              Novo produto digital
            </button>
          ) : null
        }
      />

      {aviso ? (
        <Aviso tom="ruim" aoFechar={() => setAviso(null)}>
          {aviso}
        </Aviso>
      ) : null}

      {escolhendo ? (
        <section className="rounded-2xl border border-[var(--ks-brand-200,#ddd6fe)] bg-[var(--ks-color-bg-elevated)] p-5 shadow-[var(--ks-shadow-subtle)] sm:p-6">
          <h2 className="text-[17px] font-extrabold text-[var(--ks-color-text-primary)]">O que você vai vender?</h2>
          <p className="mt-0.5 text-[13px] text-[var(--ks-color-text-muted)]">Escolha o jeito de entregar. Dá para mudar o resto depois.</p>
          <div role="radiogroup" aria-label="Tipo do produto" className="mt-4 grid overflow-hidden rounded-2xl border border-[var(--ks-color-border-subtle)] sm:grid-cols-2 xl:grid-cols-4">
            {TIPOS.map((tipo, indice) => {
              const escolhido = tipoEscolhido === tipo.valor;
              return (
                <button
                  key={tipo.valor}
                  type="button"
                  role="radio"
                  aria-checked={escolhido}
                  disabled={tipo.emBreve}
                  onClick={() => setTipoEscolhido(tipo.valor)}
                  className={`flex items-start gap-3 p-4 text-left transition-colors ${
                    indice > 0 ? "border-t border-[var(--ks-color-border-subtle)] sm:border-t-0 xl:border-l" : ""
                  } ${indice === 2 ? "sm:border-t xl:border-t-0" : ""} ${indice % 2 === 1 ? "sm:border-l" : ""} ${
                    escolhido ? "bg-[var(--ks-brand-50)]" : tipo.emBreve ? "cursor-not-allowed opacity-60" : "hover:bg-[var(--ks-color-bg-hover)]"
                  }`}
                >
                  <span
                    aria-hidden
                    className={`mt-0.5 flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full border-2 ${
                      escolhido ? "border-[var(--ks-brand-600)] bg-[var(--ks-brand-600)]" : "border-[var(--ks-color-border-strong)]"
                    }`}
                  >
                    {escolhido ? <span className="h-1.5 w-1.5 rounded-full bg-white" /> : null}
                  </span>
                  <span className="min-w-0">
                    <span className="flex flex-wrap items-center gap-2 text-sm font-bold text-[var(--ks-color-text-primary)]">
                      {tipo.titulo}
                      {tipo.emBreve ? (
                        <span className="rounded-full bg-[var(--ks-color-bg-inset)] px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-[var(--ks-color-text-muted)]">
                          em breve
                        </span>
                      ) : null}
                    </span>
                    <span className="mt-1 block text-xs leading-relaxed text-[var(--ks-color-text-muted)]">{tipo.texto}</span>
                    <span className="mt-1.5 block text-xs font-semibold text-[var(--ks-brand-600)]">Ex.: {tipo.exemplo}</span>
                  </span>
                </button>
              );
            })}
          </div>
          <div className="mt-4 flex flex-wrap justify-end gap-2">
            <button type="button" onClick={() => setEscolhendo(false)} className="ks-button ks-button-soft" disabled={criando}>
              Cancelar
            </button>
            <button type="button" onClick={() => void criar()} className="ks-button ks-button-primary" disabled={criando}>
              {criando ? <Loader2 size={16} className="animate-spin" /> : null}
              Continuar
            </button>
          </div>
        </section>
      ) : null}

      <div className="flex flex-wrap gap-2">
        {FILTROS.filter((f) => f.valor === "todos" || contagem[f.valor] > 0 || filtro === f.valor).map((f) => {
          const ativo = filtro === f.valor;
          return (
            <button
              key={f.valor}
              type="button"
              onClick={() => setFiltro(f.valor)}
              className={`rounded-full border px-3.5 py-1.5 text-[13px] font-semibold transition-colors ${
                ativo
                  ? "border-[var(--ks-brand-600)] bg-[var(--ks-brand-600)] text-white"
                  : "border-[var(--ks-color-border-subtle)] bg-white text-[var(--ks-color-text-secondary)] hover:border-[var(--ks-brand-500)]"
              }`}
            >
              {f.rotulo} <span className={`ks-num ml-1 ${ativo ? "text-white/80" : "text-[var(--ks-color-text-soft)]"}`}>{contagem[f.valor]}</span>
            </button>
          );
        })}
      </div>

      <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="hidden grid-cols-[minmax(0,1fr)_130px_120px_130px_96px] gap-4 border-b border-[var(--ks-color-border-subtle)] px-5 py-3 text-[11px] font-bold uppercase tracking-[0.12em] text-[var(--ks-color-text-soft)] lg:grid">
          <span>Produto</span>
          <span>Preço</span>
          <span>Vendas 30 dias</span>
          <span>Quem tem acesso</span>
          <span>Situação</span>
        </div>
        {visiveis.length === 0 ? (
          <div className="flex flex-col items-center gap-2 px-6 py-14 text-center">
            <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
              {dados.produtos.length === 0 ? "Você ainda não tem produtos digitais." : "Nenhum produto neste filtro."}
            </p>
            {dados.produtos.length === 0 && dados.podeEditar ? (
              <p className="max-w-sm text-xs leading-5 text-[var(--ks-color-text-muted)]">
                Comece por um arquivo para baixar ou um link de acesso. Ele fica como rascunho até você publicar na loja.
              </p>
            ) : null}
          </div>
        ) : (
          <ul className="px-2 sm:px-3">
            {visiveis.map((produto) => (
              <li key={produto.id} className={FIO_DA_LINHA}>
                <Link
                  href={
                    produto.tipo === "curso"
                      ? `/dashboard/digitais/cursos/${produto.id}`
                      : produto.tipo === "live" && produto.liveId
                        ? `/dashboard/digitais/lives/${produto.liveId}`
                        : `/dashboard/digitais/produtos/${produto.id}`
                  }
                  className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 rounded-xl px-2 py-3 transition-colors hover:bg-[var(--ks-color-bg-hover)] lg:grid-cols-[minmax(0,1fr)_130px_120px_130px_96px]"
                >
                  <span className="flex min-w-0 items-center gap-3">
                    <CapaDoProduto tipo={produto.tipo} imagem={produto.imagem} />
                    <span className="min-w-0">
                      <span className="block truncate text-sm font-bold text-[var(--ks-color-text-primary)]">{produto.nome}</span>
                      <span className="block truncate text-xs text-[var(--ks-color-text-muted)]">
                        {produto.rotuloDoTipo} ·{" "}
                        {produto.codigos
                          ? `${produto.codigos.livres} de ${produto.codigos.total} ${produto.codigos.total === 1 ? "código sobrando" : "códigos sobrando"}`
                          : produto.itens === 0
                            ? "nada para entregar ainda"
                            : `${produto.itens} ${produto.itens === 1 ? "item" : "itens"}`}
                        {produto.sobEncomenda ? " · sob encomenda" : ""}
                        {produto.preVenda ? ` · pré-venda até ${new Date(produto.preVenda).toLocaleDateString("pt-BR", { timeZone: "America/Sao_Paulo" })}` : ""}
                        <span className="lg:hidden"> · {produto.preco > 0 ? moeda(produto.preco) : "Grátis"}</span>
                      </span>
                      {produto.codigos && produto.codigos.esperando > 0 ? (
                        <span className="mt-0.5 block text-xs font-semibold text-[#c2263f]">
                          {produto.codigos.esperando} {produto.codigos.esperando === 1 ? "compra esperando código" : "compras esperando código"}
                        </span>
                      ) : null}
                    </span>
                  </span>
                  <span className="hidden lg:block">
                    <span className="ks-num block text-sm font-bold text-[var(--ks-color-text-primary)]">{produto.preco > 0 ? moeda(produto.preco) : "Grátis"}</span>
                    {produto.preco > 0 ? null : <span className="block text-xs text-[var(--ks-color-text-muted)]">pede só o contato</span>}
                  </span>
                  <span className="hidden lg:block">
                    <span className="ks-num block text-sm font-bold text-[var(--ks-color-text-primary)]">{produto.pedidos30}</span>
                    <span className="ks-num block text-xs text-[var(--ks-color-text-muted)]">{moeda(produto.receita30)}</span>
                  </span>
                  <span className="hidden lg:block">
                    <span className="ks-num block text-sm font-bold text-[var(--ks-color-text-primary)]">
                      {produto.comAcesso} {produto.tipo === "curso" ? (produto.comAcesso === 1 ? "cliente" : "clientes") : produto.comAcesso === 1 ? "comprador" : "compradores"}
                    </span>
                    <span className="ks-num block text-xs text-[var(--ks-color-text-muted)]">
                      {produto.preco > 0 || produto.aceitaramNovidades === 0
                        ? `${produto.downloads} downloads`
                        : `${produto.aceitaramNovidades} ${produto.aceitaramNovidades === 1 ? "aceitou" : "aceitaram"} novidades`}
                    </span>
                  </span>
                  <span>
                    {produto.naLoja && produto.codigos && produto.codigos.situacao !== "ok" ? (
                      <span
                        className={`inline-block rounded-full px-2.5 py-1 text-xs font-bold ${
                          produto.codigos.situacao === "esgotado"
                            ? "bg-[color:rgba(225,58,88,0.12)] text-[#c2263f]"
                            : "bg-[color:rgba(234,179,8,0.14)] text-[#a16207]"
                        }`}
                      >
                        {produto.codigos.situacao === "esgotado" ? "Esgotado" : "Acabando"}
                      </span>
                    ) : (
                      <span
                        className={`inline-block rounded-full px-2.5 py-1 text-xs font-bold ${
                          produto.naLoja
                            ? "bg-[color:rgba(14,158,112,0.12)] text-[var(--ks-emerald)]"
                            : "bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-muted)]"
                        }`}
                      >
                        {produto.naLoja ? "Na loja" : "Rascunho"}
                      </span>
                    )}
                  </span>
                </Link>
              </li>
            ))}
          </ul>
        )}
      </section>

      <p className="flex items-center gap-2 text-xs text-[var(--ks-color-text-muted)]">
        <Info size={14} />
        Os produtos físicos continuam em Produtos → Catálogo, como sempre. Esta área cuida só dos digitais.
      </p>
    </div>
  );
}