"use client";

import * as React from "react";
import Link from "next/link";
import {
  ClipboardList,
  Clock,
  CheckCircle2,
  AlertCircle,
  ArrowRight,
  Search,
  Award,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { formatDateID, getDeadlineStatus } from "@/lib/utils";

interface StudentAssignmentsClientProps {
  initialAssignments: any[];
}

export default function StudentAssignmentsClient({
  initialAssignments,
}: StudentAssignmentsClientProps) {
  const [filterTab, setFilterTab] = React.useState<"ALL" | "PENDING" | "SUBMITTED" | "GRADED">("ALL");
  const [search, setSearch] = React.useState("");

  const filtered = initialAssignments.filter((a) => {
    const sub = a.submissions[0];
    const matchSearch =
      a.title.toLowerCase().includes(search.toLowerCase()) ||
      a.teacherSubject.subject.name.toLowerCase().includes(search.toLowerCase());

    let matchTab = true;
    if (filterTab === "PENDING") matchTab = !sub;
    else if (filterTab === "SUBMITTED") matchTab = !!sub && sub.status !== "GRADED";
    else if (filterTab === "GRADED") matchTab = !!sub && sub.status === "GRADED";

    return matchSearch && matchTab;
  });

  return (
    <div className="space-y-6">
      {/* Top Filter and Tabs */}
      <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
        <div className="flex gap-1 bg-white p-1 rounded-xl border border-slate-200 text-xs font-semibold w-full sm:w-auto">
          {[
            { key: "ALL", label: "Semua Tugas" },
            { key: "PENDING", label: "Belum Dikerjakan" },
            { key: "SUBMITTED", label: "Sudah Dikirim" },
            { key: "GRADED", label: "Sudah Dinilai" },
          ].map((tab) => (
            <button
              key={tab.key}
              onClick={() => setFilterTab(tab.key as any)}
              className={`px-3 py-1.5 rounded-lg transition-all ${
                filterTab === tab.key
                  ? "bg-blue-600 text-white shadow-sm"
                  : "text-slate-600 hover:bg-slate-100"
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        <div className="relative w-full sm:w-64">
          <Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
          <input
            type="text"
            placeholder="Cari tugas atau mata pelajaran..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full pl-9 pr-3 py-2 rounded-xl border border-slate-200 text-xs bg-white text-slate-800 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
      </div>

      {/* Grid of Student Assignments */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        {filtered.map((a) => {
          const sub = a.submissions[0];
          const deadline = getDeadlineStatus(a.dueDate);

          return (
            <Card
              key={a.id}
              className="hover:border-blue-400 hover:shadow-md transition-all flex flex-col justify-between group"
            >
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <Badge variant="primary">{a.teacherSubject.subject.name}</Badge>
                  {sub ? (
                    sub.status === "GRADED" ? (
                      <span className="text-xs font-bold text-emerald-700 bg-emerald-50 border border-emerald-200 px-2.5 py-0.5 rounded-full">
                        Nilai: {sub.score} / {a.maxScore}
                      </span>
                    ) : (
                      <span className="text-[10px] font-bold text-blue-700 bg-blue-50 border border-blue-200 px-2 py-0.5 rounded-full">
                        Menunggu Penilaian
                      </span>
                    )
                  ) : (
                    <span
                      className={`text-[10px] font-bold px-2 py-0.5 rounded-full border ${deadline.badgeClass}`}
                    >
                      {deadline.label}
                    </span>
                  )}
                </div>

                <CardTitle className="text-base text-slate-900 group-hover:text-blue-600 transition-colors mt-2 line-clamp-2">
                  {a.title}
                </CardTitle>
              </CardHeader>

              <CardContent className="space-y-3 pt-2">
                {a.description && (
                  <p className="text-xs text-slate-500 line-clamp-2 leading-relaxed">
                    {a.description}
                  </p>
                )}

                <div className="flex items-center gap-1.5 text-xs text-slate-500">
                  <Clock className="h-3.5 w-3.5 text-slate-400 shrink-0" />
                  <span>Batas: {formatDateID(a.dueDate, true)}</span>
                </div>

                <p className="text-[11px] text-slate-400">
                  Guru Pengampu: {a.teacherSubject.teacher.fullName}
                </p>

                {sub?.feedback && (
                  <div className="p-2.5 rounded-xl bg-amber-50/70 border border-amber-200 text-amber-900 text-xs">
                    <span className="font-bold block text-[10px] uppercase text-amber-700">
                      Feedback Guru:
                    </span>
                    <p className="italic mt-0.5">"{sub.feedback}"</p>
                  </div>
                )}

                {/* Button Action */}
                <div className="pt-2 border-t border-slate-100">
                  <Link href={`/student/assignments/${a.id}`}>
                    <Button
                      size="sm"
                      variant={sub ? "outline" : "primary"}
                      className="w-full text-xs font-bold"
                    >
                      {sub ? "Lihat Detail Jawaban" : "Kerjakan & Kirim Jawaban"}
                      <ArrowRight className="ml-1.5 h-3.5 w-3.5" />
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>
    </div>
  );
}