"use client";

import { useEffect, useState, Suspense } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Plus, Tag, Calendar, ExternalLink, Video, Copy, Pencil } from "lucide-react";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { DuplicateDialog } from "./_components/duplicate-dialog";

interface MateriAjar {
  id: string;
  judul: string;
  mapel: { namaMapel: string };
  rombel: { namaRombel: string };
  createdAt: string;
  linkDrive?: string;
  youtubeId?: string;
}

export default function GuruMateriPage() {
  const [data, setData] = useState<MateriAjar[]>([]);
  const [loading, setLoading] = useState(true);
  const [duplicateItem, setDuplicateItem] = useState<MateriAjar | null>(null);

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

  const fetchData = async () => {
    try {
      setLoading(true);
      const res = await fetch("/api/guru/materi");
      const json = await res.json();
      if (json.success) setData(json.data);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="space-y-6 p-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">E-Learning (Materi Ajar)</h1>
          <p className="text-muted-foreground">Kelola materi belajar untuk siswa</p>
        </div>
        <Button asChild>
          <Link href="/dashboard/guru/materi/create">
            <Plus className="mr-2 h-4 w-4" /> Tambah Materi
          </Link>
        </Button>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Daftar Materi</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Judul</TableHead>
                <TableHead>Mapel</TableHead>
                <TableHead>Kelas</TableHead>
                <TableHead>Tanggal Dibuat</TableHead>
                <TableHead>Lampiran</TableHead>
                <TableHead className="text-right">Aksi</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {loading ? (
                <TableRow>
                  <TableCell colSpan={6} className="py-4 text-center">
                    Loading...
                  </TableCell>
                </TableRow>
              ) : data.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={6} className="text-muted-foreground py-8 text-center">
                    Belum ada materi
                  </TableCell>
                </TableRow>
              ) : (
                data.map((item) => (
                  <TableRow key={item.id}>
                    <TableCell className="font-medium">{item.judul}</TableCell>
                    <TableCell>{item.mapel.namaMapel}</TableCell>
                    <TableCell>
                      <Badge variant="outline">{item.rombel.namaRombel}</Badge>
                    </TableCell>
                    <TableCell>{new Date(item.createdAt).toLocaleDateString("id-ID")}</TableCell>
                    <TableCell>
                      <div className="flex gap-2">
                        {item.linkDrive && <ExternalLink className="h-4 w-4 text-blue-500" />}
                        {item.youtubeId && <Video className="h-4 w-4 text-red-500" />}
                      </div>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-1">
                        <Button variant="ghost" size="icon" title="Edit" asChild>
                          <Link href={`/dashboard/guru/materi/${item.id}/edit`}>
                            <Pencil className="h-4 w-4" />
                          </Link>
                        </Button>
                        <Button variant="ghost" size="icon" title="Duplikasi" onClick={() => setDuplicateItem(item)}>
                          <Copy className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      {duplicateItem && (
        <DuplicateDialog
          item={duplicateItem}
          isOpen={!!duplicateItem}
          onOpenChange={(open) => !open && setDuplicateItem(null)}
          onSuccess={fetchData}
        />
      )}
    </div>
  );
}