'use client';

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

export default function HomePage() {
  const sp     = useSearchParams();
  const router = useRouter();
  const query  = sp.get('q') ?? '';

  // ── Folders ───────────────────────────────────────────────
  const [folders,  setFolders]  = useState<FolderType[]>([]);
  const [fLoading, setFLoading] = useState(false);

  // ── Search ────────────────────────────────────────────────
  const [results,  setResults]  = useState<FileRecord[]>([]);
  const [total,    setTotal]    = useState(0);
  const [page,     setPage]     = useState(1);
  const [sLoading, setSLoading] = useState(false);
  const LIMIT = 20;

  // ── Modals ────────────────────────────────────────────────
  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 loadFolders = useCallback(async () => {
    setFLoading(true);
    try {
      const res  = await fetch('/api/folders?parentId=null');
      const json = await res.json();
      setFolders(json.data ?? []);
    } finally {
      setFLoading(false);
    }
  }, []);

  const loadSearch = useCallback(async (q: string, pg: number) => {
    if (!q) { setResults([]); setTotal(0); return; }
    setSLoading(true);
    try {
      const params = new URLSearchParams({ q, page: String(pg), limit: String(LIMIT) });
      const res    = await fetch(`/api/search?${params}`);
      const json   = await res.json();
      setResults(json.data ?? []);
      setTotal(json.total ?? 0);
    } finally {
      setSLoading(false);
    }
  }, []);

  useEffect(() => { if (!query) loadFolders(); }, [query, loadFolders]);
  useEffect(() => { if (query)  { setPage(1); loadSearch(query, 1); } }, [query, loadSearch]);
  useEffect(() => { if (query && page > 1) loadSearch(query, page); }, [page]); // eslint-disable-line

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

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

  const pages = Math.ceil(total / LIMIT);

  // ── SEARCH VIEW ───────────────────────────────────────────
  if (query) {
    return (
      <div className="p-4 sm:p-6 space-y-6">
        <div className="flex items-center gap-2">
          <Search className="h-5 w-5 text-slate-400" />
          <h1 className="text-lg font-semibold text-slate-800">
            Search results for &ldquo;<span className="text-blue-600">{query}</span>&rdquo;
          </h1>
          <button
            onClick={() => router.push('/')}
            className="ml-auto btn-secondary text-xs px-3 py-1.5"
          >
            Clear
          </button>
        </div>

        {sLoading ? (
          <div className="flex justify-center py-16"><Loader2 className="h-7 w-7 animate-spin text-slate-300" /></div>
        ) : (
          <div className="card p-4">
            <FileList
              files={results}
              showFolder
              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">{total} results</p>
                <div className="flex gap-1">
                  <button disabled={page <= 1} onClick={() => setPage(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">{page} / {pages}</span>
                  <button disabled={page >= pages} onClick={() => setPage(p => p + 1)} className="btn-secondary px-3 py-1.5 text-xs disabled:opacity-40">Next</button>
                </div>
              </div>
            )}
          </div>
        )}

        {renameFile && <RenameModal file={renameFile} onClose={() => setRenameFile(null)} onSaved={() => { setRenameFile(null); loadSearch(query, page); }} />}
        {deleteFile && <ConfirmModal title="Delete File" message={`Delete "${deleteFile.name}"? This cannot be undone.`} onConfirm={handleDeleteFile} onClose={() => setDeleteFile(null)} />}
      </div>
    );
  }

  // ── HOME VIEW ─────────────────────────────────────────────
  return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-lg font-semibold text-slate-800">All Folders</h1>
        <button onClick={() => setShowCreate(true)} className="btn-primary">
          <FolderPlus className="h-4 w-4" />
          <span className="hidden sm:inline">New Folder</span>
        </button>
      </div>

      {fLoading ? (
        <div className="flex justify-center py-16"><Loader2 className="h-7 w-7 animate-spin text-slate-300" /></div>
      ) : folders.length === 0 ? (
        <div className="flex flex-col items-center py-24 text-slate-400">
          <Folder className="mb-3 h-12 w-12 opacity-20" />
          <p className="font-medium">No folders yet</p>
          <p className="mt-1 text-sm">Create your first folder to get started</p>
          <button onClick={() => setShowCreate(true)} className="btn-primary mt-4">
            <FolderPlus className="h-4 w-4" /> New Folder
          </button>
        </div>
      ) : (
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
          {folders.map((f) => (
            <FolderCard
              key={f.id}
              folder={f}
              onRename={setRenameFolder}
              onDelete={setDeleteFolder}
            />
          ))}
        </div>
      )}

      {showCreate    && <CreateFolderModal parentId={null} onClose={() => setShowCreate(false)} onSaved={loadFolders} />}
      {renameFolder  && <CreateFolderModal editFolder={renameFolder} onClose={() => setRenameFolder(null)} onSaved={() => { setRenameFolder(null); loadFolders(); }} />}
      {deleteFolder  && <ConfirmModal title="Delete Folder" message={`Delete "${deleteFolder.name}" and all its contents? This cannot be undone.`} onConfirm={handleDeleteFolder} onClose={() => setDeleteFolder(null)} />}
    </div>
  );
}