"use client";

import { useState } from "react";
import { Award, Clapperboard, Gift, ListChecks, MessageCircleQuestion, Plus, Store, Trash2, UserRound, X } from "lucide-react";

import ImageUpload from "@/components/image-upload";
import { EscolherDaBiblioteca } from "@/components/digitais/biblioteca";
import { EntradaDecimal } from "@/components/ui/campo-decimal";
import { AreaDeTexto, EscolhaDeAjuste, FolhaDeAjustes, LinhaDeAjuste, SecaoDeAjustes } from "@/components/ui/folha-de-ajustes";
import { Input } from "@/components/ui/input";
import { lerLinkDeVideo, type ConfigDoCurso } from "@/lib/digitais/curso";
import type { ConfigDigital } from "@/lib/digitais/produto";

import type { Ficha, Modulo } from "./tipos";

/*
 * As abas "Página de venda" e "Preço e acesso" do curso (prévia 14 é o
 * resultado na loja). Tudo aqui é salvo pelo botão Salvar da barra de baixo.
 */

export const CURSO_VAZIO: ConfigDoCurso = {
  aprendizados: [],
  professor: null,
  apresentacao: null,
  garantiaDias: null,
  conteudo: { modulos: [], aulas: 0, duracaoS: 0, materiais: 0 },
  certificado: { emitir: true, cargaHoras: null },
};

