"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { Check, Copy, Loader2, Plus, Radio, Sparkles, Store, Users, Video, X } 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 { pessoasDoGratis, semLimiteDePessoas } from "@/lib/live/sala";
import type { LiveNaTela, SaldoDeLives } from "@/lib/live/servidor/lives";

type Resposta = { podeEditar: boolean; saldo: SaldoDeLives; lives: LiveNaTela[] };

const SITUACAO: Record<LiveNaTela["situacao"], { rotulo: string; classe: string }> = {
  agendada: { rotulo: "Agendada", classe: "bg-[var(--ks-brand-50)] text-[var(--ks-brand-700)]" },
  hoje: { rotulo: "É hoje", classe: "bg-[color:rgba(255,45,70,0.12)] text-[#d61f38]" },
  ao_vivo: { rotulo: "Ao vivo", classe: "bg-[#ff2d46] text-white" },
  encerrada: { rotulo: "Aconteceu", classe: "bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-muted)]" },
  cancelada: { rotulo: "Cancelada", classe: "bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-soft)] line-through" },
  passou: { rotulo: "Não aconteceu", classe: "bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-muted)]" },
};

const ACESSO: Record<LiveNaTela["acesso"], string> = { paga: "Paga", cadastro: "Grátis com cadastro", aberta: "Aberta" };

