"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { BrandingStyles } from "@/components/app/BrandingStyles";
import { useBranding } from "@/components/app/BrandingProvider";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import {
  AdminUser,
  ApiError,
  fetchSessionOptions,
  getStoredUser,
  getToken,
  isPortalRoleName,
  setSessionContextApi,
  switchAcademicYear,
} from "@/lib/api";
import { ImpersonationBanner } from "@/components/app/ImpersonationBanner";
import { isImpersonating, setSessionContext } from "@/lib/session-context";

export default function SelectContextPage() {
  const router = useRouter();
  const branding = useBranding();
  const [assignments, setAssignments] = useState<
    Array<{ id: number; role_name: string; role_label: string; branch_name: string | null }>
  >([]);
  const [years, setYears] = useState<Array<{ id: number; title: string; is_current: boolean }>>([]);
  const [assignmentId, setAssignmentId] = useState<number | null>(null);
  const [yearId, setYearId] = useState<number | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!getToken()) {
      router.replace("/login");
      return;
    }
    const stored = getStoredUser<AdminUser>();
    if (stored?.password_change_required && !isImpersonating()) {
      router.replace("/change-password");
      return;
    }
    const user = stored;
    const fromUser = (user?.role_assignments ?? []).filter((a) => !isPortalRoleName(a.role_name));
    if (fromUser.length) {
      setAssignments(
        fromUser.map((a) => ({
          id: a.id,
          role_name: a.role_name,
          role_label: a.role_label,
          branch_name: a.branch_name,
        })),
      );
      if (fromUser.length === 1) {
        setAssignmentId(fromUser[0].id);
      }
    }
    fetchSessionOptions()
      .then((data) => {
        const staff = data.assignments.filter((a) => !isPortalRoleName(a.role_name));
        if (staff.length) {
          setAssignments(
            staff.map((a) => ({
              id: a.id,
              role_name: a.role_name,
              role_label: a.role_label,
              branch_name: a.branch_name,
            })),
          );
        }
        setYears(data.academic_years);
        const current = data.academic_years.find((y) => y.is_current) ?? data.academic_years[0];
        setYearId(current?.id ?? null);
        if (staff.length === 1) {
          setAssignmentId(staff[0].id);
        }
      })
      .catch(() => null);
  }, []);

  const submit = async () => {
    if (!assignmentId || !yearId) {
      setError("نقش و سال تحصیلی را انتخاب کنید.");
      return;
    }
    setLoading(true);
    setError(null);
    try {
      const ctx = await setSessionContextApi(assignmentId, yearId);
      await switchAcademicYear(yearId);
      setSessionContext({
        active_role: ctx.active_role,
        active_role_label: ctx.active_role_label,
        active_branch_id: ctx.active_branch_id,
        active_branch_name: ctx.active_branch_name,
        active_academic_year_id: ctx.active_academic_year_id,
        assignment_id: ctx.assignment_id,
        permissions: ctx.permissions,
      });
      router.replace("/dashboard");
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-[var(--background)]">
      <ImpersonationBanner />
    <div className="px-4 py-10">
      <BrandingStyles branding={branding} />
      <div className="mx-auto max-w-2xl rounded-3xl border border-[var(--border)] bg-white p-6 shadow-card">
        <h1 className="text-xl font-bold">انتخاب نقش و سال تحصیلی</h1>
        <p className="mt-1 text-sm text-[var(--muted)]">برای ادامه، نقش و سال تحصیلی خود را مشخص کنید.</p>
        {error ? <div className="mt-4"><Alert tone="error">{error}</Alert></div> : null}

        <div className="mt-6 space-y-4">
          <div>
            <p className="mb-2 text-sm font-semibold">نقش</p>
            {assignments.length === 0 ? (
              <p className="text-sm text-[var(--muted)]">
                نقش کارمندی برای این حساب پیدا نشد. نقش اولیا فقط از پورتال در دسترس است.
              </p>
            ) : (
            <div className="grid gap-2 sm:grid-cols-2">
              {assignments.map((a) => (
                <button
                  key={a.id}
                  type="button"
                  onClick={() => setAssignmentId(a.id)}
                  className={`rounded-2xl border px-4 py-3 text-right text-sm transition ${
                    assignmentId === a.id
                      ? "border-primary bg-teal-50 font-semibold"
                      : "border-[var(--border)] hover:border-primary/40"
                  }`}
                >
                  <div>{a.role_label}</div>
                  <div className="text-xs text-[var(--muted)]">{a.branch_name ?? "کل هلدینگ"}</div>
                </button>
              ))}
            </div>
            )}
          </div>

          <div>
            <p className="mb-2 text-sm font-semibold">سال تحصیلی</p>
            <select
              value={yearId ?? ""}
              onChange={(e) => setYearId(Number(e.target.value))}
              className="w-full rounded-xl border border-[var(--border)] px-3 py-2.5 text-sm"
            >
              {years.map((y) => (
                <option key={y.id} value={y.id}>
                  {y.title} {y.is_current ? "(جاری)" : ""}
                </option>
              ))}
            </select>
          </div>

          <Button block loading={loading} onClick={submit} disabled={assignments.length === 0}>
            ادامه به داشبورد
          </Button>
        </div>
      </div>
    </div>
    </div>
  );
}