import { useEffect, useRef, useState } from "react";
import { useParams } from "wouter";
import { Star, Share2, Eye, ShoppingBag, Copy, Check } from "lucide-react";
import { trpc } from "../lib/trpc";
import { Cabecalho } from "../components/Cabecalho";
import { Rodape } from "../components/Rodape";

const CAPA_PLACEHOLDER = "/media/images/capas/capa-placeholder.svg";

function AvaliacaoEstrelas({ livroId, usuario }: { livroId: number; usuario: { id: number } | null | undefined }) {
  const utils = trpc.useUtils();
  const { data: livro } = trpc.biblioteca.getLivro.useQuery({ id: livroId });
  const { data: minhaNota } = trpc.avaliacoes.minha.useQuery({ livroId }, { enabled: !!usuario });
  const avaliar = trpc.avaliacoes.avaliar.useMutation({
    onSuccess: () => {
      utils.biblioteca.getLivro.invalidate({ id: livroId });
      utils.avaliacoes.minha.invalidate({ livroId });
    },
  });
  const [hover, setHover] = useState<number | null>(null);

  const notaExibida = hover ?? minhaNota ?? 0;

  return (
    <div className="flex flex-col items-center md:items-start gap-1 mb-3">
      <div className="flex gap-0.5">
        {[1, 2, 3, 4, 5].map((n) => (
          <button
            key={n}
            disabled={!usuario}
            aria-label={`avaliar com ${n} estrela${n > 1 ? "s" : ""}`}
            onMouseEnter={() => usuario && setHover(n)}
            onMouseLeave={() => setHover(null)}
            onClick={() => usuario && avaliar.mutate({ livroId, nota: n })}
            className={usuario ? "cursor-pointer" : "cursor-default"}
            style={{ background: "none", border: "none", padding: 2 }}
          >
            <Star
              size={20}
              fill={n <= notaExibida ? "var(--clr-dourado-400)" : "none"}
              style={{ color: "var(--clr-dourado-400)" }}
            />
          </button>
        ))}
      </div>
      {livro && livro.avaliacaoTotal > 0 && (
        <p className="text-xs" style={{ color: "rgba(245,230,200,0.55)" }}>
          {livro.avaliacaoMedia?.toFixed(1)} de 5 · {livro.avaliacaoTotal} avaliaç{livro.avaliacaoTotal > 1 ? "ões" : "ão"}
        </p>
      )}
      {!usuario && <p className="text-xs" style={{ color: "rgba(245,230,200,0.4)" }}>entre pra avaliar</p>}
    </div>
  );
}