export function quandoCurto(iso: string) {
  try {
    return new Intl.DateTimeFormat("pt-BR", { weekday: "short", day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit", timeZone: "America/Sao_Paulo" }).format(
      new Date(iso),
    );
  } catch {
    return iso;
  }
}

/* O que a empresa ainda pode transmitir neste mês (grátis e pacotes). */
export function FaixaDoSaldo({ saldo }: { saldo: SaldoDeLives }) {
  const restantesDosPacotes = saldo.pacotes.reduce((soma, p) => soma + p.restantes, 0);
  const maiorPacote = saldo.pacotes.reduce((maior, p) => Math.max(maior, p.pessoas), 0);
  return (
    <section className="flex flex-col gap-4 overflow-hidden rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] p-5 shadow-[var(--ks-shadow-subtle)] sm:flex-row sm:items-center sm:justify-between">
      <div className="flex min-w-0 items-center gap-4">
        <span
          className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl text-white"
          style={{ background: "linear-gradient(135deg, #FF2D46 0%, #C2185B 100%)", boxShadow: "0 10px 24px rgba(255, 45, 70, 0.28)" }}
        >
          <Radio size={22} />
        </span>
        <div className="min-w-0">
          <p className="text-[11px] font-bold uppercase tracking-[0.12em] text-[var(--ks-color-text-soft)]">KtaloguLive · este mês</p>
          <p className="mt-0.5 text-sm font-semibold text-[var(--ks-color-text-primary)]">
            {saldo.ilimitado
              ? `Transmissões sem limite · ${pessoasDoGratis(saldo)}${semLimiteDePessoas(saldo) ? "" : " cada"}`
              : `${saldo.gratis_restantes} de ${saldo.gratis_por_mes} transmissões grátis sobrando · ${pessoasDoGratis(saldo)} cada`}
            {restantesDosPacotes ? ` · ${restantesDosPacotes} ${restantesDosPacotes === 1 ? "live" : "lives"} de pacote (até ${maiorPacote} pessoas)` : ""}
          </p>
          <p className="mt-0.5 text-xs text-[var(--ks-color-text-muted)]">A vaga só é gasta quando a transmissão começa. Voltar à mesma sala não gasta outra.</p>
        </div>
      </div>
      <Link href="/dashboard/assinatura?aba=digitais" className="ks-button ks-button-soft shrink-0">
        <Sparkles size={16} />
        Mais lives e pessoas
      </Link>
    </section>
  );
}

/* Copiar com o plano B do navegador antigo (ou da janela embutida). */
export async function copiarTexto(texto: string): Promise<boolean> {
  try {
    await navigator.clipboard.writeText(texto);
    return true;
  } catch {
    const campo = document.createElement("textarea");
    campo.value = texto;
    campo.style.position = "fixed";
    campo.style.opacity = "0";
    document.body.appendChild(campo);
    campo.select();
    const ok = document.execCommand("copy");
    campo.remove();
    return ok;
  }
}

function BotaoDeCopiar({ link }: { link: string }) {
  const [copiado, setCopiado] = useState(false);
  return (
    <button
      type="button"
      className="ks-button ks-button-soft"
      title={link}
      onClick={() =>
        void copiarTexto(link).then((ok) => {
          setCopiado(ok);
          setTimeout(() => setCopiado(false), 1800);
        })
      }
    >
      {copiado ? <Check size={15} /> : <Copy size={15} />}
      {copiado ? "Copiado" : "Copiar link"}
    </button>
  );
}

/* "Nova transmissão": primeiro a categoria, porque ela decide se aparece na loja. */
function EscolhaDaCategoria({
  aoFechar,
  aoComecarAgora,
  comecando,
  semSaldo,
}: {
  aoFechar: () => void;
  aoComecarAgora: () => void;
  comecando: boolean;
  semSaldo: boolean;
}) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" role="dialog" aria-modal="true" aria-labelledby="nova-transmissao">
      <div className="w-full max-w-lg rounded-2xl bg-white p-5 shadow-[0_30px_80px_-30px_rgba(0,0,0,0.4)]">
        <div className="flex items-start justify-between gap-3">
          <div>
            <h2 id="nova-transmissao" className="text-lg font-extrabold text-[var(--ks-color-text-primary)]">
              Nova transmissão
            </h2>
            <p className="mt-0.5 text-sm text-[var(--ks-color-text-muted)]">Qual é o tipo? Isso decide se ela aparece na loja.</p>
          </div>
          <button type="button" className="ks-button ks-button-soft" onClick={aoFechar} aria-label="Fechar">
            <X size={15} />
          </button>
        </div>
        {semSaldo ? (
          <p className="mt-4 rounded-xl bg-[color:rgba(255,45,70,0.08)] px-3 py-2.5 text-xs leading-5 text-[var(--ks-color-text-primary)]">
            <b>As transmissões deste mês acabaram.</b> Dá para agendar, mas ela só começa com uma vaga.{" "}
            <Link href="/dashboard/assinatura?aba=digitais" className="font-bold text-[var(--ks-brand-700)] underline">
              Comprar mais
            </Link>
          </p>
        ) : null}
        <ul className="mt-4">
          <li className={`py-3 ${FIO_DA_LINHA}`}>
            <Link href="/dashboard/digitais/lives/nova" className="flex items-start gap-3 rounded-xl p-2 hover:bg-[var(--ks-color-bg-hover)]">
              <Store size={20} className="mt-0.5 shrink-0 text-[var(--ks-brand-600)]" />
              <span>
                <span className="block text-sm font-bold text-[var(--ks-color-text-primary)]">Venda na loja virtual</span>
                <span className="block text-xs leading-5 text-[var(--ks-color-text-muted)]">
                  Aparece na loja com página própria: paga, grátis com cadastro ou aberta. Dá para soltar cupons e passar produtos na tela (liveshop).
                </span>
              </span>
            </Link>
          </li>
          <li className={`py-3 ${FIO_DA_LINHA}`}>
            <div className="flex items-start gap-3 p-2">
              <Video size={20} className="mt-0.5 shrink-0 text-[var(--ks-brand-600)]" />
              <span className="min-w-0 flex-1">
                <span className="block text-sm font-bold text-[var(--ks-color-text-primary)]">Reunião</span>
                <span className="block text-xs leading-5 text-[var(--ks-color-text-muted)]">
                  Com fornecedores, clientes ou a equipe. Não aparece na loja: quem tem o link entra com o nome e todo mundo pode falar, abrir a câmera e mostrar a tela.
                </span>
                <span className="mt-3 flex flex-wrap gap-2">
                  <button type="button" className="ks-button ks-button-primary" onClick={aoComecarAgora} disabled={comecando || semSaldo}>
                    {comecando ? <Loader2 size={15} className="animate-spin" /> : <Radio size={15} />}
                    Começar agora
                  </button>
                  <Link href="/dashboard/digitais/lives/nova?categoria=reuniao" className="ks-button ks-button-soft">
                    Agendar e pegar o link
                  </Link>
                </span>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  );
}

