'use client';

import { useEffect, useState, useCallback } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import { Folder, File, Loader2, ChevronRight, Home, User } from 'lucide-react';
import FileList from '@/components/FileList';
import RenameModal from '@/components/RenameModal';
import ConfirmModal from '@/components/ConfirmModal';
import type { Folder as FolderType, FileRecord } from '@/lib/types';

export default function AdminUserFoldersPage() {
  const params = useParams();
  const userId = Number(params.userId);

  const [username,    setUsername]    = useState('');
  const [folders,     setFolders]    = useState<FolderType[]>([]);
  const [files,       setFiles]      = useState<FileRecord[]>([]);
  const [currentFolder, setCurrentFolder] = useState<number | null>(null);
  const [breadcrumb,  setBreadcrumb] = useState<Array<{ id: number; name: string }>>([]);
  const [loading,     setLoading]    = useState(true);

  const [renameFile, setRenameFile] = useState<FileRecord | null>(null);
  const [deleteFile, setDeleteFile] = useState<FileRecord | null>(null);

  const loadUser = useCallback(async () => {
    const res = await fetch(`/api/admin/users/${userId}`);
    const json = await res.json();
    if (json.data) setUsername(json.data.username);
  }, [userId]);

  const loadContent = useCallback(async (folderId: number | null) => {
    setLoading(true);
    try {
      const folderUrl = `/api/admin/user-folders?userId=${userId}&parentId=${folderId === null ? 'null' : folderId}`;
      const fRes = await fetch(folderUrl);
      const fJson = await fRes.json();
      setFolders(fJson.data ?? []);

      if (folderId !== null) {
        const filesUrl = `/api/admin/user-files?userId=${userId}&folderId=${folderId}`;
        const fiRes = await fetch(filesUrl);
        const fiJson = await fiRes.json();
        setFiles(fiJson.data ?? []);

        const pathRes = await fetch(`/api/folders/${folderId}`);
        const pathJson = await pathRes.json();
        setBreadcrumb(pathJson.data?.path ?? []);
      } else {
        setFiles([]);
        setBreadcrumb([]);
      }
    } finally {
      setLoading(false);
    }
  }, [userId]);

  useEffect(() => { loadUser(); }, [loadUser]);
  useEffect(() => { loadContent(currentFolder); }, [currentFolder, loadContent]);

  function navigateToFolder(id: number | null) {
    setCurrentFolder(id);
  }

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

  if (loading && !username) {
    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">
      {/* Header */}
      <div className="flex items-center gap-3">
        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-100">
          <User className="h-5 w-5 text-blue-600" />
        </div>
        <div>
          <h1 className="text-lg font-semibold text-slate-800">{username}&apos;s Files</h1>
          <p className="text-sm text-slate-400">Browsing as admin</p>
        </div>
      </div>

      {/* Breadcrumb */}
      <nav className="flex flex-wrap items-center gap-1 text-sm">
        <button
          onClick={() => navigateToFolder(null)}
          className="flex items-center gap-1 text-slate-500 hover:text-blue-600 transition-colors"
        >
          <Home className="h-3.5 w-3.5" />
          Root
        </button>
        {breadcrumb.map((item, idx) => {
          const isLast = idx === breadcrumb.length - 1;
          return (
            <div key={item.id} className="flex items-center gap-1">
              <ChevronRight className="h-3.5 w-3.5 text-slate-300 flex-shrink-0" />
              {isLast ? (
                <span className="font-medium text-slate-800 truncate max-w-[200px]">{item.name}</span>
              ) : (
                <button
                  onClick={() => navigateToFolder(item.id)}
                  className="text-slate-500 hover:text-blue-600 transition-colors truncate max-w-[120px]"
                >
                  {item.name}
                </button>
              )}
            </div>
          );
        })}
      </nav>

      {loading ? (
        <div className="flex justify-center py-16"><Loader2 className="h-7 w-7 animate-spin text-slate-300" /></div>
      ) : (
        <>
          {/* Folders */}
          {folders.length > 0 && (
            <section className="space-y-3">
              <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-400">
                Folders ({folders.length})
              </h2>
              <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
                {folders.map((f) => (
                  <button
                    key={f.id}
                    onClick={() => navigateToFolder(f.id)}
                    className="card group flex flex-col p-4 text-left transition-shadow hover:shadow-md"
                  >
                    <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50">
                      <Folder className="h-5 w-5 text-blue-600" />
                    </div>
                    <p className="truncate text-sm font-medium text-slate-800">{f.name}</p>
                  </button>
                ))}
              </div>
            </section>
          )}

          {/* Files */}
          {currentFolder !== null && (
            <section className="space-y-3">
              <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-400">
                Files {files.length > 0 && `(${files.length})`}
              </h2>
              <div className="card p-4">
                <FileList
                  files={files}
                  onRename={setRenameFile}
                  onDelete={setDeleteFile}
                />
              </div>
            </section>
          )}

          {folders.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">{currentFolder === null ? 'No root folders' : 'This folder is empty'}</p>
            </div>
          )}
        </>
      )}

      {renameFile && <RenameModal file={renameFile} onClose={() => setRenameFile(null)} onSaved={() => { setRenameFile(null); loadContent(currentFolder); }} />}
      {deleteFile && <ConfirmModal title="Delete File" message={`Delete "${deleteFile.name}"? This will permanently remove the file.`} onConfirm={handleDeleteFile} onClose={() => setDeleteFile(null)} />}
    </div>
  );
}