'use client';

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import {
  CheckCircle2,
  Download,
  FileText,
  FolderOpen,
  Loader2,
  Trash2,
  Upload,
} from 'lucide-react';

type Asset = {
  id: string;
  title: string;
  folder?: string;
  file_name: string;
  mime_type?: string | null;
  bytes?: number | null;
  created_at?: string;
};

function formatBytes(n?: number | null) {
  if (!n) return '—';
  if (n < 1024) return `${n} B`;
  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
}

function iconHint(mime?: string | null) {
  if (!mime) return 'FILE';
  if (mime.startsWith('image/')) return 'IMG';
  if (mime.includes('pdf')) return 'PDF';
  if (mime.includes('sheet') || mime.includes('csv') || mime.includes('excel'))
    return 'XLS';
  if (mime.includes('zip') || mime.includes('rar')) return 'ZIP';
  return 'FILE';
}

export default function AssetsLibrary({ tenantLabel }: { tenantLabel: string }) {
  const [assets, setAssets] = useState<Asset[]>([]);
  const [warning, setWarning] = useState<string | null>(null);
  const [folder, setFolder] = useState('');
  const [loading, setLoading] = useState(true);
  const [uploading, setUploading] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [drag, setDrag] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    const res = await fetch('/api/assets');
    const data = await res.json();
    setAssets(data.assets || []);
    setWarning(data.warning || null);
    setLoading(false);
  }, []);

  useEffect(() => {
    void load();
  }, [load]);

  const folders = useMemo(() => {
    const s = new Set<string>();
    for (const a of assets) {
      if (a.folder) s.add(a.folder);
    }
    return [...s].sort();
  }, [assets]);

  const visible = useMemo(() => {
    if (!folder) return assets;
    return assets.filter((a) => (a.folder || '') === folder);
  }, [assets, folder]);

  async function uploadFiles(fileList: FileList | File[]) {
    const files = [...fileList];
    if (!files.length) return;
    setUploading(true);
    setErr(null);
    const fd = new FormData();
    fd.set('folder', folder);
    for (const f of files) fd.append('files', f);
    const res = await fetch('/api/assets', { method: 'POST', body: fd });
    const data = await res.json();
    if (!res.ok) {
      setErr(
        data.error ||
          (data.errors || []).join(' · ') ||
          'Error al subir'
      );
    } else if (data.errors?.length) {
      setErr(data.errors.join(' · '));
    }
    await load();
    setUploading(false);
  }

  async function download(id: string) {
    const res = await fetch(`/api/assets/download?id=${encodeURIComponent(id)}`);
    const data = await res.json();
    if (!res.ok || !data.url) {
      setErr(data.error || 'No se pudo descargar');
      return;
    }
    window.open(data.url, '_blank', 'noopener,noreferrer');
  }

  async function remove(id: string) {
    if (!confirm('¿Eliminar este archivo de la biblioteca?')) return;
    const res = await fetch(`/api/assets?id=${encodeURIComponent(id)}`, {
      method: 'DELETE',
    });
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      setErr(data.error || 'No se pudo borrar');
    }
    await load();
  }

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold tracking-tight text-white">
          Biblioteca de activos
        </h2>
        <p className="text-sm text-gray-400 mt-1 max-w-2xl">
          Archivo oficial de <strong className="text-gray-300">{tenantLabel}</strong>:
          sube PDF, Excel, CSV, imágenes, ZIP u otros archivos ya validados.
          Opcional: carpeta lógica (p. ej. <code>briefs/2026</code>).
        </p>
      </div>

      {warning && (
        <p className="text-xs text-amber-400 border border-amber-500/20 rounded-lg px-3 py-2">
          {warning}
        </p>
      )}
      {err && <p className="text-xs text-red-400">{err}</p>}

      <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-end">
        <div className="flex-1">
          <label className="text-[11px] uppercase text-gray-500">Carpeta</label>
          <input
            className="mt-1 w-full rounded-lg bg-gray-900 border border-gray-700 px-3 py-2 text-sm text-white"
            placeholder="ej. creatividades/meta o vacío = raíz"
            value={folder}
            onChange={(e) => setFolder(e.target.value)}
            list="asset-folders"
          />
          <datalist id="asset-folders">
            {folders.map((f) => (
              <option key={f} value={f} />
            ))}
          </datalist>
        </div>
        <label className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500/90 hover:bg-brand-500 px-4 py-2.5 text-sm font-medium text-white cursor-pointer">
          {uploading ? (
            <Loader2 className="w-4 h-4 animate-spin" />
          ) : (
            <Upload className="w-4 h-4" />
          )}
          Subir archivos
          <input
            type="file"
            className="hidden"
            multiple
            onChange={(e) => {
              if (e.target.files) void uploadFiles(e.target.files);
              e.target.value = '';
            }}
          />
        </label>
        <label className="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-700 px-4 py-2.5 text-sm text-gray-300 hover:text-white cursor-pointer">
          Subir carpeta
          <input
            type="file"
            className="hidden"
            multiple
            // Folder picker (Chromium/Safari)
            {...{ webkitdirectory: '', directory: '' }}
            onChange={(e) => {
              if (e.target.files?.length) {
                // Use first file relative path as folder hint if empty
                const rel =
                  (e.target.files[0] as File & { webkitRelativePath?: string })
                    .webkitRelativePath || '';
                const top = rel.split('/')[0];
                if (top && !folder) setFolder(top);
                void uploadFiles(e.target.files);
              }
              e.target.value = '';
            }}
          />
        </label>
      </div>

      <div
        onDragEnter={(e) => {
          e.preventDefault();
          setDrag(true);
        }}
        onDragOver={(e) => e.preventDefault()}
        onDragLeave={() => setDrag(false)}
        onDrop={(e) => {
          e.preventDefault();
          setDrag(false);
          if (e.dataTransfer.files?.length) {
            void uploadFiles(e.dataTransfer.files);
          }
        }}
        className={`rounded-xl border border-dashed px-6 py-10 text-center transition-colors ${
          drag
            ? 'border-brand-500 bg-brand-500/10'
            : 'border-gray-700 bg-[#111827]'
        }`}
      >
        <FolderOpen className="w-8 h-8 text-gray-600 mx-auto mb-2" />
        <p className="text-sm text-gray-300">
          Arrastra aquí cualquier archivo (máx. 80 MB c/u)
        </p>
        <p className="text-[11px] text-gray-500 mt-1">
          PDF · Excel · CSV · imágenes · ZIP · vídeo · etc.
        </p>
      </div>

      {folders.length > 0 && (
        <div className="flex flex-wrap gap-2">
          <button
            type="button"
            onClick={() => setFolder('')}
            className={`text-[11px] px-2.5 py-1 rounded-md border ${
              !folder
                ? 'border-brand-500/40 text-brand-400'
                : 'border-gray-700 text-gray-400'
            }`}
          >
            Todas
          </button>
          {folders.map((f) => (
            <button
              key={f}
              type="button"
              onClick={() => setFolder(f)}
              className={`text-[11px] px-2.5 py-1 rounded-md border ${
                folder === f
                  ? 'border-brand-500/40 text-brand-400'
                  : 'border-gray-700 text-gray-400'
              }`}
            >
              {f}
            </button>
          ))}
        </div>
      )}

      {loading ? (
        <p className="text-sm text-gray-500">Cargando…</p>
      ) : visible.length === 0 ? (
        <div className="bg-[#111827] border border-gray-800 rounded-xl p-12 text-center text-gray-400">
          <FileText className="w-10 h-10 text-gray-600 mx-auto mb-3" />
          <p className="text-base font-medium text-gray-300">
            Sin archivos en esta vista
          </p>
        </div>
      ) : (
        <ul className="space-y-2">
          {visible.map((a) => (
            <li
              key={a.id}
              className="flex items-center gap-3 rounded-xl border border-gray-800 bg-[#111827] px-4 py-3"
            >
              <span className="text-[10px] font-bold tracking-wider text-gray-500 w-10">
                {iconHint(a.mime_type)}
              </span>
              <div className="flex-1 min-w-0">
                <p className="text-sm text-white font-medium truncate">
                  {a.file_name}
                </p>
                <p className="text-[11px] text-gray-500">
                  {a.folder ? `${a.folder}/` : ''}
                  {formatBytes(a.bytes)}
                  {a.created_at
                    ? ` · ${new Date(a.created_at).toLocaleString('es-ES')}`
                    : ''}
                </p>
              </div>
              <span className="hidden sm:inline-flex items-center gap-1 text-[10px] text-emerald-400">
                <CheckCircle2 className="w-3 h-3" /> Validado
              </span>
              <button
                type="button"
                onClick={() => download(a.id)}
                className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800"
                title="Descargar"
              >
                <Download className="w-4 h-4" />
              </button>
              <button
                type="button"
                onClick={() => remove(a.id)}
                className="p-2 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-500/10"
                title="Eliminar"
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}