"use client";

import Link from "next/link";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Select } from "@/components/ui/Field";
import { ApiError, apiGet, apiPost } from "@/lib/api";
import type { ApplicationDetail } from "@/lib/types";

interface ClassRoomOption {
  id: number;
  name: string;
  grade_level_id: number;
  study_field_id?: number | null;
  study_field?: { id: number; name: string } | null;
}

interface StudyFieldOption {
  id: number;
  name: string;
}

interface ConvertResult {
  id: number;
  student_profile_id: number;
  class_room_id?: number | null;
}

export function ConvertToStudentBlock({
  detail,
  onConverted,
}: {
  detail: ApplicationDetail;
  onConverted: (result: ConvertResult) => void;
}) {
  const branchId = detail.branch?.id;
  const gradeLevelId = detail.grade_level?.id;

  const [classes, setClasses] = useState<ClassRoomOption[]>([]);
  const [studyFields, setStudyFields] = useState<StudyFieldOption[]>([]);
  const [loadingClasses, setLoadingClasses] = useState(false);
  const [classRoomId, setClassRoomId] = useState("");
  const [studyFieldId, setStudyFieldId] = useState(
    detail.study_field_id ? String(detail.study_field_id) : "",
  );
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const loadMeta = useCallback(async () => {
    if (!branchId || !gradeLevelId) {
      setClasses([]);
      setStudyFields([]);
      return;
    }
    setLoadingClasses(true);
    try {
      const [rows, fields] = await Promise.all([
        apiGet<ClassRoomOption[]>(
          `/class-rooms?branch_id=${branchId}&grade_level_id=${gradeLevelId}`,
        ),
        apiGet<StudyFieldOption[]>(
          `/study-fields?grade_level_id=${gradeLevelId}&branch_id=${branchId}`,
        ),
      ]);
      setClasses(rows);
      setStudyFields(fields);
      setStudyFieldId((current) => {
        if (current && fields.some((f) => String(f.id) === current)) return current;
        if (detail.study_field_id && fields.some((f) => f.id === detail.study_field_id)) {
          return String(detail.study_field_id);
        }
        return "";
      });
      setClassRoomId((current) =>
        rows.some((row) => String(row.id) === current) ? current : "",
      );
    } catch {
      setClasses([]);
      setStudyFields([]);
    } finally {
      setLoadingClasses(false);
    }
  }, [branchId, gradeLevelId, detail.study_field_id]);

  useEffect(() => {
    void loadMeta();
  }, [loadMeta]);

  const filteredClasses = useMemo(() => {
    if (!studyFieldId) return classes;
    return classes.filter(
      (row) => !row.study_field_id || String(row.study_field_id) === studyFieldId,
    );
  }, [classes, studyFieldId]);

  const classesHref = branchId ? `/schools/${branchId}/classes` : "/schools";
  const pendingHref = branchId
    ? `/students?branch_id=${branchId}&pending_placement=1`
    : "/students?pending_placement=1";

  const guidance = useMemo(() => {
    if (!branchId) {
      return "مدرسه درخواست مشخص نیست؛ تبدیل ممکن نیست.";
    }
    if (loadingClasses) return null;
    if (classes.length === 0) {
      return (
        <>
          برای این پایه هنوز کلاسی ثبت نشده است. ابتدا{" "}
          <Link href={classesHref} className="font-semibold text-primary underline">
            کلاس بسازید
          </Link>
          ، یا فعلاً بدون کلاس ثبت کنید تا دانش‌آموز در «منتظر کلاس‌بندی» بماند.
        </>
      );
    }
    return (
      <>
        می‌توانید کلاس را همین‌جا انتخاب کنید، یا بدون کلاس ثبت کنید و بعداً از{" "}
        <Link href={classesHref} className="font-semibold text-primary underline">
          صفحه کلاس‌ها / کلاس‌بندی
        </Link>{" "}
        اختصاص دهید.
      </>
    );
  }, [branchId, classes.length, classesHref, loadingClasses]);

  const convert = async (withClass: boolean) => {
    if (studyFields.length > 0 && !studyFieldId && !(withClass && classRoomId)) {
      setError("برای این پایه انتخاب رشته تحصیلی الزامی است.");
      return;
    }
    setSubmitting(true);
    setError(null);
    try {
      const body: Record<string, number | null> = {
        class_room_id: withClass && classRoomId ? Number(classRoomId) : null,
      };
      if (studyFieldId) body.study_field_id = Number(studyFieldId);
      const result = await apiPost<ConvertResult>(
        `/pre-registrations/${detail.id}/convert`,
        body,
      );
      onConverted(result);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در تبدیل به دانش‌آموز");
    } finally {
      setSubmitting(false);
    }
  };

  if (detail.status !== "approved") return null;

  return (
    <div className="rounded-2xl border border-emerald-200 bg-emerald-50/40 p-4 shadow-card">
      <div className="mb-3">
        <h3 className="text-sm font-bold text-emerald-900">تبدیل به دانش‌آموز</h3>
        <p className="mt-1 text-xs leading-6 text-emerald-900/80">
          پس از تأیید می‌توانید دانش‌آموز را با کلاس ثبت کنید یا بدون کلاس بگذارید تا در
          فهرست منتظر کلاس‌بندی بماند.
        </p>
      </div>

      {error ? <Alert tone="error">{error}</Alert> : null}

      {guidance ? (
        <Alert tone={classes.length === 0 ? "warning" : "info"}>{guidance}</Alert>
      ) : null}

      <ol className="mb-4 list-decimal space-y-1 pr-5 text-xs leading-6 text-slate-700">
        <li>در صورت نبود کلاس: ابتدا کلاس بسازید (لینک بالا).</li>
        <li>ثبت بدون کلاس → داشبورد مدرسه → منتظر کلاس‌بندی.</li>
        <li>سپس از کلاس‌بندی، دانش‌آموز را به کلاس اختصاص دهید.</li>
      </ol>

      <div className="space-y-3 rounded-xl border border-[var(--border)] bg-white p-3">
        {studyFields.length > 0 ? (
          <Field label="رشته تحصیلی">
            <Select
              value={studyFieldId}
              onChange={(e) => {
                setStudyFieldId(e.target.value);
                setClassRoomId("");
              }}
            >
              <option value="">انتخاب رشته</option>
              {studyFields.map((f) => (
                <option key={f.id} value={f.id}>
                  {f.name}
                </option>
              ))}
            </Select>
          </Field>
        ) : null}

        <Field label="کلاس (اختیاری)">
          <Select
            value={classRoomId}
            onChange={(e) => {
              const next = e.target.value;
              setClassRoomId(next);
              const room = filteredClasses.find((c) => String(c.id) === next);
              if (room?.study_field_id) {
                setStudyFieldId(String(room.study_field_id));
              }
            }}
            disabled={loadingClasses || filteredClasses.length === 0}
          >
            <option value="">
              {loadingClasses
                ? "در حال بارگذاری…"
                : filteredClasses.length
                  ? "انتخاب کلاس"
                  : "کلاسی برای این پایه/رشته نیست"}
            </option>
            {filteredClasses.map((row) => (
              <option key={row.id} value={row.id}>
                {row.name}
                {row.study_field?.name ? ` · ${row.study_field.name}` : ""}
              </option>
            ))}
          </Select>
        </Field>

        <div className="flex flex-wrap gap-2">
          <Button
            loading={submitting}
            disabled={!classRoomId}
            onClick={() => void convert(true)}
          >
            ثبت با کلاس
          </Button>
          <Button
            variant="secondary"
            loading={submitting}
            onClick={() => void convert(false)}
          >
            ثبت بدون کلاس (منتظر کلاس‌بندی)
          </Button>
          <Link
            href={pendingHref}
            className="inline-flex items-center rounded-xl bg-slate-100 px-3 py-2 text-xs font-semibold text-slate-700"
          >
            مشاهده منتظر کلاس‌بندی
          </Link>
        </div>
      </div>
    </div>
  );
}