4ventures-client-portal/src/components/AssetsLibrary.tsx

'use client';

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import {
  CheckCircle2,
  Download,
  ExternalLink,
  FileText,
  FolderOpen,
  HardDrive,
  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;
};

type DriveFile = {
  id: string;
  name: string;
  mimeType?: string;
  bytes?: number | null;
  modifiedTime?: string;
  webViewLink?: 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('folder')) return 'DIR';
  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 [tab, setTab] = useState<'portal' | 'drive'>('portal');
  const [assets, setAssets] = useState<Asset[]>([]);
  const [driveFiles, setDriveFiles] = useState<DriveFile[]>([]);
  const [driveFolder, setDriveFolder] = useState<string | null>(null);
  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 loadPortal = useCallback(async () => {
    const res = await fetch('/api/assets');
    const data = await res.json();
    setAssets(data.assets || []);
    if (data.warning) setWarning(data.warning);
  }, []);

  const loadDrive = useCallback(async () => {
    const res = await fetch('/api/assets/drive');
    const data = await res.json();
    setDriveFiles(data.files || []);
    setDriveFolder(data.folderName || null);
    if (data.warning) setWarning(data.warning);
    else if (data.linked) setWarning(null);
  }, []);

  const load = useCallback(async () => {
    setLoading(true);
    setErr(null);
    if (tab === 'portal') await loadPortal();
    else await loadDrive();
    setLoading(false);
  }, [tab, loadPortal, loadDrive]);

  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(' · '));
    }
    setTab('portal');
    await loadPortal();
    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 openDrive(file: DriveFile) {
    if (file.webViewLink) {
      window.open(file.webViewLink, '_blank', 'noopener,noreferrer');
      return;
    }
    const res = await fetch(
      `/api/assets/drive?download=${encodeURIComponent(file.id)}`
    );
    const data = await res.json();
    if (!res.ok || !data.url) {
      setErr(data.error || 'No se pudo abrir en Drive');
      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 loadPortal();
  }

  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>.
          Subidas al portal se copian a la carpeta Drive del cliente si está
          enlazada.
        </p>
      </div>

      <div className="flex gap-2">
        <button
          type="button"
          onClick={() => setTab('portal')}
          className={`text-xs px-3 py-1.5 rounded-lg border ${
            tab === 'portal'
              ? 'border-brand-500/40 text-brand-400'
              : 'border-gray-700 text-gray-400'
          }`}
        >
          Portal
        </button>
        <button
          type="button"
          onClick={() => setTab('drive')}
          className={`inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border ${
            tab === 'drive'
              ? 'border-brand-500/40 text-brand-400'
              : 'border-gray-700 text-gray-400'
          }`}
        >
          <HardDrive className="w-3.5 h-3.5" />
          Google Drive
          {driveFolder ? ` · ${driveFolder}` : ''}
        </button>
      </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>}

      {tab === 'portal' && (
        <>
          <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
                {...{ webkitdirectory: '', directory: '' }}
                onChange={(e) => {
                  if (e.target.files?.length) {
                    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">
              Se guarda en portal y se refleja en Drive si el cliente está
              enlazado
            </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>
          )}
        </>
      )}

      {tab === 'drive' && (
        <>
          {loading ? (
            <p className="text-sm text-gray-500">Cargando Drive…</p>
          ) : driveFiles.length === 0 ? (
            <div className="bg-[#111827] border border-gray-800 rounded-xl p-12 text-center text-gray-400">
              <HardDrive className="w-10 h-10 text-gray-600 mx-auto mb-3" />
              <p className="text-base font-medium text-gray-300">
                Sin archivos en Drive
              </p>
              <p className="text-xs text-gray-500 mt-2">
                Conecta marketing@ en Agencia y ejecuta auto-match por nombre.
              </p>
            </div>
          ) : (
            <ul className="space-y-2">
              {driveFiles.map((f) => (
                <li
                  key={f.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(f.mimeType)}
                  </span>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm text-white font-medium truncate">
                      {f.name}
                    </p>
                    <p className="text-[11px] text-gray-500">
                      {formatBytes(f.bytes)}
                      {f.modifiedTime
                        ? ` · ${new Date(f.modifiedTime).toLocaleString('es-ES')}`
                        : ''}
                    </p>
                  </div>
                  <button
                    type="button"
                    onClick={() => void openDrive(f)}
                    className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800"
                    title="Abrir en Drive"
                  >
                    <ExternalLink className="w-4 h-4" />
                  </button>
                </li>
              ))}
            </ul>
          )}
        </>
      )}
    </div>
  );
}