"use client";

import { useEffect, useMemo, useState } from "react";
import { FileVideo, Loader2, Search, X } from "lucide-react";

import { pedirDigitais } from "@/components/digitais/comum";
import { SeloDoArquivo } from "@/components/digitais/selo-do-arquivo";

/*
 * Escolher um arquivo que já está na biblioteca (Arquivos e espaço): o vídeo
 * de uma aula, um material, a apresentação do curso.
 */

export type ArquivoDaBiblioteca = {
  id: string;
  nome: string;
  extensao: string;
  categoria: string;
  tamanhoLegivel: string;
  status: string;
  duracao: number | null;
};

export function EscolherDaBiblioteca({
  titulo,
  so,
  aoEscolher,
  aoFechar,
}: {
  titulo: string;
  /* Só uma categoria (ex.: "video"). */
  so?: string;
  aoEscolher: (arquivo: ArquivoDaBiblioteca) => void;
  aoFechar: () => void;
}) {
  const [arquivos, setArquivos] = useState<ArquivoDaBiblioteca[] | null>(null);
  const [erro, setErro] = useState<string | null>(null);
  const [busca, setBusca] = useState("");

  useEffect(() => {
    let cancelado = false;
    pedirDigitais<{ arquivos: ArquivoDaBiblioteca[] }>("/api/digitais/arquivos")
      .then((resposta) => {
        if (!cancelado) setArquivos(resposta.arquivos.filter((a) => a.status !== "recusado"));
      })
      .catch((e: unknown) => {
        if (!cancelado) setErro(e instanceof Error ? e.message : "Não foi possível abrir a biblioteca.");
      });
    return () => {
      cancelado = true;
    };
  }, []);

  useEffect(() => {
    const aoTeclar = (evento: KeyboardEvent) => {
      if (evento.key === "Escape") aoFechar();
    };
    window.addEventListener("keydown", aoTeclar);
    return () => window.removeEventListener("keydown", aoTeclar);
  }, [aoFechar]);

  const visiveis = useMemo(() => {
    const termo = busca.trim().toLowerCase();
    return (arquivos ?? []).filter((a) => (!so || a.categoria === so) && (!termo || a.nome.toLowerCase().includes(termo)));
  }, [arquivos, so, busca]);

  return (
    <div role="dialog" aria-modal="true" onClick={aoFechar} className="fixed inset-0 z-[120] flex items-center justify-center bg-[rgba(12,8,24,0.42)] p-4 backdrop-blur-[2px]">
      <div onClick={(e) => e.stopPropagation()} className="flex max-h-[80vh] w-[min(560px,100%)] flex-col overflow-hidden rounded-[18px] bg-white shadow-[0_24px_60px_rgba(26,26,43,0.28)]">
        <div className="flex items-center justify-between gap-3 border-b border-[var(--ks-color-border-subtle)] px-5 py-4">
          <h2 className="text-[16px] font-extrabold text-[var(--ks-color-text-primary)]">{titulo}</h2>
          <button type="button" onClick={aoFechar} aria-label="Fechar" className="rounded-lg p-1.5 text-[var(--ks-color-text-muted)] hover:bg-[var(--ks-color-bg-hover)]">
            <X size={18} />
          </button>
        </div>
        <div className="px-5 pt-4">
          <div className="relative">
            <Search size={15} className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--ks-color-text-soft)]" />
            <input
              value={busca}
              onChange={(e) => setBusca(e.target.value)}
              placeholder="Buscar pelo nome"
              className="h-10 w-full rounded-xl border border-[var(--ks-color-border-subtle)] pl-9 pr-3 text-sm outline-none focus:border-[var(--ks-brand-500)]"
            />
          </div>
        </div>
        <div className="min-h-[160px] flex-1 overflow-y-auto px-3 py-3">
          {erro ? (
            <p className="px-2 py-6 text-center text-sm text-[var(--ks-color-text-muted)]">{erro}</p>
          ) : arquivos === null ? (
            <div className="flex items-center justify-center gap-2 py-10 text-sm text-[var(--ks-color-text-muted)]">
              <Loader2 size={16} className="animate-spin" />
              Abrindo a biblioteca…
            </div>
          ) : visiveis.length === 0 ? (
            <div className="flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-[var(--ks-color-text-muted)]">
              <FileVideo size={22} />
              {so === "video" ? "Nenhum vídeo na biblioteca ainda. Envie pelo editor do conteúdo." : "Nada na biblioteca com esse nome."}
            </div>
          ) : (
            <ul>
              {visiveis.map((arquivo) => (
                <li key={arquivo.id}>
                  <button
                    type="button"
                    onClick={() => aoEscolher(arquivo)}
                    className="flex w-full items-center gap-3 rounded-xl px-2 py-2.5 text-left hover:bg-[var(--ks-color-bg-hover)]"
                  >
                    <SeloDoArquivo categoria={arquivo.categoria} texto={arquivo.extensao.toUpperCase().slice(0, 4)} />
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-sm font-semibold text-[var(--ks-color-text-primary)]">{arquivo.nome}</span>
                      <span className="block text-xs text-[var(--ks-color-text-muted)]">
                        {arquivo.tamanhoLegivel}
                        {arquivo.status !== "pronto" ? " · ainda enviando" : ""}
                      </span>
                    </span>
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
}