'use client';

import { useEffect, useState, useCallback } from 'react';
import { useParams } from 'next/navigation';
import { FolderPlus, Upload, Loader2, Folder } from 'lucide-react';
import FolderCard        from '@/components/FolderCard';
import FileList          from '@/components/FileList';
import UploadModal       from '@/components/UploadModal';
import CreateFolderModal from '@/components/CreateFolderModal';
import ConfirmModal      from '@/components/ConfirmModal';
import RenameModal       from '@/components/RenameModal';
import BreadcrumbNav     from '@/components/BreadcrumbNav';
import type { Folder as FolderType, FileRecord, BreadcrumbItem } from '@/lib/types';

export default function FolderPage() {
  const params = useParams();
  const id = Number(params.folderId);

  const [breadcrumb,   setBreadcrumb]   = useState<BreadcrumbItem[]>([]);
  const [subFolders,   setSubFolders]   = useState<FolderType[]>([]);
  const [files,        setFiles]        = useState<FileRecord[]>([]);
  const [fileTotal,    setFileTotal]    = useState(0);
  const [filePage,     setFilePage]     = useState(1);
  const [loading,      setLoading]      = useState(true);

  // Modals
  const [showUpload,    setShowUpload]    = useState(false);
  const [showCreate,    setShowCreate]    = useState(false);
  const [renameFolder,  setRenameFolder]  = useState<FolderType | null>(null);
  const [deleteFolder,  setDeleteFolder]  = useState<FolderType | null>(null);
  const [renameFile,    setRenameFile]    = useState<FileRecord | null>(null);
  const [deleteFile,    setDeleteFile]    = useState<FileRecord | null>(null);

  const FILE_LIMIT = 50;

  const loadAll = useCallback(async (pg = 1) => {
    setLoading(true);
    try {
      const [folderRes, subRes, fileRes] = await Promise.all([
        fetch(`/api/folders/${id}`),
        fetch(`/api/folders?parentId=${id}`),
        fetch(`/api/files?folderId=${id}&page=${pg}&limit=${FILE_LIMIT}`),
      ]);
      const folderJson = await folderRes.json();
      const subJson    = await subRes.json();
      const fileJson   = await fileRes.json();

      setBreadcrumb(folderJson.data?.path ?? []);
      setSubFolders(subJson.data ?? []);
      setFiles(fileJson.data ?? []);
      setFileTotal(fileJson.total ?? 0);
    } finally {
      setLoading(false);
    }
  }, [id]);

  useEffect(() => { loadAll(1); setFilePage(1); }, [loadAll]);
  useEffect(() => { if (filePage > 1) loadAll(filePage); }, [filePage]); // eslint-disable-line

  async function handleDeleteFolder() {
    if (!deleteFolder) return;
    await fetch(`/api/folders/${deleteFolder.id}`, { method: 'DELETE' });
    setDeleteFolder(null);
    loadAll(filePage);
  }

  async function handleDeleteFile() {
    if (!deleteFile) return;
    await fetch(`/api/files/${deleteFile.id}`, { method: 'DELETE' });
    setDeleteFile(null);
    loadAll(filePage);
  }

  const pages = Math.ceil(fileTotal / FILE_LIMIT);

  if (loading) {
    return (
      <div className="flex h-full items-center justify-center py-32">
        <Loader2 className="h-8 w-8 animate-spin text-slate-300" />
      </div>
    );
  }

  return (
    <div className="p-4 sm:p-6 space-y-6">
      {/* Breadcrumb */}
      <BreadcrumbNav items={breadcrumb} />

      {/* Header */}
      <div className="flex flex-wrap items-center gap-2">
        <h1 className="flex-1 text-lg font-semibold text-slate-800 truncate">
          {breadcrumb[breadcrumb.length - 1]?.name ?? 'Folder'}
        </h1>
        <div className="flex items-center gap-2">
          <button onClick={() => setShowCreate(true)} className="btn-secondary">
            <FolderPlus className="h-4 w-4" />
            <span className="hidden sm:inline">New Folder</span>
          </button>
          <button onClick={() => setShowUpload(true)} className="btn-primary">
            <Upload className="h-4 w-4" />
            <span className="hidden sm:inline">Upload</span>
          </button>
        </div>
      </div>

      {/* Sub-folders */}
      {subFolders.length > 0 && (
        <section className="space-y-3">
          <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-400">
            Folders ({subFolders.length})
          </h2>
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
            {subFolders.map((f) => (
              <FolderCard
                key={f.id}
                folder={f}
                onRename={setRenameFolder}
                onDelete={setDeleteFolder}
              />
            ))}
          </div>
        </section>
      )}

      {/* Files */}
      <section className="space-y-3">
        <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-400">
          Files {fileTotal > 0 && `(${fileTotal})`}
        </h2>
        <div className="card p-4">
          <FileList
            files={files}
            onRename={setRenameFile}
            onDelete={setDeleteFile}
          />
          {pages > 1 && (
            <div className="mt-4 flex items-center justify-between border-t border-slate-100 pt-4">
              <p className="text-sm text-slate-400">{fileTotal} files total</p>
              <div className="flex gap-1">
                <button disabled={filePage <= 1} onClick={() => setFilePage(p => p - 1)} className="btn-secondary px-3 py-1.5 text-xs disabled:opacity-40">Prev</button>
                <span className="px-2 text-sm text-slate-600">{filePage} / {pages}</span>
                <button disabled={filePage >= pages} onClick={() => setFilePage(p => p + 1)} className="btn-secondary px-3 py-1.5 text-xs disabled:opacity-40">Next</button>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Empty state */}
      {subFolders.length === 0 && files.length === 0 && (
        <div className="flex flex-col items-center py-16 text-slate-400">
          <Folder className="mb-3 h-12 w-12 opacity-20" />
          <p className="font-medium">This folder is empty</p>
          <p className="mt-1 text-sm">Upload files or create sub-folders</p>
          <div className="mt-4 flex gap-2">
            <button onClick={() => setShowCreate(true)} className="btn-secondary">
              <FolderPlus className="h-4 w-4" /> New Folder
            </button>
            <button onClick={() => setShowUpload(true)} className="btn-primary">
              <Upload className="h-4 w-4" /> Upload
            </button>
          </div>
        </div>
      )}

      {/* Modals */}
      {showUpload   && <UploadModal folderId={id} onClose={() => setShowUpload(false)} onDone={() => { setShowUpload(false); loadAll(filePage); }} />}
      {showCreate   && <CreateFolderModal parentId={id} onClose={() => setShowCreate(false)} onSaved={() => loadAll(filePage)} />}
      {renameFolder && <CreateFolderModal editFolder={renameFolder} onClose={() => setRenameFolder(null)} onSaved={() => { setRenameFolder(null); loadAll(filePage); }} />}
      {deleteFolder && <ConfirmModal title="Delete Folder" message={`Delete "${deleteFolder.name}" and all its contents?`} onConfirm={handleDeleteFolder} onClose={() => setDeleteFolder(null)} />}
      {renameFile   && <RenameModal file={renameFile} onClose={() => setRenameFile(null)} onSaved={() => { setRenameFile(null); loadAll(filePage); }} />}
      {deleteFile   && <ConfirmModal title="Delete File" message={`Delete "${deleteFile.name}" from folder "${breadcrumb[breadcrumb.length - 1]?.name ?? 'this folder'}"? This will permanently remove the file.`} onConfirm={handleDeleteFile} onClose={() => setDeleteFile(null)} />}
    </div>
  );
}