export default function ListaDeLives() {
  const [dados, setDados] = useState<Resposta | null>(null);
  const [erro, setErro] = useState<Error | null>(null);
  const [aviso, setAviso] = useState<string | null>(null);
  const [abrindo, setAbrindo] = useState<string | null>(null);
  const [escolhendo, setEscolhendo] = useState(false);

  const carregar = useCallback(
    () =>
      pedirDigitais<Resposta>("/api/digitais/lives")
        .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 entrarAoVivo = async (id: string) => {
    setAbrindo(id);
    setAviso(null);
    /* A aba abre já no clique (o navegador bloqueia janela aberta depois de esperar). */
    const janela = window.open("about:blank", "_blank");
    try {
      const { link } = await pedirDigitais<{ link: string }>(`/api/digitais/lives/${id}/apresentar`, { method: "POST" });
      if (janela) janela.location.href = link;
      else window.location.href = link;
    } catch (e) {
      janela?.close();
      setAviso(e instanceof Error ? e.message : "Não foi possível abrir a sala.");
    } finally {
      setAbrindo(null);
    }
  };

  /* Reunião instantânea: cria com a hora de agora e abre a sala na hora, como no Meet. */
  const comecarReuniaoAgora = async () => {
    setAbrindo("agora");
    setAviso(null);
    const janela = window.open("about:blank", "_blank");
    try {
      const hora = new Intl.DateTimeFormat("pt-BR", { hour: "2-digit", minute: "2-digit", timeZone: "America/Sao_Paulo" }).format(new Date());
      const r = await pedirDigitais<{ id: string; apresentar: string | null }>("/api/digitais/lives", {
        method: "POST",
        body: JSON.stringify({ categoria: "reuniao", agora: true, titulo: `Reunião das ${hora}`, duracaoMin: 60, gravar: false }),
      });
      if (r.apresentar && janela) janela.location.href = r.apresentar;
      else janela?.close();
      setEscolhendo(false);
      await carregar();
    } catch (e) {
      janela?.close();
      setAviso(e instanceof Error ? e.message : "Não foi possível começar a reunião.");
    } finally {
      setAbrindo(null);
    }
  };

  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="Lives e reuniões"
        subtitle="Transmissões ao vivo para vender na loja virtual, lives de venda e reuniões com fornecedores e clientes. Bate-papo, tela compartilhada, caneta para destacar e gravação, tudo dentro do Ktalogu."
        actions={
          dados.podeEditar ? (
            <button type="button" className="ks-button ks-button-primary" onClick={() => setEscolhendo(true)}>
              <Plus size={16} />
              Nova transmissão
            </button>
          ) : null
        }
      />

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

      <FaixaDoSaldo saldo={dados.saldo} />

      {escolhendo ? <EscolhaDaCategoria
          aoFechar={() => setEscolhendo(false)}
          aoComecarAgora={() => void comecarReuniaoAgora()}
          comecando={abrindo === "agora"}
          semSaldo={dados.saldo.gratis_restantes <= 0 && !dados.saldo.pacotes.some((p) => p.restantes > 0)}
        /> : 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)_150px_110px_110px_auto] 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>Transmissão</span>
          <span>Quando</span>
          <span>Vagas</span>
          <span>Situação</span>
          <span />
        </div>
        {dados.lives.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)]">Nenhuma transmissão ainda.</p>
            <p className="max-w-md text-xs leading-5 text-[var(--ks-color-text-muted)]">
              Marque uma live de venda na loja ou uma reunião com o link pronto para mandar.
              {dados.saldo.ilimitado
                ? ` Sua empresa tem transmissões sem limite, ${semLimiteDePessoas(dados.saldo) ? "e sem limite de pessoas" : `com ${pessoasDoGratis(dados.saldo)}`}.`
                : ` Todo mês você tem ${dados.saldo.gratis_por_mes} transmissões grátis com ${pessoasDoGratis(dados.saldo)}.`}
            </p>
          </div>
        ) : (
          <ul className="px-2 sm:px-3">
            {dados.lives.map((live) => {
              const situacao = SITUACAO[live.situacao];
              const podeEntrar = dados.podeEditar && (live.situacao === "hoje" || live.situacao === "ao_vivo" || live.situacao === "agendada");
              return (
                <li key={live.id} className={`grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 rounded-xl px-2 py-3 lg:grid-cols-[minmax(0,1fr)_150px_110px_110px_auto] ${FIO_DA_LINHA}`}>
                  <Link href={`/dashboard/digitais/lives/${live.id}`} className="flex min-w-0 items-center gap-3 rounded-lg hover:opacity-90">
                    <CapaDoProduto tipo="live" imagem={live.capa} />
                    <span className="min-w-0">
                      <span className="block truncate text-sm font-bold text-[var(--ks-color-text-primary)]">{live.titulo}</span>
                      <span className="block truncate text-xs text-[var(--ks-color-text-muted)]">
                        {live.categoria === "reuniao" ? (
                          <>Reunião · {live.codigo}</>
                        ) : (
                          <>
                            Venda · {ACESSO[live.acesso]}
                            {live.acesso === "paga" ? ` · ${moeda(live.preco)}` : ""}
                            {live.vitrine ? " · liveshop" : ""}
                            {live.naLoja ? " · na loja" : " · fora da loja"}
                          </>
                        )}
                      </span>
                    </span>
                  </Link>
                  <span className="hidden text-sm font-semibold capitalize text-[var(--ks-color-text-secondary)] lg:block">{quandoCurto(live.comecaEm)}</span>
                  <span className="ks-num hidden items-center gap-1.5 text-sm font-bold text-[var(--ks-color-text-primary)] lg:flex">
                    <Users size={14} className="text-[var(--ks-color-text-soft)]" />
                    {live.acesso === "aberta" ? (live.picoPessoas ? `${live.picoPessoas} no pico` : live.categoria === "reuniao" ? "Pelo link" : "Aberta") : live.vagas}
                  </span>
                  <span>
                    <span className={`inline-block rounded-full px-2.5 py-1 text-xs font-bold ${situacao.classe}`}>{situacao.rotulo}</span>
                  </span>
                  <span className="col-span-2 flex flex-wrap justify-end gap-2 lg:col-span-1">
                    {live.link && (live.situacao === "agendada" || live.situacao === "hoje" || live.situacao === "ao_vivo") ? <BotaoDeCopiar link={live.link} /> : null}
                    {podeEntrar ? (
                      <button type="button" className="ks-button ks-button-primary" disabled={abrindo === live.id} onClick={() => void entrarAoVivo(live.id)}>
                        {abrindo === live.id ? <Loader2 size={15} className="animate-spin" /> : <Radio size={15} />}
                        {live.situacao === "ao_vivo" ? "Voltar à sala" : live.categoria === "reuniao" ? "Entrar" : "Entrar ao vivo"}
                      </button>
                    ) : (
                      <Link href={`/dashboard/digitais/lives/${live.id}`} className="ks-button ks-button-soft">
                        Ver
                      </Link>
                    )}
                  </span>
                </li>
              );
            })}
          </ul>
        )}
      </section>
    </div>
  );
}