"use client";

import { useEffect, useState } from "react";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Calendar, User, BookOpen, ExternalLink } from "lucide-react";
import Link from "next/link";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

interface Materi {
  id: string;
  judul: string;
  mapel: { namaMapel: string };
  guru: { nama: string };
  createdAt: string;
  tanggalSelesai?: string;
  status: string;
}

export default function SiswaMateriPage() {
  const [data, setData] = useState<Materi[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [mapelFilter, setMapelFilter] = useState("all");

  // We might want to fetch available Mapels too, or just extract from existing data
  const mapels = Array.from(new Set(data.map((d) => d.mapel.namaMapel)));

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

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

  const filteredData = data.filter((item) => {
    const matchSearch = item.judul.toLowerCase().includes(searchTerm.toLowerCase());
    const matchMapel = mapelFilter === "all" || item.mapel.namaMapel === mapelFilter;
    return matchSearch && matchMapel;
  });

  return (
    <div className="space-y-6 p-6">
      <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">E-Learning</h1>
          <p className="text-muted-foreground">Materi belajar dari Guru Anda</p>
        </div>
        <div className="flex w-full gap-2 md:w-auto">
          <Input
            placeholder="Cari materi..."
            className="max-w-[200px]"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
          <Select value={mapelFilter} onValueChange={setMapelFilter}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Filter Mapel" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Semua Mapel</SelectItem>
              {mapels.map((m) => (
                <SelectItem key={m} value={m}>
                  {m}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      {loading ? (
        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="bg-muted/20 h-40 animate-pulse rounded-lg" />
          ))}
        </div>
      ) : filteredData.length === 0 ? (
        <div className="text-muted-foreground py-12 text-center">Tidak ada materi belajar yang ditemukan.</div>
      ) : (
        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
          {filteredData.map((item) => (
            <Card key={item.id} className="flex h-full flex-col transition-shadow hover:shadow-md">
              <CardHeader className="pb-3">
                <div className="flex items-start justify-between">
                  <Badge variant="secondary" className="mb-2">
                    {item.mapel.namaMapel}
                  </Badge>
                  <span className="text-muted-foreground flex items-center text-xs">
                    <Calendar className="mr-1 h-3 w-3" />
                    {new Date(item.createdAt).toLocaleDateString("id-ID")}
                  </span>
                </div>
                <CardTitle className="line-clamp-2 text-lg">{item.judul}</CardTitle>
              </CardHeader>
              <CardContent className="flex-grow">
                <div className="text-muted-foreground mb-4 flex items-center text-sm">
                  <User className="mr-2 h-4 w-4" />
                  {item.guru.nama}
                </div>
                {item.tanggalSelesai && (
                  <div className="inline-block rounded bg-orange-50 px-2 py-1 text-xs text-orange-600">
                    Berlaku sampai: {new Date(item.tanggalSelesai).toLocaleDateString("id-ID")}
                  </div>
                )}
              </CardContent>
              <CardFooter className="pt-0">
                <Button className="w-full" asChild>
                  <Link href={`/dashboard/siswa/materi/${item.id}`}>
                    <BookOpen className="mr-2 h-4 w-4" /> Buka Materi
                  </Link>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}