"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { Award } from "lucide-react";

import { pedirDigitais } from "@/components/digitais/comum";
import { Aviso } from "@/components/ui/aviso";
import { EntradaDecimal } from "@/components/ui/campo-decimal";
import { ChaveDeAjuste, EscolhaDeAjuste, FolhaDeAjustes, LinhaDeAjuste, SecaoDeAjustes } from "@/components/ui/folha-de-ajustes";
import { cargaHorariaEmMinutos, textoDaCargaHoraria, type ConfigDoCurso } from "@/lib/digitais/curso";
import type { ConfigDigital } from "@/lib/digitais/produto";

import { CURSO_VAZIO } from "./pagina-de-venda";
import type { Ficha } from "./tipos";

/*
 * A aba Certificado do curso: se este curso dá certificado e a carga horária
 * (a soma dos vídeos, ou a que a loja informar). Quem assina e se a loja
 * emite certificados ficam em Configurações. O resultado é a folha abaixo,
 * igual ao PDF que o aluno baixa.
 */

type DaLoja = { emitir: boolean; assinatura: string | null; nome: string; cor: string | null };

export function CertificadoDoCurso({ ficha, podeEditar, aoMudar }: { ficha: Ficha; podeEditar: boolean; aoMudar: (ficha: Ficha) => void }) {
  const [daLoja, setDaLoja] = useState<DaLoja | null>(null);
  useEffect(() => {
    let cancelado = false;
    pedirDigitais<{ config: { certificado: { emitir: boolean; assinatura: string | null } }; loja: { nome: string; cor: string | null } }>("/api/digitais/configuracoes")
      .then((resposta) => {
        if (!cancelado) setDaLoja({ ...resposta.config.certificado, nome: resposta.loja.nome, cor: resposta.loja.cor });
      })
      .catch(() => undefined);
    return () => {
      cancelado = true;
    };
  }, []);

  const curso = ficha.config.curso ?? CURSO_VAZIO;
  const certificado = curso.certificado;
  const mudar = (parte: Partial<ConfigDoCurso["certificado"]>) =>
    aoMudar({ ...ficha, config: { ...ficha.config, curso: { ...curso, certificado: { ...certificado, ...parte } } } as ConfigDigital });
  const duracaoDosVideos = curso.conteudo.duracaoS;
  const automatica = textoDaCargaHoraria(cargaHorariaEmMinutos({ cargaHoras: null }, duracaoDosVideos));
  const carga = textoDaCargaHoraria(cargaHorariaEmMinutos(certificado, duracaoDosVideos));
  const cor = daLoja?.cor || "#4F46E5";
  const ligado = certificado.emitir && daLoja?.emitir !== false;

  return (
    <div className="space-y-5">
      {daLoja && !daLoja.emitir ? (
        <Aviso tom="atencao">
          Os certificados estão desligados para a loja toda.{" "}
          <Link href="/dashboard/digitais/configuracoes#dig-certificado" className="font-semibold underline underline-offset-2">
            Ligar em Configurações
          </Link>
        </Aviso>
      ) : null}

      <FolhaDeAjustes>
        <SecaoDeAjustes
          id="cv-certificado"
          Icone={Award}
          titulo="Certificado"
          texto="Quem concluir todos os vídeos recebe por e-mail e baixa um PDF com o nome, o conteúdo e a carga horária, com um código que qualquer pessoa confere."
        >
          <ChaveDeAjuste
            titulo="Este conteúdo dá certificado"
            texto="Desligado, o cliente conclui o conteúdo sem certificado e a página de venda não fala dele."
            ligado={certificado.emitir}
            desabilitado={!podeEditar}
            aoMudar={(emitir) => mudar({ emitir })}
          />
          <LinhaDeAjuste titulo="Carga horária" texto="O tempo que aparece no certificado.">
            <EscolhaDeAjuste
              rotulo="Carga horária"
              valor={certificado.cargaHoras ? "informada" : "videos"}
              aoEscolher={(valor) => {
                if (!podeEditar) return;
                mudar({ cargaHoras: valor === "videos" ? null : certificado.cargaHoras ?? Math.max(1, Math.ceil(duracaoDosVideos / 3600)) });
              }}
              opcoes={[
                { valor: "videos", titulo: "A soma dos vídeos", texto: duracaoDosVideos ? `Hoje: ${automatica}. Muda sozinha com os vídeos.` : "Muda sozinha com os vídeos." },
                { valor: "informada", titulo: "Eu informo", texto: "Para contar exercícios e leituras fora dos vídeos." },
              ]}
            />
            {certificado.cargaHoras ? (
              <div className="mt-2 max-w-[220px]">
                <EntradaDecimal
                  aria-label="Horas do certificado"
                  casas={0}
                  valor={certificado.cargaHoras}
                  disabled={!podeEditar}
                  aoMudar={(n) => mudar({ cargaHoras: Math.max(1, Math.min(2000, Math.round(n || 1))) })}
                  suffix="horas"
                />
              </div>
            ) : null}
          </LinhaDeAjuste>
          <LinhaDeAjuste
            titulo="Quem assina"
            texto={
              <>
                Vale para todos os conteúdos.{" "}
                <Link href="/dashboard/digitais/configuracoes#dig-certificado" className="font-semibold text-[var(--ks-brand-600)] hover:underline">
                  Mudar em Configurações
                </Link>
              </>
            }
          >
            <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">{daLoja?.assinatura || "Sem assinatura: sai só o nome da loja."}</p>
          </LinhaDeAjuste>
        </SecaoDeAjustes>
      </FolhaDeAjustes>

      <section className={`rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-inset)] p-4 sm:p-6 ${ligado ? "" : "opacity-60"}`}>
        <p className="mb-3 text-xs font-bold uppercase tracking-[0.12em] text-[var(--ks-color-text-soft)]">Como fica o certificado</p>
        <div className="mx-auto max-w-[620px]" style={{ containerType: "inline-size" }}>
          <div
            className="relative flex aspect-[1.414/1] w-full flex-col items-center justify-center overflow-hidden rounded-[2.2cqw] bg-white text-center text-[#1B2440] shadow-[0_18px_40px_-18px_rgba(27,36,64,0.35)]"
            style={{ padding: "6cqw 7cqw" }}
          >
            <span className="pointer-events-none absolute rounded-[1.4cqw]" style={{ inset: "2.2cqw", border: `0.35cqw solid ${cor}` }} />
            <span className="relative font-extrabold" style={{ fontSize: "2.6cqw", color: cor }}>
              {daLoja?.nome ?? "Sua loja"}
            </span>
            <span className="relative font-bold uppercase" style={{ fontSize: "1.9cqw", letterSpacing: "0.5cqw", color: cor, marginTop: "2.4cqw" }}>
              Certificado de conclusão
            </span>
            <span className="relative text-[#5E6478]" style={{ fontSize: "1.9cqw", marginTop: "2.6cqw" }}>
              Certificamos que
            </span>
            <span className="relative font-extrabold" style={{ fontSize: "4.6cqw", marginTop: "0.8cqw" }}>
              Nome do cliente
            </span>
            <span className="relative text-[#5E6478]" style={{ fontSize: "1.9cqw", marginTop: "1.6cqw" }}>
              concluiu o conteúdo
            </span>
            <span className="relative line-clamp-2 font-bold" style={{ fontSize: "3cqw", marginTop: "0.6cqw" }}>
              {ficha.nome || "Nome do conteúdo"}
            </span>
            <span className="relative text-[#5E6478]" style={{ fontSize: "1.75cqw", marginTop: "1.8cqw" }}>
              com carga horária de {carga}, na data em que concluir.
            </span>
            <span className="absolute flex items-end justify-between text-left" style={{ left: "8cqw", right: "8cqw", bottom: "6.4cqw" }}>
              <span>
                {daLoja?.assinatura ? (
                  <>
                    <span className="block border-t border-[#A3A9B8]" style={{ width: "26cqw", paddingTop: "0.8cqw" }} />
                    <span className="block font-bold" style={{ fontSize: "1.55cqw" }}>
                      {daLoja.assinatura}
                    </span>
                  </>
                ) : null}
                <span className="block text-[#5E6478]" style={{ fontSize: "1.35cqw" }}>
                  {daLoja?.nome ?? "Sua loja"}
                </span>
              </span>
              <span className="text-right" style={{ fontSize: "1.35cqw" }}>
                <span className="block font-bold">Código: XXX-0000-XXXX-XXXX</span>
                <span className="block text-[#5E6478]">confira no endereço da loja</span>
              </span>
            </span>
          </div>
        </div>
      </section>
    </div>
  );
}