"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { AlertTriangle, CheckCircle2, Clock, Hammer, KeyRound, MessageSquare, Plus, ShieldAlert, UploadCloud, UserX } from "lucide-react";

import { CapaDoProduto } from "@/components/digitais/capa-do-produto";
import { AreaFechada, CarregandoArea, ErroDaArea, FalhaDaArea, moeda, NumeroDaArea, pedirDigitais } from "@/components/digitais/comum";
import { COR_DA_CATEGORIA, ROTULO_DA_CATEGORIA } from "@/components/digitais/selo-do-arquivo";
import { FIO_DA_LINHA } from "@/components/ui/folha-de-ajustes";
import { PageHeader } from "@/components/ui/page-header";
import { tamanhoLegivel } from "@/lib/digitais/nome-do-arquivo";

type Resposta = {
  deposito: boolean;
  numeros: { vendas30: number; variacao: number | null; pedidos30: number; pedidos7: number; comAcesso: number; produtos: number };
  porDia: Array<{ dia: string; valor: number }>;
  maisVendidos: Array<{ id: string; nome: string; imagem: string | null; tipo: string; rotuloDoTipo: string; valor: number; pedidos: number }>;
  espaco: { usado: number; porCategoria: Record<string, { bytes: number; arquivos: number }>; total: number; porArquivo: number; teste: boolean };
  atencao: {
    entregasPendentes: number;
    entregasComFalha: number;
    semCliente: number;
    enviandoArquivos: number;
    comentariosSemResposta?: number;
    codigosEsgotados?: number;
    codigosAcabando?: number;
    codigosEsperando?: number;
    encomendasPendentes?: number;
    encomendasAtrasadas?: number;
    pausadosPeloFreio?: number;
  };
  recentes: Array<{ id: string; status: string; quando: string; cliente: string; produto: string; downloads: number; ultimoAcesso: string | null }>;
};

const ORDEM = ["video", "pdf", "imagem", "compactado", "audio", "documento", "outro"];

function quandoFoi(iso: string) {
  const minutos = Math.max(0, Math.round((Date.now() - new Date(iso).getTime()) / 60000));
  if (minutos < 1) return "agora";
  if (minutos < 60) return `há ${minutos} min`;
  const horas = Math.round(minutos / 60);
  if (horas < 24) return `há ${horas} h`;
  const dias = Math.round(horas / 24);
  return dias === 1 ? "ontem" : `há ${dias} dias`;
}

function diaCurto(iso: string, hoje: boolean) {
  if (hoje) return "hoje";
  return String(new Date(`${iso}T12:00:00`).getDate());
}

const INICIAIS_CORES = ["#E5484D", "#2F80ED", "#0E9E70", "#F2994A", "#8B5CF6", "#DB2777"];
function iniciais(nome: string) {
  const partes = nome.trim().split(/\s+/).filter(Boolean);
  return ((partes[0]?.[0] ?? "") + (partes.length > 1 ? partes[partes.length - 1][0] : "")).toUpperCase() || "?";
}

