"use client";

import * as React from "react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Modal } from "@/components/ui/modal";
import { formatDateID } from "@/lib/utils";
import {
  CalendarDays,
  Plus,
  CheckCircle2,
  Calendar,
  Layers,
  Edit2,
  Trash2,
  Power,
} from "lucide-react";

interface SemesterItem {
  id: string;
  name: string;
  type: string;
  isActive: boolean;
  startDate: string;
  endDate: string;
}

interface AcademicYearItem {
  id: string;
  name: string;
  isActive: boolean;
  semesters: SemesterItem[];
  _count: {
    classes: number;
  };
}

export function AcademicYearsClient() {
  const [years, setYears] = React.useState<AcademicYearItem[]>([]);
  const [loading, setLoading] = React.useState(true);
  const [createModalOpen, setCreateModalOpen] = React.useState(false);
  const [name, setName] = React.useState("");
  const [isActive, setIsActive] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [formError, setFormError] = React.useState("");

  const fetchYears = React.useCallback(async () => {
    try {
      setLoading(true);
      const res = await fetch("/api/academic/years");
      const data = await res.json();
      if (data.success) {
        setYears(data.data || []);
      }
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  }, []);

  React.useEffect(() => {
    fetchYears();
  }, [fetchYears]);

  const handleCreateYear = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim()) {
      setFormError("Nama tahun ajaran wajib diisi.");
      return;
    }

    try {
      setSubmitting(true);
      setFormError("");
      const res = await fetch("/api/academic/years", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: name.trim(), isActive, autoCreateSemesters: true }),
      });
      const data = await res.json();
      if (data.success) {
        setCreateModalOpen(false);
        setName("");
        setIsActive(false);
        fetchYears();
      } else {
        setFormError(data.error || "Gagal membuat tahun ajaran.");
      }
    } catch (err) {
      setFormError("Terjadi kesalahan jaringan.");
    } finally {
      setSubmitting(false);
    }
  };

  const handleToggleYearActive = async (id: string, current: boolean) => {
    try {
      const res = await fetch(`/api/academic/years/${id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ isActive: !current }),
      });
      const data = await res.json();
      if (data.success) {
        fetchYears();
      }
    } catch (err) {
      console.error(err);
    }
  };

  const handleToggleSemesterActive = async (semId: string, current: boolean) => {
    try {
      const res = await fetch("/api/academic/semesters", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ semesterId: semId, isActive: !current }),
      });
      const data = await res.json();
      if (data.success) {
        fetchYears();
      }
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div className="space-y-6">
      {/* Top Action */}
      <div className="flex justify-between items-center">
        <p className="text-xs text-slate-500">
          Tahun ajaran aktif dan semester aktif menjadi patokan pendaftaran kelas dan penilaian.
        </p>
        <Button
          size="sm"
          onClick={() => {
            setName("2027/2028");
            setIsActive(false);
            setFormError("");
            setCreateModalOpen(true);
          }}
          className="text-xs bg-blue-600 hover:bg-blue-700"
        >
          <Plus className="h-3.5 w-3.5 mr-1" />
          Tambah Tahun Ajaran
        </Button>
      </div>

      {/* List of Years */}
      {loading ? (
        <div className="p-12 text-center text-slate-400 text-xs">Memuat data tahun ajaran...</div>
      ) : years.length === 0 ? (
        <div className="p-12 text-center text-slate-500 bg-white rounded-xl border border-slate-200">
          Belum ada tahun ajaran yang terdaftar.
        </div>
      ) : (
        <div className="space-y-4">
          {years.map((yr) => (
            <Card
              key={yr.id}
              className={`border-2 transition-all ${
                yr.isActive ? "border-blue-500 shadow-md" : "border-slate-200"
              }`}
            >
              <CardContent className="p-5 space-y-4">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-100 pb-4">
                  <div className="flex items-center gap-3">
                    <div
                      className={`h-11 w-11 rounded-xl flex items-center justify-center font-bold text-base ${
                        yr.isActive
                          ? "bg-blue-600 text-white shadow-md shadow-blue-500/30"
                          : "bg-slate-100 text-slate-600"
                      }`}
                    >
                      <CalendarDays className="h-5 w-5" />
                    </div>
                    <div>
                      <div className="flex items-center gap-2">
                        <h3 className="text-lg font-bold text-slate-900">
                          Tahun Ajaran {yr.name}
                        </h3>
                        {yr.isActive ? (
                          <Badge variant="success" className="text-[10px]">
                            Aktif Sekarang
                          </Badge>
                        ) : (
                          <Badge variant="secondary" className="text-[10px]">
                            Non-Aktif
                          </Badge>
                        )}
                      </div>
                      <div className="flex items-center gap-3 text-xs text-slate-500 mt-1">
                        <span className="flex items-center gap-1">
                          <Layers className="h-3.5 w-3.5 text-slate-400" />
                          {yr._count.classes} Rombongan Belajar
                        </span>
                      </div>
                    </div>
                  </div>

                  <div className="flex items-center gap-2">
                    <Button
                      variant={yr.isActive ? "secondary" : "outline"}
                      size="sm"
                      onClick={() => handleToggleYearActive(yr.id, yr.isActive)}
                      className="text-xs"
                    >
                      <Power className="h-3.5 w-3.5 mr-1" />
                      {yr.isActive ? "Non-aktifkan" : "Jadikan Aktif"}
                    </Button>
                  </div>
                </div>

                {/* Semesters in this year */}
                <div>
                  <h4 className="text-xs font-bold text-slate-700 uppercase tracking-wide mb-3">
                    Semester & Kalender Operasional
                  </h4>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    {yr.semesters.map((sem) => (
                      <div
                        key={sem.id}
                        className={`p-3.5 rounded-xl border flex items-center justify-between ${
                          sem.isActive
                            ? "bg-blue-50/40 border-blue-200"
                            : "bg-slate-50 border-slate-200"
                        }`}
                      >
                        <div className="space-y-1">
                          <div className="flex items-center gap-2">
                            <span className="font-bold text-xs text-slate-900">
                              {sem.name}
                            </span>
                            {sem.isActive && (
                              <Badge variant="info" className="text-[9px] px-1.5 py-0">
                                Berjalan
                              </Badge>
                            )}
                          </div>
                          <p className="text-[11px] text-slate-500 font-mono">
                            {formatDateID(sem.startDate)} s/d {formatDateID(sem.endDate)}
                          </p>
                        </div>

                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => handleToggleSemesterActive(sem.id, sem.isActive)}
                          className={`text-xs h-7 px-2 ${
                            sem.isActive
                              ? "text-blue-700 hover:bg-blue-100"
                              : "text-slate-500 hover:bg-slate-200"
                          }`}
                        >
                          {sem.isActive ? "Aktif" : "Aktifkan"}
                        </Button>
                      </div>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      {/* Create Modal */}
      {createModalOpen && (
        <Modal
          isOpen={true}
          onClose={() => setCreateModalOpen(false)}
          title="Tambah Tahun Ajaran Baru"
        >
          <form onSubmit={handleCreateYear} className="space-y-4 text-xs">
            {formError && (
              <div className="p-3 bg-rose-50 border border-rose-200 text-rose-700 rounded-lg">
                {formError}
              </div>
            )}

            <div>
              <label className="block font-semibold text-slate-700 mb-1">
                Tahun Ajaran <span className="text-rose-500">*</span>
              </label>
              <Input
                placeholder="Contoh: 2027/2028"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required
                className="text-xs"
              />
              <p className="text-[11px] text-slate-400 mt-1">
                Format: YYYY/YYYY (contoh: 2026/2027 atau 2027/2028)
              </p>
            </div>

            <div className="flex items-center gap-2 pt-2">
              <input
                type="checkbox"
                id="isActiveCheck"
                checked={isActive}
                onChange={(e) => setIsActive(e.target.checked)}
                className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
              />
              <label htmlFor="isActiveCheck" className="text-xs text-slate-700 font-medium">
                Jadikan tahun ajaran ini sebagai tahun ajaran aktif sekarang
              </label>
            </div>

            <p className="text-[11px] text-blue-600 bg-blue-50 p-3 rounded-lg border border-blue-100">
              Sistem akan secara otomatis membuat Semester Ganjil (Juli - Desember) dan Semester Genap (Januari - Juni) untuk tahun ajaran baru ini.
            </p>

            <div className="pt-2 flex justify-end gap-2">
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={() => setCreateModalOpen(false)}
              >
                Batal
              </Button>
              <Button
                type="submit"
                size="sm"
                disabled={submitting}
                className="bg-blue-600 hover:bg-blue-700"
              >
                {submitting ? "Menyimpan..." : "Simpan Tahun Ajaran"}
              </Button>
            </div>
          </form>
        </Modal>
      )}
    </div>
  );
}