"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, 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";
import { duracaoLegivel } from "@/lib/digitais/curso";

type CursoNaLista = {
  id: string;
  nome: string;
  preco: number;
  imagem: string | null;
  naLoja: boolean;
  modulos: number;
  aulas: number;
  duracaoS: number;
  alunos: number;
  conclusao: number;
};

type Resposta = { podeEditar: boolean; cursos: CursoNaLista[] };

export default function ListaDeCursos() {
  const router = useRouter();
  const [dados, setDados] = useState<Resposta | null>(null);
  const [erro, setErro] = useState<Error | null>(null);
  const [criando, setCriando] = useState(false);
  const [aviso, setAviso] = useState<string | null>(null);

  const carregar = useCallback(
    () =>
      pedirDigitais<Resposta>("/api/digitais/cursos")
        .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 criar = async () => {
    setCriando(true);
    setAviso(null);
    try {
      const resposta = await pedirDigitais<{ id: string }>("/api/digitais/produtos", { method: "POST", body: JSON.stringify({ tipo: "curso" }) });
      router.push(`/dashboard/digitais/cursos/${resposta.id}`);
    } catch (e) {
      setAviso(e instanceof Error ? e.message : "Não foi possível criar o conteúdo.");
      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="Conteúdos em vídeo"
        subtitle="Vídeos e textos numa área de membros com a cara da sua loja: módulos, progresso e comentários."
        actions={
          dados.podeEditar ? (
            <button type="button" onClick={() => void criar()} className="ks-button ks-button-primary" disabled={criando}>
              {criando ? <Loader2 size={16} className="animate-spin" /> : <Plus size={16} />}
              Novo conteúdo em vídeo
            </button>
          ) : null
        }
      />

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

      <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)_120px_130px_150px_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>Conteúdo</span>
          <span>Preço</span>
          <span>Clientes</span>
          <span>Conclusão média</span>
          <span>Situação</span>
        </div>
        {dados.cursos.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)]">Você ainda não tem conteúdos em vídeo.</p>
            <p className="max-w-sm text-xs leading-5 text-[var(--ks-color-text-muted)]">
              Comece pelo primeiro módulo e um vídeo. O conteúdo fica como rascunho até você publicar na loja.
            </p>
          </div>
        ) : (
          <ul className="px-2 sm:px-3">
            {dados.cursos.map((curso) => (
              <li key={curso.id} className={FIO_DA_LINHA}>
                <Link
                  href={`/dashboard/digitais/cursos/${curso.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)_120px_130px_150px_96px]"
                >
                  <span className="flex min-w-0 items-center gap-3">
                    <CapaDoProduto tipo="curso" imagem={curso.imagem} />
                    <span className="min-w-0">
                      <span className="block truncate text-sm font-bold text-[var(--ks-color-text-primary)]">{curso.nome}</span>
                      <span className="block truncate text-xs text-[var(--ks-color-text-muted)]">
                        {curso.modulos} {curso.modulos === 1 ? "módulo" : "módulos"} · {curso.aulas} {curso.aulas === 1 ? "vídeo" : "vídeos"}
                        {curso.duracaoS ? ` · ${duracaoLegivel(curso.duracaoS)}` : ""}
                      </span>
                    </span>
                  </span>
                  <span className="ks-num hidden text-sm font-bold text-[var(--ks-color-text-primary)] lg:block">{curso.preco > 0 ? moeda(curso.preco) : "Grátis"}</span>
                  <span className="ks-num hidden text-sm font-bold text-[var(--ks-color-text-primary)] lg:block">
                    {curso.alunos} {curso.alunos === 1 ? "cliente" : "clientes"}
                  </span>
                  <span className="hidden items-center gap-2 lg:flex">
                    <span className="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--ks-color-bg-inset)]">
                      <span className="block h-full rounded-full bg-[var(--ks-brand-600)]" style={{ width: `${curso.conclusao}%` }} />
                    </span>
                    <span className="ks-num text-xs text-[var(--ks-color-text-secondary)]">{curso.conclusao}%</span>
                  </span>
                  <span>
                    <span
                      className={`inline-block rounded-full px-2.5 py-1 text-xs font-bold ${
                        curso.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)]"
                      }`}
                    >
                      {curso.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 vídeos ficam na sua área (Arquivos e espaço): assistir não tem custo por visualização.
      </p>
    </div>
  );
}