export function PaginaDeVenda({
  ficha,
  podeEditar,
  modulos,
  aoMudar,
}: {
  ficha: Ficha;
  podeEditar: boolean;
  modulos: Modulo[];
  aoMudar: (ficha: Ficha) => void;
}) {
  const [escolhendoVideo, setEscolhendoVideo] = useState(false);
  const [linkDaApresentacao, setLinkDaApresentacao] = useState(() =>
    ficha.config.curso?.apresentacao && "link" in ficha.config.curso.apresentacao ? ficha.config.curso.apresentacao.link.url : ""
  );
  const curso = ficha.config.curso ?? CURSO_VAZIO;
  const mudarConfig = (parte: Partial<ConfigDigital>) => aoMudar({ ...ficha, config: { ...ficha.config, ...parte } });
  const mudarCurso = (parte: Partial<ConfigDoCurso>) => mudarConfig({ curso: { ...curso, ...parte } });
  const professor = curso.professor ?? { nome: "", foto: null, destaque: null, bio: null };
  const apresentacao = curso.apresentacao;
  const videoDaApresentacao = apresentacao && "arquivoId" in apresentacao
    ? modulos.flatMap((m) => m.aulas).find((a) => a.video?.id === apresentacao.arquivoId)?.video?.nome ?? "Vídeo da biblioteca"
    : null;

  return (
    <FolhaDeAjustes>
      <SecaoDeAjustes id="cv-loja" Icone={Store} titulo="Na vitrine" texto="Nome, capa e a frase que aparecem na loja.">
        <LinhaDeAjuste titulo="Nome do conteúdo" htmlFor="cv-nome">
          <Input id="cv-nome" value={ficha.nome} maxLength={200} disabled={!podeEditar} onChange={(e) => aoMudar({ ...ficha, nome: e.target.value })} />
        </LinhaDeAjuste>
        <LinhaDeAjuste titulo="Capa" texto="Quadrada. Aparece na vitrine, na área de membros e nos e-mails." largo>
          <div className="max-w-xs">
            <ImageUpload
              bucket="products"
              folder="digitais/capas"
              value={ficha.imagem ?? ""}
              onChange={(url) => aoMudar({ ...ficha, imagem: url || null })}
              disabled={!podeEditar}
              enableCrop
              cropAspect={1}
            />
          </div>
        </LinhaDeAjuste>
        <LinhaDeAjuste titulo="Resumo" texto="Uma frase embaixo do nome: o que a pessoa consegue fazer depois de assistir." htmlFor="cv-resumo">
          <Input
            id="cv-resumo"
            value={ficha.config.resumo ?? ""}
            maxLength={160}
            disabled={!podeEditar}
            placeholder="Ex.: Da escolha da impressora até o preço que dá lucro"
            onChange={(e) => mudarConfig({ resumo: e.target.value || null })}
          />
        </LinhaDeAjuste>
        <LinhaDeAjuste titulo="Descrição" texto="Para quem é, o que tem dentro, por que fazer." htmlFor="cv-descricao">
          <AreaDeTexto id="cv-descricao" value={ficha.descricao} rows={6} maxLength={20000} disabled={!podeEditar} onChange={(e) => aoMudar({ ...ficha, descricao: e.target.value })} />
        </LinhaDeAjuste>
      </SecaoDeAjustes>

      <SecaoDeAjustes id="cv-apresentacao" Icone={Clapperboard} titulo="Apresentação" texto="Um vídeo curto no topo da página de venda. Quem visita assiste sem comprar.">
        <LinhaDeAjuste titulo="Vídeo de apresentação" texto="Da sua biblioteca, ou um link do YouTube, Vimeo ou Panda Video.">
          {videoDaApresentacao || (apresentacao && "arquivoId" in apresentacao) ? (
            <div className="flex flex-wrap items-center gap-2 rounded-xl bg-[var(--ks-color-bg-inset)] px-3 py-2.5 text-sm">
              <span className="min-w-0 flex-1 truncate font-semibold text-[var(--ks-color-text-primary)]">{videoDaApresentacao}</span>
              {podeEditar ? (
                <button type="button" className="ks-button ks-button-ghost ks-button-sm" onClick={() => mudarCurso({ apresentacao: null })} aria-label="Tirar a apresentação">
                  <X size={14} />
                </button>
              ) : null}
            </div>
          ) : (
            <div className="space-y-2">
              <Input
                value={linkDaApresentacao}
                disabled={!podeEditar}
                placeholder="https://youtu.be/..."
                onChange={(e) => {
                  setLinkDaApresentacao(e.target.value);
                  const link = lerLinkDeVideo(e.target.value);
                  if (link) mudarCurso({ apresentacao: { link } });
                  else if (!e.target.value.trim()) mudarCurso({ apresentacao: null });
                }}
              />
              {linkDaApresentacao && !lerLinkDeVideo(linkDaApresentacao) ? (
                <p className="text-xs text-[#c2263f]">Esse link não é de um vídeo do YouTube, Vimeo ou Panda Video.</p>
              ) : null}
              {podeEditar ? (
                <button type="button" className="ks-button ks-button-soft ks-button-sm" onClick={() => setEscolhendoVideo(true)}>
                  Escolher da biblioteca
                </button>
              ) : null}
            </div>
          )}
        </LinhaDeAjuste>
      </SecaoDeAjustes>

      <SecaoDeAjustes id="cv-aprender" Icone={ListChecks} titulo="O que você vai ver" texto="Até 12 frases curtas, cada uma um resultado.">
        <div className="space-y-2 py-3">
          {curso.aprendizados.map((item, indice) => (
            <div key={indice} className="flex items-center gap-2">
              <Input
                aria-label={`Aprendizado ${indice + 1}`}
                value={item}
                maxLength={140}
                disabled={!podeEditar}
                onChange={(e) => mudarCurso({ aprendizados: curso.aprendizados.map((x, i) => (i === indice ? e.target.value : x)) })}
              />
              {podeEditar ? (
                <button
                  type="button"
                  aria-label="Tirar"
                  onClick={() => mudarCurso({ aprendizados: curso.aprendizados.filter((_, i) => i !== indice) })}
                  className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-[var(--ks-color-text-soft)] hover:bg-[var(--ks-color-bg-hover)]"
                >
                  <Trash2 size={15} />
                </button>
              ) : null}
            </div>
          ))}
          {podeEditar && curso.aprendizados.length < 12 ? (
            <button type="button" className="ks-button ks-button-soft ks-button-sm" onClick={() => mudarCurso({ aprendizados: [...curso.aprendizados, ""] })}>
              <Plus size={14} />
              Aprendizado
            </button>
          ) : null}
        </div>
      </SecaoDeAjustes>

      <SecaoDeAjustes id="cv-professor" Icone={UserRound} titulo="Quem apresenta" texto="Quem está por trás do conteúdo. Gente confia em gente.">
        <LinhaDeAjuste titulo="Nome" htmlFor="cv-professor-nome">
          <Input
            id="cv-professor-nome"
            value={professor.nome}
            maxLength={80}
            disabled={!podeEditar}
            placeholder="Ex.: Paula Reis"
            onChange={(e) => mudarCurso({ professor: e.target.value.trim() ? { ...professor, nome: e.target.value } : null })}
          />
        </LinhaDeAjuste>
        <LinhaDeAjuste titulo="Foto" texto="Quadrada, do rosto." largo>
          <div className="max-w-[180px]">
            <ImageUpload
              bucket="products"
              folder="digitais/professores"
              value={professor.foto ?? ""}
              onChange={(url) => professor.nome && mudarCurso({ professor: { ...professor, foto: url || null } })}
              disabled={!podeEditar || !professor.nome}
              enableCrop
              cropAspect={1}
            />
          </div>
        </LinhaDeAjuste>
        <LinhaDeAjuste titulo="Uma linha sobre quem apresenta" htmlFor="cv-professor-destaque">
          <Input
            id="cv-professor-destaque"
            value={professor.destaque ?? ""}
            maxLength={120}
            disabled={!podeEditar || !professor.nome}
            placeholder="Ex.: Dona da Gráfica Aurora, sublimação desde 2014"
            onChange={(e) => mudarCurso({ professor: { ...professor, destaque: e.target.value || null } })}
          />
        </LinhaDeAjuste>
        <LinhaDeAjuste titulo="História" htmlFor="cv-professor-bio">
          <AreaDeTexto
            id="cv-professor-bio"
            value={professor.bio ?? ""}
            rows={3}
            maxLength={1200}
            disabled={!podeEditar || !professor.nome}
            onChange={(e) => mudarCurso({ professor: { ...professor, bio: e.target.value || null } })}
          />
        </LinhaDeAjuste>
      </SecaoDeAjustes>

      <SecaoDeAjustes id="cv-perguntas" Icone={MessageCircleQuestion} titulo="Perguntas frequentes" texto="Respondem as dúvidas antes da compra.">
        <div className="space-y-2 py-3">
          {ficha.config.perguntas.map((item, indice) => (
            <div key={indice} className="grid gap-2 rounded-2xl bg-[var(--ks-color-bg-subtle)] p-3 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)_auto]">
              <Input
                aria-label="Pergunta"
                placeholder="Pergunta"
                value={item.pergunta}
                maxLength={200}
                disabled={!podeEditar}
                onChange={(e) => mudarConfig({ perguntas: ficha.config.perguntas.map((p, i) => (i === indice ? { ...p, pergunta: e.target.value } : p)) })}
              />
              <Input
                aria-label="Resposta"
                placeholder="Resposta"
                value={item.resposta}
                maxLength={1200}
                disabled={!podeEditar}
                onChange={(e) => mudarConfig({ perguntas: ficha.config.perguntas.map((p, i) => (i === indice ? { ...p, resposta: e.target.value } : p)) })}
              />
              {podeEditar ? (
                <button
                  type="button"
                  aria-label="Tirar pergunta"
                  onClick={() => mudarConfig({ perguntas: ficha.config.perguntas.filter((_, i) => i !== indice) })}
                  className="flex h-10 w-10 items-center justify-center rounded-full text-[var(--ks-color-text-soft)] hover:bg-white"
                >
                  <Trash2 size={15} />
                </button>
              ) : null}
            </div>
          ))}
          {podeEditar && ficha.config.perguntas.length < 12 ? (
            <button type="button" className="ks-button ks-button-soft ks-button-sm" onClick={() => mudarConfig({ perguntas: [...ficha.config.perguntas, { pergunta: "", resposta: "" }] })}>
              <Plus size={14} />
              Pergunta
            </button>
          ) : null}
        </div>
      </SecaoDeAjustes>

      <SecaoDeAjustes id="cv-garantia" Icone={Award} titulo="Garantia" texto="Aparece perto do botão de comprar. Devolver o dinheiro fica com você, pelo pedido.">
        <LinhaDeAjuste titulo="Garantia de satisfação">
          <EscolhaDeAjuste
            rotulo="Garantia"
            valor={curso.garantiaDias ? String(curso.garantiaDias) : "nenhuma"}
            aoEscolher={(valor) => podeEditar && mudarCurso({ garantiaDias: valor === "nenhuma" ? null : Number(valor) })}
            opcoes={[
              { valor: "nenhuma", titulo: "Não mostrar garantia" },
              { valor: "7", titulo: "7 dias", texto: "O prazo do direito de arrependimento das compras pela internet." },
              { valor: "15", titulo: "15 dias" },
              { valor: "30", titulo: "30 dias" },
            ]}
          />
        </LinhaDeAjuste>
      </SecaoDeAjustes>

      {escolhendoVideo ? (
        <EscolherDaBiblioteca
          titulo="Escolher o vídeo de apresentação"
          so="video"
          aoFechar={() => setEscolhendoVideo(false)}
          aoEscolher={(arquivo) => {
            setEscolhendoVideo(false);
            mudarCurso({ apresentacao: { arquivoId: arquivo.id } });
          }}
        />
      ) : null}
    </FolhaDeAjustes>
  );
}

