'use client';

import { useAppStore } from '@/stores/app-store';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { ScrollArea } from '@/components/ui/scroll-area';
import {
  LayoutDashboard,
  Users,
  BookOpen,
  BookMarked,
  Layers,
  FileText,
  LogOut,
  GraduationCap,
  Menu,
  X,
  Shield,
  Trophy,
} from 'lucide-react';
import { useState } from 'react';
import type { PageName } from '@/stores/app-store';

interface NavItem {
  page: PageName;
  label: string;
  icon: React.ReactNode;
}

const guruNav: NavItem[] = [
  { page: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard className="w-4 h-4" /> },
  { page: 'santri', label: 'Data Santri', icon: <Users className="w-4 h-4" /> },
  { page: 'hafalan', label: 'Hafalan', icon: <BookOpen className="w-4 h-4" /> },
  { page: 'ngaji', label: 'Batas Ngaji', icon: <BookMarked className="w-4 h-4" /> },
  { page: 'jilid', label: 'Batas Jilid', icon: <Layers className="w-4 h-4" /> },
  { page: 'laporan', label: 'Laporan', icon: <FileText className="w-4 h-4" /> },
];

const kepsekNav: NavItem[] = [
  { page: 'kepsek-dashboard', label: 'Dashboard', icon: <LayoutDashboard className="w-4 h-4" /> },
  { page: 'kepsek-guru', label: 'Kelola Guru', icon: <GraduationCap className="w-4 h-4" /> },
  { page: 'kepsek-santri', label: 'Capaian Santri', icon: <Trophy className="w-4 h-4" /> },
];

export default function AppShell({ children }: { children: React.ReactNode }) {
  const { user, currentPage, navigate, logout } = useAppStore();
  const [sidebarOpen, setSidebarOpen] = useState(false);

  if (!user) return null;

  const navItems = user.role === 'kepsek' ? kepsekNav : user.role === 'guru' ? guruNav : [];

  return (
    <div className="min-h-screen flex flex-col bg-gray-50">
      {/* Top Bar */}
      <header className="sticky top-0 z-50 bg-white border-b shadow-sm">
        <div className="flex items-center justify-between h-14 px-4">
          <div className="flex items-center gap-3">
            {navItems.length > 0 && (
              <Button variant="ghost" size="icon" className="md:hidden" onClick={() => setSidebarOpen(!sidebarOpen)}>
                {sidebarOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
              </Button>
            )}
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-lg bg-emerald-600 flex items-center justify-center">
                <BookOpen className="w-4 h-4 text-white" />
              </div>
              <span className="font-semibold text-gray-900 text-sm">Monitoring Ummi</span>
            </div>
          </div>

          <div className="flex items-center gap-3">
            <div className="hidden sm:flex items-center gap-2 text-sm">
              <div className="w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center">
                {user.role === 'guru' ? (
                  <GraduationCap className="w-4 h-4 text-emerald-700" />
                ) : user.role === 'kepsek' ? (
                  <Shield className="w-4 h-4 text-purple-700" />
                ) : (
                  <Users className="w-4 h-4 text-emerald-700" />
                )}
              </div>
              <div>
                <p className="font-medium text-gray-900 text-xs leading-tight">{user.nama}</p>
                <p className="text-gray-500 text-[10px] leading-tight">{user.role === 'kepsek' ? 'Kepala Sekolah' : user.role === 'guru' ? 'Guru' : 'Orang Tua'}</p>
              </div>
            </div>
            <Button variant="ghost" size="icon" onClick={logout} className="text-gray-500 hover:text-red-600">
              <LogOut className="w-4 h-4" />
            </Button>
          </div>
        </div>
      </header>

      <div className="flex flex-1">
        {/* Sidebar - Desktop */}
        {navItems.length > 0 && (
          <>
            <aside className="hidden md:flex w-56 flex-col border-r bg-white">
              <ScrollArea className="flex-1 py-2">
                <nav className="space-y-1 px-2">
                  {navItems.map((item) => (
                    <Button
                      key={item.page}
                      variant={currentPage === item.page ? 'secondary' : 'ghost'}
                      className="w-full justify-start gap-2 text-sm"
                      onClick={() => navigate(item.page)}
                    >
                      {item.icon}
                      {item.label}
                    </Button>
                  ))}
                </nav>
              </ScrollArea>
            </aside>

            {/* Mobile Sidebar Overlay */}
            {sidebarOpen && (
              <div className="md:hidden fixed inset-0 z-40 flex">
                <div className="fixed inset-0 bg-black/50" onClick={() => setSidebarOpen(false)} />
                <aside className="relative w-56 bg-white shadow-xl flex flex-col">
                  <ScrollArea className="flex-1 py-2">
                    <nav className="space-y-1 px-2">
                      {navItems.map((item) => (
                        <Button
                          key={item.page}
                          variant={currentPage === item.page ? 'secondary' : 'ghost'}
                          className="w-full justify-start gap-2 text-sm"
                          onClick={() => {
                            navigate(item.page);
                            setSidebarOpen(false);
                          }}
                        >
                          {item.icon}
                          {item.label}
                        </Button>
                      ))}
                    </nav>
                  </ScrollArea>
                </aside>
              </div>
            )}
          </>
        )}

        {/* Main Content */}
        <main className="flex-1 overflow-auto">
          <div className="p-4 md:p-6 max-w-7xl mx-auto">{children}</div>
        </main>
      </div>
    </div>
  );
}