"use client";

import { useCallback, useEffect, useState } from "react";
import {
  fetchAcademicContext,
  getAcademicMode,
  getAcademicYearId,
  getAcademicYears,
  isReadOnlyYear,
  switchAcademicYear,
} from "@/lib/api";
import type { AcademicYear } from "@/lib/types";

export function AcademicYearSwitcher() {
  const [years, setYears] = useState<AcademicYear[]>([]);
  const [selectedId, setSelectedId] = useState<number | null>(null);
  const [mode, setMode] = useState("read_write");
  const [loading, setLoading] = useState(false);

  const refresh = useCallback(async () => {
    try {
      const ctx = await fetchAcademicContext();
      setYears(ctx.academic_years);
      setSelectedId(ctx.active_academic_year_id);
      setMode(ctx.mode);
    } catch {
      setYears(getAcademicYears());
      setSelectedId(getAcademicYearId());
      setMode(getAcademicMode());
    }
  }, []);

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

  const onChange = async (id: number) => {
    setLoading(true);
    try {
      const result = await switchAcademicYear(id);
      setSelectedId(result.academic_year_id);
      setMode(result.mode);
      setYears(getAcademicYears());
    } finally {
      setLoading(false);
    }
  };

  if (!years.length) return null;

  return (
    <div className="flex w-full items-center gap-2 bg-amber-50 px-3 py-2 text-xs sm:px-4 lg:px-6">
      <span className="shrink-0 text-[var(--muted)]">سال تحصیلی:</span>
      <select
        value={selectedId ?? ""}
        disabled={loading}
        onChange={(e) => onChange(Number(e.target.value))}
        className="min-w-0 flex-1 rounded-lg border border-[var(--border)] bg-white px-2 py-1.5 text-xs font-medium"
      >
        {years.map((y) => (
          <option key={y.id} value={y.id}>
            {y.title}
            {y.is_current ? " (جاری)" : ""}
          </option>
        ))}
      </select>
      {isReadOnlyYear() || mode === "read_only" ? (
        <span className="shrink-0 rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-semibold text-slate-700">
          فقط مشاهده
        </span>
      ) : null}
    </div>
  );
}