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';
import { PageHeader } from '@/components/ui';

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

type Dual = {
  agency: boolean;
  client: boolean;
  both: boolean;
  label: 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 AssetImagePreview({ assetId, alt }: { assetId: string; alt: string }) {
  const [url, setUrl] = useState<string | null>(null);
  useEffect(() => {
    let cancelled = false;
    (async () => {
      const r = await fetch(`/api/assets/download?id=${encodeURIComponent(assetId)}`);
      const j = await r.json();
      if (!cancelled && r.ok && j.url) setUrl(j.url);
    })();
    return () => {
      cancelled = true;
    };
  }, [assetId]);
  if (!url) {
    return <p className="text-xs text-gray-500">Cargando preview…</p>;
  }
  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={url}
      alt={alt}
      className="w-full max-h-48 object-contain rounded-lg border border-gray-200 bg-gray-100"
    />
  );
}

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 [dualMap, setDualMap] = useState<Record<string, Dual>>({});
  const [detailId, setDetailId] = useState<string | null>(null);
  const [comments, setComments] = useState<
    { id: string; body: string; author_party: string; author_email?: string; created_at: string }[]
  >([]);
  const [commentText, setCommentText] = useState('');
  const [party, setParty] = useState<'agency' | 'client'>('client');
  const [collabBusy, setCollabBusy] = useState(false);

  const loadPortal = useCallback(async () => {
    const res = await fetch('/api/assets');
    const data = await res.json();
    const list: Asset[] = data.assets || [];
    setAssets(list);
    if (data.warning) setWarning(data.warning);
    if (list.length) {
      const ids = list.map((a) => a.id).join(',');
      const c = await fetch(`/api/assets/collab?ids=${ids}`);
      const cj = await c.json();
      if (c.ok) {
        setDualMap(cj.dual || {});
        if (cj.party) setParty(cj.party);
      }
    }
  }, []);

  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">
      <PageHeader
        eyebrow="Contenido"
        title="Activos"
        description={`Archivo oficial de ${tenantLabel}. Subidas al portal se copian a Drive si está enlazado.`}
      />

      <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-200 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-200 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-200 px-3 py-2 text-sm text-gray-900"
                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-200 px-4 py-2.5 text-sm text-gray-600 hover:text-gray-900 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-200 bg-white'
            }`}
          >
            <FolderOpen className="w-8 h-8 text-gray-600 mx-auto mb-2" />
            <p className="text-sm text-gray-600">
              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-200 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-200 text-gray-400'
                  }`}
                >
                  {f}
                </button>
              ))}
            </div>
          )}

          {loading ? (
            <p className="text-sm text-gray-500">Cargando…</p>
          ) : visible.length === 0 ? (
            <div className="bg-white border border-gray-200 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-600">
                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-200 bg-white 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-gray-900 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>
                  <button
                    type="button"
                    onClick={async () => {
                      setDetailId(a.id);
                      const r = await fetch(
                        `/api/assets/collab?ids=${a.id}&resourceId=${a.id}`
                      );
                      const j = await r.json();
                      if (r.ok) {
                        setComments(j.comments || []);
                        if (j.dual?.[a.id]) {
                          setDualMap((prev) => ({ ...prev, [a.id]: j.dual[a.id] }));
                        }
                      }
                    }}
                    className="hidden sm:inline-flex items-center gap-1 text-[10px] px-2 py-1 rounded border border-gray-200 text-gray-600 hover:text-gray-900"
                    title="Comentar / validar"
                  >
                    {dualMap[a.id]?.both ? (
                      <span className="text-emerald-400 inline-flex items-center gap-1">
                        <CheckCircle2 className="w-3 h-3" /> Doble OK
                      </span>
                    ) : (
                      <span className="text-amber-300">
                        {dualMap[a.id]?.label || 'En revisión'}
                      </span>
                    )}
                  </button>
                  <button
                    type="button"
                    onClick={() => download(a.id)}
                    className="p-2 rounded-lg text-gray-400 hover:text-gray-900 hover:bg-gray-50"
                    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-white border border-gray-200 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-600">
                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-200 bg-white 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-gray-900 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-gray-900 hover:bg-gray-50"
                    title="Abrir en Drive"
                  >
                    <ExternalLink className="w-4 h-4" />
                  </button>
                </li>
              ))}
            </ul>
          )}
        </>
      )}

      {detailId && (
        <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="w-full max-w-lg rounded-2xl border border-gray-200 bg-white overflow-hidden">
            <div className="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
              <div>
                <p className="text-sm font-semibold text-gray-900">
                  {assets.find((a) => a.id === detailId)?.file_name || 'Archivo'}
                </p>
                <p className="text-[11px] text-gray-500">
                  Doble check · {dualMap[detailId]?.label || 'En revisión'} · tú:{' '}
                  {party === 'agency' ? 'agencia' : 'cliente'}
                </p>
              </div>
              <button
                type="button"
                onClick={() => setDetailId(null)}
                className="text-xs text-gray-400 hover:text-gray-900"
              >
                Cerrar
              </button>
            </div>
            <div className="p-4 space-y-3 max-h-[60vh] overflow-y-auto">
              {(() => {
                const a = assets.find((x) => x.id === detailId);
                const isImg = a?.mime_type?.startsWith('image/');
                return isImg ? (
                  <AssetImagePreview assetId={detailId} alt={a?.file_name || ''} />
                ) : (
                  <p className="text-xs text-gray-500">
                    Preview disponible para imágenes. Usa descargar para el resto.
                  </p>
                );
              })()}
              <ul className="space-y-2">
                {comments.length === 0 && (
                  <li className="text-xs text-gray-500">Sin comentarios.</li>
                )}
                {comments.map((c) => (
                  <li
                    key={c.id}
                    className="text-xs border border-gray-200 rounded-lg px-2.5 py-2"
                  >
                    <p className="text-[10px] text-gray-500 mb-1">
                      {c.author_party === 'agency' ? 'Agencia' : 'Cliente'}
                      {c.author_email ? ` · ${c.author_email}` : ''}
                    </p>
                    <p className="text-gray-800 whitespace-pre-wrap">{c.body}</p>
                  </li>
                ))}
              </ul>
              <div className="flex gap-2">
                <input
                  value={commentText}
                  onChange={(e) => setCommentText(e.target.value)}
                  placeholder="Comentario…"
                  className="flex-1 rounded-lg bg-gray-900 border border-gray-200 px-3 py-2 text-xs text-gray-900"
                />
                <button
                  type="button"
                  disabled={collabBusy || !commentText.trim()}
                  onClick={async () => {
                    setCollabBusy(true);
                    try {
                      const r = await fetch('/api/assets/collab', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                          action: 'comment',
                          assetId: detailId,
                          body: commentText.trim(),
                        }),
                      });
                      const j = await r.json();
                      if (r.ok) {
                        setComments((prev) => [...prev, j.comment]);
                        setCommentText('');
                      }
                    } finally {
                      setCollabBusy(false);
                    }
                  }}
                  className="px-3 py-2 rounded-lg bg-sky-500/20 text-sky-300 border border-sky-500/30 text-xs"
                >
                  Enviar
                </button>
              </div>
            </div>
            <div className="px-4 py-3 border-t border-gray-200 flex justify-end gap-2">
              <button
                type="button"
                disabled={collabBusy}
                onClick={async () => {
                  const mine =
                    party === 'agency'
                      ? dualMap[detailId]?.agency
                      : dualMap[detailId]?.client;
                  setCollabBusy(true);
                  try {
                    const r = await fetch('/api/assets/collab', {
                      method: 'POST',
                      headers: { 'Content-Type': 'application/json' },
                      body: JSON.stringify({
                        action: mine ? 'revoke' : 'approve',
                        assetId: detailId,
                      }),
                    });
                    const j = await r.json();
                    if (r.ok) {
                      setDualMap((prev) => ({ ...prev, [detailId]: j.dual }));
                    }
                  } finally {
                    setCollabBusy(false);
                  }
                }}
                className="px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-500/20 text-emerald-300 border border-emerald-500/40"
              >
                {party === 'agency'
                  ? dualMap[detailId]?.agency
                    ? 'Quitar OK agencia'
                    : 'Aprobar (agencia)'
                  : dualMap[detailId]?.client
                    ? 'Quitar OK cliente'
                    : 'Aprobar (cliente)'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}