'use client';

import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  Folder, FolderOpen, ChevronRight, Home, Shield, Loader2, X, Users, User,
} from 'lucide-react';
import type { Folder as FolderType, User as UserType } from '@/lib/types';

interface Props {
  isAdmin: boolean;
  isOpen:  boolean;
  onClose: () => void;
}

export default function Sidebar({ isAdmin, isOpen, onClose }: Props) {
  const pathname = usePathname();
  const [roots,    setRoots]    = useState<FolderType[]>([]);
  const [expanded, setExpanded] = useState<Record<number, FolderType[]>>({});
  const [loading,  setLoading]  = useState(false);

  // Admin: user list
  const [users,       setUsers]       = useState<UserType[]>([]);
  const [usersLoaded, setUsersLoaded] = useState(false);

  const loadFolders = useCallback(async (parentId: number | null) => {
    const url = `/api/folders?parentId=${parentId === null ? 'null' : parentId}`;
    const res = await fetch(url);
    const json = await res.json();
    return (json.data ?? []) as FolderType[];
  }, []);

  // Load folders for regular users
  useEffect(() => {
    if (isAdmin) return;
    setLoading(true);
    loadFolders(null)
      .then((f) => setRoots(f))
      .finally(() => setLoading(false));
  }, [loadFolders, isAdmin]);

  // Load users for admin sidebar
  useEffect(() => {
    if (!isAdmin || usersLoaded) return;
    setLoading(true);
    fetch('/api/admin/users?limit=100')
      .then((r) => r.json())
      .then((json) => { setUsers(json.data ?? []); setUsersLoaded(true); })
      .finally(() => setLoading(false));
  }, [isAdmin, usersLoaded]);

  async function toggleFolder(folder: FolderType) {
    if (expanded[folder.id]) {
      setExpanded((prev) => { const n = { ...prev }; delete n[folder.id]; return n; });
    } else {
      const children = await loadFolders(folder.id);
      setExpanded((prev) => ({ ...prev, [folder.id]: children }));
    }
  }

  function FolderNode({ folder, depth = 0 }: { folder: FolderType; depth?: number }) {
    const isActive   = pathname === `/folders/${folder.id}`;
    const isExpanded = !!expanded[folder.id];
    const children   = expanded[folder.id] ?? [];

    return (
      <div>
        <div
          className={`group flex items-center gap-1 rounded-lg px-2 py-1.5 text-sm cursor-pointer transition-colors
            ${isActive ? 'bg-blue-50 text-blue-700 font-medium' : 'text-slate-600 hover:bg-slate-100'}`}
          style={{ paddingLeft: `${8 + depth * 16}px` }}
        >
          <button
            onClick={() => toggleFolder(folder)}
            className="flex-shrink-0 p-0.5 rounded hover:bg-slate-200"
          >
            <ChevronRight className={`h-3 w-3 transition-transform ${isExpanded ? 'rotate-90' : ''}`} />
          </button>
          <Link
            href={`/folders/${folder.id}`}
            className="flex flex-1 items-center gap-1.5 overflow-hidden"
            onClick={onClose}
          >
            {isExpanded
              ? <FolderOpen className="h-4 w-4 flex-shrink-0 text-blue-500" />
              : <Folder     className="h-4 w-4 flex-shrink-0 text-slate-400" />}
            <span className="truncate">{folder.name}</span>
          </Link>
        </div>
        {isExpanded && children.map((c) => (
          <FolderNode key={c.id} folder={c} depth={depth + 1} />
        ))}
      </div>
    );
  }

  const sidebarContent = (
    <nav className="flex h-full flex-col">
      <div className="flex-1 overflow-y-auto px-2 py-3 space-y-0.5">
        {/* Home */}
        <Link
          href="/"
          onClick={onClose}
          className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors
            ${pathname === '/' ? 'bg-blue-50 text-blue-700 font-medium' : 'text-slate-600 hover:bg-slate-100'}`}
        >
          <Home className="h-4 w-4" />
          Home
        </Link>

        {/* Admin link */}
        {isAdmin && (
          <Link
            href="/admin"
            onClick={onClose}
            className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors
              ${pathname === '/admin'
                ? 'bg-amber-50 text-amber-700 font-medium'
                : 'text-slate-600 hover:bg-slate-100'}`}
          >
            <Shield className="h-4 w-4" />
            Manage Users
          </Link>
        )}

        <div className="my-2 border-t border-slate-100" />

        {isAdmin ? (
          <>
            {/* Admin: show users list */}
            <p className="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-slate-400">
              Users
            </p>
            {loading ? (
              <div className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400">
                <Loader2 className="h-3.5 w-3.5 animate-spin" /> Loading…
              </div>
            ) : users.length === 0 ? (
              <p className="px-3 py-1 text-xs text-slate-400">No users</p>
            ) : (
              users.map((u) => (
                <Link
                  key={u.id}
                  href={`/admin/users/${u.id}`}
                  onClick={onClose}
                  className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors
                    ${pathname === `/admin/users/${u.id}`
                      ? 'bg-blue-50 text-blue-700 font-medium'
                      : 'text-slate-600 hover:bg-slate-100'}`}
                >
                  <User className="h-4 w-4 flex-shrink-0" />
                  <span className="truncate">{u.username}</span>
                  {u.role === 'admin' && (
                    <span className="ml-auto text-[10px] bg-amber-100 text-amber-600 px-1.5 py-0.5 rounded-full">
                      admin
                    </span>
                  )}
                </Link>
              ))
            )}
          </>
        ) : (
          <>
            {/* Regular user: show folders */}
            <p className="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-slate-400">
              Folders
            </p>
            {loading ? (
              <div className="flex items-center gap-2 px-3 py-2 text-sm text-slate-400">
                <Loader2 className="h-3.5 w-3.5 animate-spin" /> Loading…
              </div>
            ) : roots.length === 0 ? (
              <p className="px-3 py-1 text-xs text-slate-400">No folders yet</p>
            ) : (
              roots.map((f) => <FolderNode key={f.id} folder={f} />)
            )}
          </>
        )}
      </div>
    </nav>
  );

  return (
    <>
      <aside className="hidden lg:flex w-56 flex-shrink-0 flex-col border-r border-slate-200 bg-white">
        {sidebarContent}
      </aside>

      {isOpen && (
        <>
          <div className="fixed inset-0 z-40 bg-black/30 lg:hidden" onClick={onClose} />
          <aside className="fixed left-0 top-0 z-50 flex h-full w-64 flex-col border-r border-slate-200 bg-white shadow-xl lg:hidden">
            <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
              <span className="font-semibold text-slate-800">Navigation</span>
              <button onClick={onClose} className="rounded-lg p-1.5 hover:bg-slate-100">
                <X className="h-4 w-4" />
              </button>
            </div>
            {sidebarContent}
          </aside>
        </>
      )}
    </>
  );
}