type PrazoDoCurso = "loja" | "sempre" | "dias";

export function PrecoEAcesso({ ficha, podeEditar, aoMudar }: { ficha: Ficha; podeEditar: boolean; aoMudar: (ficha: Ficha) => void }) {
  const prazo: PrazoDoCurso = ficha.config.acesso === null ? "loja" : ficha.config.acesso.prazoDias === null ? "sempre" : "dias";
  const mudarConfig = (parte: Partial<ConfigDigital>) => aoMudar({ ...ficha, config: { ...ficha.config, ...parte } });
  return (
    <FolhaDeAjustes>
      <SecaoDeAjustes id="cv-preco" Icone={Gift} titulo="Preço e acesso" texto="Pagamento único, à vista no Pix ou no cartão. Com preço zero, o conteúdo vira grátis e pede só o contato.">
        <LinhaDeAjuste titulo="Preço">
          <div className="max-w-[220px]">
            <EntradaDecimal
              aria-label="Preço"
              casas={2}
              valor={ficha.preco}
              disabled={!podeEditar}
              aoMudar={(n) => aoMudar({ ...ficha, preco: Math.max(0, Math.round((n || 0) * 100) / 100) })}
              icon={<span className="text-sm font-semibold text-[var(--ks-color-text-muted)]">R$</span>}
            />
          </div>
        </LinhaDeAjuste>
        <LinhaDeAjuste titulo="Por quanto tempo o cliente acessa">
          <EscolhaDeAjuste
            rotulo="Prazo de acesso"
            valor={prazo}
            aoEscolher={(valor) => {
              if (!podeEditar) return;
              if (valor === "loja") mudarConfig({ acesso: null });
              else if (valor === "sempre") mudarConfig({ acesso: { prazoDias: null } });
              else mudarConfig({ acesso: { prazoDias: ficha.config.acesso?.prazoDias ?? 365 } });
            }}
            opcoes={[
              { valor: "loja", titulo: "Igual às configurações da loja", texto: "Segue o prazo de Configurações." },
              { valor: "sempre", titulo: "Para sempre", texto: "O cliente volta quando quiser, sem prazo." },
              { valor: "dias", titulo: "Um prazo em dias", texto: "Depois disso, o acesso fecha sozinho." },
            ]}
          />
          {prazo === "dias" ? (
            <div className="mt-2 max-w-[220px]">
              <EntradaDecimal
                aria-label="Dias de acesso"
                casas={0}
                valor={ficha.config.acesso?.prazoDias ?? 365}
                disabled={!podeEditar}
                aoMudar={(n) => mudarConfig({ acesso: { prazoDias: Math.max(1, Math.min(3650, Math.round(n || 1))) } })}
                suffix="dias"
              />
            </div>
          ) : null}
        </LinhaDeAjuste>
        <LinhaDeAjuste titulo="Pré-venda" texto="Vende hoje e abre o conteúdo para todos no dia marcado, com e-mail para quem comprou.">
          <EscolhaDeAjuste
            rotulo="Pré-venda"
            valor={ficha.config.preVenda ? "data" : "nao"}
            aoEscolher={(valor) => {
              if (!podeEditar) return;
              mudarConfig({ preVenda: valor === "nao" ? null : ficha.config.preVenda ?? { em: `${diaDeAmanha()}T03:00:00.000Z` } });
            }}
            opcoes={[
              { valor: "nao", titulo: "Desligada", texto: "Quem compra começa na hora." },
              { valor: "data", titulo: "O conteúdo abre numa data", texto: "Todo mundo começa junto: o acesso abre sozinho no dia." },
            ]}
          />
          {ficha.config.preVenda ? (
            <div className="mt-2 max-w-[220px]">
              <input
                type="date"
                aria-label="Dia em que o conteúdo abre"
                className="ks-field"
                value={new Date(ficha.config.preVenda.em).toLocaleDateString("en-CA", { timeZone: "America/Sao_Paulo" })}
                min={diaDeAmanha()}
                disabled={!podeEditar}
                onChange={(e) => {
                  if (/^\d{4}-\d{2}-\d{2}$/.test(e.target.value)) mudarConfig({ preVenda: { em: `${e.target.value}T03:00:00.000Z` } });
                }}
              />
            </div>
          ) : null}
        </LinhaDeAjuste>
      </SecaoDeAjustes>
    </FolhaDeAjustes>
  );
}

/* Amanhã, no calendário de Brasília (a pré-venda começa a valer a partir dele). */
function diaDeAmanha(): string {
  return new Date(Date.now() + 36 * 60 * 60 * 1000).toLocaleDateString("en-CA", { timeZone: "America/Sao_Paulo" });
}