function BotaoCompartilhar({ livroId, usuario }: { livroId: number; usuario: { id: number } | null | undefined }) {
  const [aberto, setAberto] = useState(false);
  const [copiado, setCopiado] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function aoClicarFora(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) setAberto(false);
    }
    document.addEventListener("mousedown", aoClicarFora);
    return () => document.removeEventListener("mousedown", aoClicarFora);
  }, []);

  const url = `${window.location.origin}/share/livro/${livroId}${usuario ? `?ref=${usuario.id}` : ""}`;
  const mensagem = "Olha esse livro que encontrei na Biblioteca OnFide:";

  function copiarLink() {
    navigator.clipboard.writeText(url).then(() => {
      setCopiado(true);
      setTimeout(() => setCopiado(false), 2000);
    });
  }

  return (
    <div className="relative" ref={ref}>
      <button
        onClick={() => setAberto((v) => !v)}
        className="flex items-center gap-2 text-sm rounded-full px-4 py-2 transition-colors hover:bg-[var(--clr-dourado-alpha12)]"
        style={{ border: "1px solid var(--clr-dourado-alpha25)", color: "var(--clr-dourado-400)" }}
      >
        <Share2 size={15} /> compartilhar
      </button>

      {aberto && (
        <div
          className="absolute z-20 top-full mt-2 left-1/2 -translate-x-1/2 md:left-0 md:translate-x-0 rounded-lg p-3 flex flex-col gap-1 shadow-2xl"
          style={{ background: "var(--clr-marrom-900)", border: "1px solid var(--clr-dourado-alpha25)", minWidth: 220 }}
        >
          <a
            href={`https://wa.me/?text=${encodeURIComponent(`${mensagem} ${url}`)}`}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 text-sm px-3 py-2 rounded transition-colors hover:bg-[var(--clr-dourado-alpha12)]"
            style={{ color: "var(--clr-off-white)" }}
          >
            WhatsApp
          </a>
          <a
            href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 text-sm px-3 py-2 rounded transition-colors hover:bg-[var(--clr-dourado-alpha12)]"
            style={{ color: "var(--clr-off-white)" }}
          >
            Facebook
          </a>
          <a
            href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(mensagem)}&url=${encodeURIComponent(url)}`}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 text-sm px-3 py-2 rounded transition-colors hover:bg-[var(--clr-dourado-alpha12)]"
            style={{ color: "var(--clr-off-white)" }}
          >
            X / Twitter
          </a>
          <button
            onClick={copiarLink}
            className="flex items-center gap-2 text-sm px-3 py-2 rounded transition-colors hover:bg-[var(--clr-dourado-alpha12)] text-left"
            style={{ color: "var(--clr-off-white)" }}
          >
            {copiado ? <Check size={15} style={{ color: "var(--clr-dourado-400)" }} /> : <Copy size={15} />}
            {copiado ? "link copiado!" : "copiar link"}
          </button>
        </div>
      )}
    </div>
  );
}

export function Livro() {
  const { id } = useParams<{ id: string }>();
  const livroId = Number(id);

  const { data: livro, isLoading } = trpc.biblioteca.getLivro.useQuery({ id: livroId });
  const { data: usuario } = trpc.auth.me.useQuery();
  const { data: favoritoStatus } = trpc.biblioteca.favoritos.status.useQuery(
    { livroId },
    { enabled: !!usuario && !Number.isNaN(livroId) },
  );
  const utils = trpc.useUtils();
  const alternarFavorito = trpc.biblioteca.favoritos.alternar.useMutation({
    onSuccess: () => utils.biblioteca.favoritos.status.invalidate({ livroId }),
  });
  const registrarAcesso = trpc.registrarAcesso.useMutation();

  // Conta o acesso uma vez por visita à ficha — o backend deduz
  // repetições da mesma pessoa/IP dentro de uma janela de tempo.
  useEffect(() => {
    if (!Number.isNaN(livroId)) registrarAcesso.mutate({ livroId });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [livroId]);

  if (isLoading) {
    return (
      <main style={{ minHeight: "100dvh", background: "var(--gradient-hero-dourado)", color: "var(--color-text-on-dark)", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <p style={{ fontSize: "0.875rem", color: "var(--color-text-on-dark-muted)" }}>carregando...</p>
      </main>
    );
  }

  if (!livro) {
    return (
      <main className="min-h-dvh flex flex-col" style={{ background: "var(--gradient-hero-dourado)", color: "var(--color-text-on-dark)" }}>
        <Cabecalho />
        <div className="flex-1 flex flex-col items-center justify-center gap-4">
          <p style={{ fontSize: "0.9rem", color: "var(--color-text-on-dark-muted)" }}>livro não encontrado.</p>
          <a href="/" className="btn btn-ghost" style={{ padding: "0.5rem 1.25rem" }}>voltar pra Home</a>
        </div>
        <Rodape />
      </main>
    );
  }

  return (
    <main className="min-h-dvh flex flex-col" style={{ background: "var(--gradient-hero-dourado)", color: "var(--color-text-on-dark)" }}>
      <Cabecalho />

      {/* Mobile: empilhado e centralizado. Desktop (md+): capa à esquerda, conteúdo à direita, alinhado à esquerda. */}
      <div className="max-w-4xl mx-auto px-5 pt-10 pb-16 flex-1 w-full flex flex-col md:flex-row items-center md:items-start gap-8 md:gap-10 text-center md:text-left">
        <div className="relative flex-shrink-0">
          <img
            src={livro.capaUrl || CAPA_PLACEHOLDER}
            alt={livro.titulo}
            style={{ width: 220, aspectRatio: "2 / 3", objectFit: "cover", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-dourado-md)" }}
          />
          {usuario && (
            <button
              aria-label="favoritar"
              onClick={() => alternarFavorito.mutate({ livroId })}
              className="absolute -top-2 -right-2 w-10 h-10 rounded-full flex items-center justify-center"
              style={{ background: "var(--clr-marrom-900)", border: "1px solid var(--clr-dourado-alpha25)", color: favoritoStatus?.favorito ? "var(--clr-dourado-400)" : "var(--color-text-on-dark-subtle)" }}
            >
              {favoritoStatus?.favorito ? "★" : "☆"}
            </button>
          )}
        </div>

        <div className="flex flex-col items-center md:items-start max-w-lg">
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "1.75rem", fontWeight: 600, color: "var(--clr-off-white)", marginBottom: "0.4rem" }}>
            {livro.titulo}
          </h1>
          {livro.subtitulo && (
            <p style={{ fontSize: "1rem", color: "var(--color-text-on-dark-muted)", marginBottom: "0.6rem" }}>{livro.subtitulo}</p>
          )}

          <p style={{ fontSize: "0.9rem", color: "var(--color-text-on-dark-muted)", marginBottom: "0.3rem" }}>{livro.autor}</p>

          {/* Avaliação por estrelas — logo abaixo da capa/autor, na apresentação, não dentro do leitor. */}
          <AvaliacaoEstrelas livroId={livroId} usuario={usuario} />

          <div className="flex items-center gap-1 mb-3 text-xs" style={{ color: "rgba(245,230,200,0.45)" }}>
            <Eye size={13} />
            {livro.contagemAcessos} acesso{livro.contagemAcessos !== 1 ? "s" : ""}
          </div>

          {livro.serie && (
            <a
              href={`/serie/${encodeURIComponent(livro.serie)}`}
              className="inline-block transition-opacity hover:opacity-80"
              style={{
                marginTop: "0.4rem",
                marginBottom: "1.25rem",
                fontSize: "0.75rem",
                padding: "0.35rem 0.9rem",
                borderRadius: "var(--radius-full)",
                border: "1px solid var(--clr-dourado-alpha25)",
                color: "var(--clr-dourado-400)",
              }}
            >
              {livro.serie}
              {livro.volumeNumero ? ` · volume ${livro.volumeNumero}` : ""}
            </a>
          )}

          {/* Sinopse — obrigatória na apresentação do livro (gerada automaticamente
              no upload quando o editor não escreve uma manualmente). */}
          {livro.resumo && (
            <p style={{ fontSize: "0.95rem", lineHeight: "var(--leading-relaxed)", color: "rgba(245,230,200,0.8)", marginBottom: "1.75rem" }}>
              {livro.resumo}
            </p>
          )}

          <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto mb-4">
            {livro.epubUrl ? (
              <a href={`/leitor/${livro.id}`} className="btn btn-primary text-center" style={{ padding: "0.75rem 2.5rem" }}>
                ler agora
              </a>
            ) : (
              <p style={{ fontSize: "0.8rem", color: "var(--color-text-on-dark-subtle)" }}>este livro ainda não tem um arquivo de leitura disponível.</p>
            )}

            {/* Gancho pro futuro — só leitura online funciona por enquanto. */}
            <button
              disabled
              title="em breve"
              className="text-center cursor-not-allowed"
              style={{
                padding: "0.75rem 2rem",
                borderRadius: "var(--radius-full)",
                border: "1px solid var(--clr-dourado-alpha25)",
                color: "rgba(245,230,200,0.35)",
                fontSize: "0.9rem",
              }}
            >
              baixar PDF · em breve
            </button>
          </div>

          <div className="flex flex-wrap items-center gap-3">
            <BotaoCompartilhar livroId={livroId} usuario={usuario} />

            {livro.linkCompraImpresso && (
              <a
                href={livro.linkCompraImpresso}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 text-sm rounded-full px-4 py-2 transition-colors"
                style={{ background: "var(--clr-dourado-400)", color: "var(--clr-marrom-950)" }}
              >
                <ShoppingBag size={15} /> comprar impresso
              </a>
            )}
          </div>
        </div>
      </div>

      <Rodape />
    </main>
  );
}
