'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Search, Plus, MoreHorizontal, Pencil, Trash2, Users, BookOpen } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table';
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, DialogClose,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { toast } from 'sonner';
import { adminApi } from '@/services/api/admin';
import { ClassResponse } from '@/types';
import { format } from 'date-fns';
import { id as localeId } from 'date-fns/locale';
import Link from 'next/link';

export default function AdminClassesPage() {
  const [search, setSearch] = useState('');
  const [classes, setClasses] = useState<ClassResponse[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  // Form State
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
  const [newClassName, setNewClassName] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const fetchClasses = async () => {
    setIsLoading(true);
    try {
      // Assuming getClasses returns an array based on the provided JSON structure
      const response = await adminApi.getClasses();
      // Wait, adminApi.getClasses() returns response.data
      // In the provided response, it is a list
      setClasses(response.data as unknown as ClassResponse[] || []);
    } catch (error) {
      toast.error('Gagal mengambil data kelas');
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchClasses();
  }, []);

  const filtered = classes.filter((c) => {
    return !search || c.name?.toLowerCase().includes(search.toLowerCase()) || c.teacher?.user?.fullName?.toLowerCase().includes(search.toLowerCase());
  });

  const handleAddClass = async () => {
    if (!newClassName.trim()) {
      toast.error('Nama kelas tidak boleh kosong');
      return;
    }
    
    setIsSubmitting(true);
    try {
      await adminApi.createClass({ name: newClassName });
      toast.success('Kelas berhasil ditambahkan');
      setIsAddDialogOpen(false);
      setNewClassName('');
      fetchClasses();
    } catch (error) {
      toast.error('Gagal menambahkan kelas');
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <>
      <title>Kelola Kelas | Nadhom Smart</title>
      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-4">
        <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between">
          <div className="relative flex-1 w-full sm:max-w-xs">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input 
              placeholder="Cari kelas atau guru..." 
              value={search} 
              onChange={(e) => setSearch(e.target.value)} 
              className="pl-9 rounded-xl" 
            />
          </div>
          <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
            <DialogTrigger asChild>
              <Button size="sm" className="rounded-xl gap-1 gradient-primary border-0 text-white w-full sm:w-auto">
                <Plus className="h-3.5 w-3.5" /> Tambah Kelas
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader><DialogTitle>Tambah Kelas Baru</DialogTitle></DialogHeader>
              <div className="space-y-4 py-4">
                <div className="space-y-2">
                  <Label>Nama Kelas</Label>
                  <Input 
                    placeholder="Contoh: 1A Wustho" 
                    value={newClassName} 
                    onChange={e => setNewClassName(e.target.value)} 
                    className="rounded-xl" 
                  />
                </div>
              </div>
              <DialogFooter>
                <DialogClose asChild><Button variant="outline" className="rounded-xl" disabled={isSubmitting}>Batal</Button></DialogClose>
                <Button className="rounded-xl gradient-primary border-0 text-white" onClick={handleAddClass} disabled={isSubmitting || !newClassName.trim()}>
                  {isSubmitting ? 'Menyimpan...' : 'Simpan'}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>

        {/* Desktop View */}
        <div className="hidden md:block rounded-2xl border border-border/50 overflow-hidden bg-card">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Nama Kelas</TableHead>
                <TableHead>Guru Pengampu</TableHead>
                <TableHead className="text-center">Jumlah Murid</TableHead>
                <TableHead>Dibuat Pada</TableHead>
                <TableHead className="w-10" />
              </TableRow>
            </TableHeader>
            <TableBody>
              {isLoading ? (
                <TableRow>
                  <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">Memuat data...</TableCell>
                </TableRow>
              ) : filtered.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">Tidak ada data kelas</TableCell>
                </TableRow>
              ) : filtered.map((cls) => (
                <TableRow key={cls.id}>
                  <TableCell className="font-medium">
                    <Link href={`/admin/classes/${cls.id}`} className="hover:underline hover:text-primary transition-colors">
                      {cls.name}
                    </Link>
                  </TableCell>
                  <TableCell>
                    {cls.teacher?.user?.fullName ? (
                      <span className="text-foreground">{cls.teacher.user.fullName}</span>
                    ) : (
                      <span className="text-muted-foreground italic">Belum ada guru</span>
                    )}
                  </TableCell>
                  <TableCell className="text-center">
                    <Badge variant="secondary" className="font-mono">
                      <Users className="w-3 h-3 mr-1" />
                      {cls._count?.students || 0}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-muted-foreground text-sm">
                    {new Intl.DateTimeFormat('id-ID', {
                        day: '2-digit',
                        month: 'short',
                        year: 'numeric',
                    }).format(new Date(cls.createdAt))}
                  </TableCell>
                  <TableCell>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem asChild>
                          <Link href={`/admin/classes/${cls.id}`}>
                            <BookOpen className="h-3.5 w-3.5 mr-2" /> Detail
                          </Link>
                        </DropdownMenuItem>
                        <DropdownMenuItem><Pencil className="h-3.5 w-3.5 mr-2" /> Edit</DropdownMenuItem>
                        <DropdownMenuItem className="text-destructive"><Trash2 className="h-3.5 w-3.5 mr-2" /> Hapus</DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>

        {/* Mobile View */}
        <div className="grid grid-cols-1 gap-3 md:hidden">
          {isLoading ? (
            <div className="text-center py-8 text-muted-foreground bg-card rounded-2xl border border-border/50">Memuat data...</div>
          ) : filtered.length === 0 ? (
            <div className="text-center py-8 text-muted-foreground bg-card rounded-2xl border border-border/50">Tidak ada data kelas</div>
          ) : filtered.map((cls) => (
            <motion.div 
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              key={cls.id} 
              className="p-4 rounded-2xl border border-border/50 bg-card flex flex-col gap-3 shadow-sm"
            >
              <div className="flex justify-between items-start">
                <div>
                  <Link href={`/admin/classes/${cls.id}`} className="hover:underline hover:text-primary transition-colors">
                    <h3 className="font-semibold text-sm text-foreground line-clamp-1">{cls.name}</h3>
                  </Link>
                  <p className="text-xs text-muted-foreground line-clamp-1 mt-1">
                    {cls.teacher?.user?.fullName || 'Belum ada guru'}
                  </p>
                </div>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild><Button variant="ghost" size="icon" className="h-8 w-8 -mr-2 -mt-1"><MoreHorizontal className="h-4 w-4" /></Button></DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="rounded-xl">
                    <DropdownMenuItem asChild className="rounded-lg">
                      <Link href={`/admin/classes/${cls.id}`}>
                        <BookOpen className="h-3.5 w-3.5 mr-2" /> Detail
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem className="rounded-lg"><Pencil className="h-3.5 w-3.5 mr-2" /> Edit</DropdownMenuItem>
                    <DropdownMenuItem className="text-destructive rounded-lg"><Trash2 className="h-3.5 w-3.5 mr-2" /> Hapus</DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
              <div className="flex items-center justify-between border-t border-border/30 pt-3 mt-1">
                <span className="text-xs text-muted-foreground font-medium">
                    {new Intl.DateTimeFormat('id-ID', {
                        day: '2-digit',
                        month: 'short',
                        year: 'numeric',
                    }).format(new Date(cls.createdAt))}
                </span>
                <Badge variant="secondary" className="text-[10px]">
                  <Users className="w-3 h-3 mr-1" />
                  {cls._count?.students || 0} Siswa
                </Badge>
              </div>
            </motion.div>
          ))}
        </div>
      </motion.div>
    </>
  );
}