export default function VisaoGeralDosDigitais() {
  const [dados, setDados] = useState<Resposta | null>(null);
  const [erro, setErro] = useState<Error | null>(null);

  const carregar = useCallback(
    () =>
      pedirDigitais<Resposta>("/api/digitais/visao-geral")
        .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]);

  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 />;

  const { numeros, espaco, atencao } = dados;
  const maiorDia = Math.max(1, ...dados.porDia.map((d) => d.valor));
  const fracaoDoEspaco = espaco.total > 0 ? espaco.usado / espaco.total : 0;
  const plural = (n: number, um: string, varios: string) => `${n} ${n === 1 ? um : varios}`;
  const itensDeAtencao = [
    (atencao.codigosEsperando ?? 0) > 0
      ? {
          Icone: KeyRound,
          cor: "#E5484D",
          titulo: `${plural(atencao.codigosEsperando ?? 0, "comprador esperando", "compradores esperando")} código`,
          texto: "Adicione códigos no produto: quem espera recebe na hora, por e-mail.",
          href: "/dashboard/digitais/produtos",
        }
      : null,
    (atencao.encomendasAtrasadas ?? 0) > 0
      ? {
          Icone: Hammer,
          cor: "#E5484D",
          titulo: plural(atencao.encomendasAtrasadas ?? 0, "encomenda atrasada", "encomendas atrasadas"),
          texto: "Passou do prazo prometido. Envie o arquivo final em Entregas.",
          href: "/dashboard/digitais/entregas",
        }
      : null,
    (atencao.pausadosPeloFreio ?? 0) > 0
      ? {
          Icone: ShieldAlert,
          cor: "#E5484D",
          titulo: `${plural(atencao.pausadosPeloFreio ?? 0, "acesso pausado", "acessos pausados")} pelo freio`,
          texto: "Aberto em muitos lugares diferentes. Reative em Entregas se você conhece o comprador.",
          href: "/dashboard/digitais/entregas",
        }
      : null,
    (atencao.codigosEsgotados ?? 0) > 0
      ? {
          Icone: KeyRound,
          cor: "#E5484D",
          titulo: `${plural(atencao.codigosEsgotados ?? 0, "produto de código esgotado", "produtos de código esgotados")}`,
          texto: "A loja mostra Esgotado. Adicione códigos para voltar a vender.",
          href: "/dashboard/digitais/produtos",
        }
      : null,
    (atencao.encomendasPendentes ?? 0) - (atencao.encomendasAtrasadas ?? 0) > 0
      ? {
          Icone: Hammer,
          cor: "#F2994A",
          titulo: plural((atencao.encomendasPendentes ?? 0) - (atencao.encomendasAtrasadas ?? 0), "encomenda para fazer", "encomendas para fazer"),
          texto: "O comprador espera o arquivo feito para ele. Envie em Entregas.",
          href: "/dashboard/digitais/entregas",
        }
      : null,
    (atencao.codigosAcabando ?? 0) > 0
      ? {
          Icone: KeyRound,
          cor: "#F2994A",
          titulo: `Códigos acabando em ${plural(atencao.codigosAcabando ?? 0, "produto", "produtos")}`,
          texto: "Adicione mais antes que esgotem.",
          href: "/dashboard/digitais/produtos",
        }
      : null,
    atencao.semCliente > 0
      ? {
          Icone: UserX,
          cor: "#E5484D",
          titulo: `${atencao.semCliente} ${atencao.semCliente === 1 ? "pedido" : "pedidos"} sem cliente identificado`,
          texto: "Escolha o cliente no pedido para a entrega sair.",
          href: "/dashboard/digitais/entregas",
        }
      : null,
    atencao.entregasComFalha > 0
      ? {
          Icone: AlertTriangle,
          cor: "#E5484D",
          titulo: `${atencao.entregasComFalha} ${atencao.entregasComFalha === 1 ? "e-mail de entrega não saiu" : "e-mails de entrega não saíram"}`,
          texto: "Confira o e-mail do cliente e reenvie.",
          href: "/dashboard/digitais/entregas",
        }
      : null,
    (atencao.comentariosSemResposta ?? 0) > 0
      ? {
          Icone: MessageSquare,
          cor: "#5F31D6",
          titulo: `${atencao.comentariosSemResposta} ${atencao.comentariosSemResposta === 1 ? "pergunta de cliente sem resposta" : "perguntas de clientes sem resposta"}`,
          texto: "Responda embaixo do vídeo: todos os clientes veem, com o selo da loja.",
          href: "/dashboard/digitais/comentarios",
        }
      : null,
    atencao.enviandoArquivos > 0
      ? {
          Icone: UploadCloud,
          cor: "#8B5CF6",
          titulo: `${atencao.enviandoArquivos} ${atencao.enviandoArquivos === 1 ? "arquivo sendo enviado" : "arquivos sendo enviados"}`,
          texto: "Envio parado? Escolha o mesmo arquivo para continuar.",
          href: "/dashboard/digitais/arquivos",
        }
      : null,
    atencao.entregasPendentes > 0
      ? {
          Icone: Clock,
          cor: "#F2994A",
          titulo: `${atencao.entregasPendentes} ${atencao.entregasPendentes === 1 ? "entrega saindo" : "entregas saindo"}`,
          texto: "Os e-mails saem em instantes.",
          href: "/dashboard/digitais/entregas",
        }
      : null,
  ].filter((item): item is NonNullable<typeof item> => item !== null);

  return (
    <div className="space-y-5">
      <PageHeader
        eyebrow="Produtos digitais"
        title="Visão geral"
        subtitle="Tudo o que você vende sem estoque: conteúdos em vídeo, arquivos, links e códigos. Últimos 30 dias."
        actions={
          <Link href="/dashboard/digitais/produtos" className="ks-button ks-button-primary">
            <Plus size={16} />
            Novo produto digital
          </Link>
        }
      />

      <section className="grid overflow-hidden rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] shadow-[var(--ks-shadow-subtle)] sm:grid-cols-2 lg:grid-cols-5 [&>*]:border-[var(--ks-color-border-subtle)] [&>*:not(:first-child)]:border-t sm:[&>*:not(:first-child)]:border-t-0 sm:[&>*:nth-child(n+3)]:border-t lg:[&>*:nth-child(n+3)]:border-t-0 lg:[&>*:not(:first-child)]:border-l">
        <NumeroDaArea
          rotulo="Vendas digitais"
          valor={moeda(numeros.vendas30)}
          detalhe={
            numeros.variacao === null ? (
              "nos últimos 30 dias"
            ) : (
              <span className={numeros.variacao >= 0 ? "font-semibold text-[var(--ks-emerald)]" : "font-semibold text-[var(--ks-color-status-danger)]"}>
                {numeros.variacao >= 0 ? "+" : ""}
                {numeros.variacao}% no mês
              </span>
            )
          }
        />
        <NumeroDaArea rotulo="Pedidos" valor={numeros.pedidos30} detalhe={`+${numeros.pedidos7} nesta semana`} />
        <NumeroDaArea rotulo="Com acesso" valor={numeros.comAcesso} detalhe={numeros.comAcesso === 1 ? "comprador" : "compradores"} />
        <NumeroDaArea rotulo="Produtos" valor={numeros.produtos} detalhe="digitais cadastrados" />
        <NumeroDaArea rotulo="Espaço usado" valor={tamanhoLegivel(espaco.usado)} detalhe={`de ${tamanhoLegivel(espaco.total)}`} />
      </section>

      <div className="grid gap-5 xl:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)]">
        <div className="space-y-5">
          <section className="rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] p-5 shadow-[var(--ks-shadow-subtle)]">
            <div className="flex items-baseline justify-between gap-3">
              <h2 className="text-[15px] font-extrabold text-[var(--ks-color-text-primary)]">
                Vendas por dia <span className="ml-1 text-xs font-medium text-[var(--ks-color-text-muted)]">últimos 14 dias</span>
              </h2>
            </div>
            <div className="mt-4 flex h-36 items-end gap-1.5 sm:gap-2">
              {dados.porDia.map((dia, indice) => {
                const hoje = indice === dados.porDia.length - 1;
                return (
                  <div key={dia.dia} className="flex h-full min-w-0 flex-1 flex-col items-center justify-end gap-1.5">
                    <div
                      title={`${new Date(`${dia.dia}T12:00:00`).toLocaleDateString("pt-BR")}: ${moeda(dia.valor)}`}
                      className="w-full rounded-t-md"
                      style={{
                        height: `${Math.max(dia.valor > 0 ? 6 : 2, (dia.valor / maiorDia) * 100)}%`,
                        background: dia.valor > 0 ? (hoje ? "linear-gradient(180deg, #34D399 0%, #0E9E70 100%)" : "linear-gradient(180deg, #8B5CF6 0%, #6D28D9 100%)") : "var(--ks-color-bg-inset)",
                      }}
                    />
                    <span className="ks-num text-[10px] text-[var(--ks-color-text-soft)]">{diaCurto(dia.dia, hoje)}</span>
                  </div>
                );
              })}
            </div>
          </section>

          <section className="rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] px-5 pb-2 pt-5 shadow-[var(--ks-shadow-subtle)]">
            <h2 className="text-[15px] font-extrabold text-[var(--ks-color-text-primary)]">
              O que mais vende <span className="ml-1 text-xs font-medium text-[var(--ks-color-text-muted)]">30 dias</span>
            </h2>
            {dados.maisVendidos.length === 0 ? (
              <p className="py-6 text-sm text-[var(--ks-color-text-muted)]">As vendas dos produtos digitais aparecem aqui.</p>
            ) : (
              <ul className="mt-2">
                {dados.maisVendidos.map((item) => (
                  <li key={item.id} className={`flex items-center gap-3 py-3 ${FIO_DA_LINHA}`}>
                    <CapaDoProduto tipo={item.tipo} imagem={item.imagem} tamanho={44} />
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-sm font-bold text-[var(--ks-color-text-primary)]">{item.nome}</p>
                      <p className="text-xs text-[var(--ks-color-text-muted)]">{item.rotuloDoTipo}</p>
                    </div>
                    <div className="text-right">
                      <p className="ks-num text-sm font-bold text-[var(--ks-color-text-primary)]">{moeda(item.valor)}</p>
                      <p className="ks-num text-xs text-[var(--ks-color-text-muted)]">
                        {item.pedidos} {item.pedidos === 1 ? "venda" : "vendas"}
                      </p>
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </section>
        </div>

        <div className="space-y-5">
          <section className="rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] p-5 shadow-[var(--ks-shadow-subtle)]">
            <div className="flex items-center justify-between gap-3">
              <h2 className="text-[15px] font-extrabold text-[var(--ks-color-text-primary)]">Espaço</h2>
              <Link href="/dashboard/digitais/arquivos" className="rounded-full bg-[var(--ks-brand-50)] px-3 py-1 text-xs font-bold text-[var(--ks-brand-600)]">
                Arquivos
              </Link>
            </div>
            <p className="mt-2 flex flex-wrap items-baseline gap-x-2">
              <span className="ks-num text-2xl font-extrabold text-[var(--ks-color-text-primary)]">{tamanhoLegivel(espaco.usado)}</span>
              <span className="text-sm text-[var(--ks-color-text-muted)]">
                de {tamanhoLegivel(espaco.total)} usados ({Math.round(fracaoDoEspaco * 100)}%)
              </span>
            </p>
            <div className="mt-3 flex h-3 overflow-hidden rounded-full bg-[var(--ks-color-bg-inset)]">
              {ORDEM.map((categoria) => {
                const bytes = espaco.porCategoria[categoria]?.bytes ?? 0;
                if (!bytes) return null;
                return <span key={categoria} style={{ width: `${Math.max(0.8, (bytes / espaco.total) * 100)}%`, background: COR_DA_CATEGORIA[categoria] }} />;
              })}
            </div>
            <div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-[var(--ks-color-text-muted)]">
              {ORDEM.filter((categoria) => espaco.porCategoria[categoria]?.bytes).map((categoria) => (
                <span key={categoria} className="flex items-center gap-1.5">
                  <i className="inline-block h-2.5 w-2.5 rounded-[3px]" style={{ background: COR_DA_CATEGORIA[categoria] }} />
                  {ROTULO_DA_CATEGORIA[categoria]} · {tamanhoLegivel(espaco.porCategoria[categoria].bytes)}
                </span>
              ))}
            </div>
            <p className="mt-3 rounded-xl bg-[color:rgba(14,158,112,0.08)] px-3 py-2 text-xs leading-5 text-[var(--ks-emerald)]">
              Downloads e vídeos assistidos não gastam espaço nem têm custo.
            </p>
          </section>

          <section className="rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] px-5 pb-2 pt-5 shadow-[var(--ks-shadow-subtle)]">
            <h2 className="text-[15px] font-extrabold text-[var(--ks-color-text-primary)]">Para olhar agora</h2>
            <ul className="mt-2">
              {itensDeAtencao.length === 0 ? (
                <li className="flex items-center gap-3 py-3">
                  <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-[color:rgba(14,158,112,0.1)] text-[var(--ks-emerald)]">
                    <CheckCircle2 size={16} />
                  </span>
                  <span className="text-sm text-[var(--ks-color-text-secondary)]">Tudo em dia: nenhuma entrega esperando por você.</span>
                </li>
              ) : (
                itensDeAtencao.map(({ Icone, cor, titulo, texto, href }) => (
                  <li key={titulo} className={FIO_DA_LINHA}>
                    <Link href={href} className="flex items-start gap-3 rounded-xl py-3 hover:bg-[var(--ks-color-bg-hover)]">
                      <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-white" style={{ background: cor }}>
                        <Icone size={16} />
                      </span>
                      <span className="min-w-0">
                        <span className="block text-sm font-semibold text-[var(--ks-color-text-primary)]">{titulo}</span>
                        <span className="block text-xs text-[var(--ks-color-text-muted)]">{texto}</span>
                      </span>
                    </Link>
                  </li>
                ))
              )}
            </ul>
          </section>

          <section className="rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] px-5 pb-2 pt-5 shadow-[var(--ks-shadow-subtle)]">
            <div className="flex items-center justify-between gap-3">
              <h2 className="text-[15px] font-extrabold text-[var(--ks-color-text-primary)]">Entregas recentes</h2>
              <Link href="/dashboard/digitais/entregas" className="rounded-full bg-[var(--ks-brand-50)] px-3 py-1 text-xs font-bold text-[var(--ks-brand-600)]">
                Todas
              </Link>
            </div>
            {dados.recentes.length === 0 ? (
              <p className="py-6 text-sm text-[var(--ks-color-text-muted)]">Quando alguém comprar, a entrega aparece aqui.</p>
            ) : (
              <ul className="mt-2">
                {dados.recentes.map((item, indice) => (
                  <li key={item.id} className={`flex items-center gap-3 py-3 ${FIO_DA_LINHA}`}>
                    <span
                      className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
                      style={{ background: INICIAIS_CORES[indice % INICIAIS_CORES.length] }}
                    >
                      {iniciais(item.cliente)}
                    </span>
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-sm font-semibold text-[var(--ks-color-text-primary)]">{item.cliente}</p>
                      <p className="truncate text-xs text-[var(--ks-color-text-muted)]">
                        {item.produto} · {item.downloads > 0 ? `baixou ${item.downloads}x` : item.status === "ativo" ? "acesso liberado" : item.status}
                      </p>
                    </div>
                    <span className="shrink-0 text-xs text-[var(--ks-color-text-soft)]">{quandoFoi(item.quando)}</span>
                  </li>
                ))}
              </ul>
            )}
          </section>
        </div>
      </div>
    </div>
  );
}