"use client";

import Link from "next/link";
import { useMemo } from "react";
import { DocumentListEditor } from "@/components/pre-registration/DocumentListEditor";
import {
  CatalogDocumentPicker,
  CatalogFormFieldPicker,
  type DocumentCatalogItem,
  type FormFieldCatalogItem,
} from "@/components/pre-registration/CatalogPickers";
import { FormFieldListEditor } from "@/components/pre-registration/FormFieldListEditor";
import { MapPicker } from "@/components/schools/MapPicker";
import { Alert } from "@/components/ui/Alert";
import { Field, Input, Select, Textarea } from "@/components/ui/Field";
import { MoneyInput } from "@/components/ui/MoneyInput";
import { PersianDatePicker } from "@/components/ui/PersianDatePicker";
import { describeAgeEligibility, parseAcademicYearStart } from "@/lib/age-eligibility";
import { GradeRulesDraft } from "@/lib/rule-set";

export const GRADE_RULE_STEPS = [
  { id: 1, label: "فعال‌سازی" },
  { id: 2, label: "شرایط" },
  { id: 3, label: "قوانین" },
  { id: 4, label: "مدارک" },
  { id: 5, label: "فرم آموزشی" },
  { id: 6, label: "پرداخت" },
  { id: 7, label: "ظرفیت" },
  { id: 8, label: "مرحله بعد" },
] as const;

type Props = {
  step: number;
  draft: GradeRulesDraft;
  onDraftChange: (updater: (prev: GradeRulesDraft) => GradeRulesDraft) => void;
  readOnly?: boolean;
  branchId?: number | null;
  schoolType?: "boys" | "girls" | null;
  selectedGradeName?: string;
  showBranchPaymentLink?: boolean;
  showBranchExamMap?: boolean;
  /** سال تحصیلی جاری — برای محاسبه بازه متولدین بر اساس ۱ مهر */
  academicYearTitle?: string | null;
  documentCatalog?: DocumentCatalogItem[];
  formFieldCatalog?: FormFieldCatalogItem[];
  fieldErrors?: Record<string, string>;
};

export function GradeRulesWizard({
  step,
  draft,
  onDraftChange,
  readOnly = false,
  branchId,
  schoolType,
  selectedGradeName,
  showBranchPaymentLink = false,
  showBranchExamMap = false,
  academicYearTitle,
  documentCatalog = [],
  formFieldCatalog = [],
  fieldErrors = {},
}: Props) {
  const canAllowBoys = schoolType !== "girls";
  const canAllowGirls = schoolType !== "boys";
  const refYear = parseAcademicYearStart(academicYearTitle);

  const ageHint = useMemo(() => {
    if (!refYear) return null;
    return describeAgeEligibility(refYear, draft.min_age, draft.max_age);
  }, [refYear, draft.min_age, draft.max_age]);

  const patch = (partial: Partial<GradeRulesDraft>) => {
    onDraftChange((prev) => ({ ...prev, ...partial }));
  };

  const gradeLabel = selectedGradeName ?? "—";

  return (
    <fieldset disabled={readOnly} className="min-w-0 border-0 p-0">
      {step === 1 ? (
        <div className="grid gap-4">
          <div className="rounded-xl bg-slate-50 px-4 py-3">
            <p className="text-xs text-[var(--muted)]">پایه در حال ویرایش</p>
            <p className="mt-1 text-base font-bold">{gradeLabel}</p>
          </div>
          <label className="flex items-start gap-3 rounded-xl border border-[var(--border)] p-3 text-sm">
            <input
              type="checkbox"
              className="mt-1"
              checked={draft.enabled}
              onChange={(e) =>
                patch({ enabled: e.target.checked, is_active: e.target.checked })
              }
            />
            <span>
              <span className="font-semibold">پیش‌ثبت‌نام این پایه در پورتال باز باشد</span>
              <span className="mt-1 block text-xs leading-6 text-[var(--muted)]">
                اگر خاموش باشد، اولیا نمی‌توانند برای این پایه درخواست ثبت کنند. با روشن بودن،
                قوانین همین صفحه اعمال می‌شود.
              </span>
            </span>
          </label>
        </div>
      ) : null}

      {step === 2 ? (
        <div className="grid gap-5">
          <div>
            <p className="mb-2 text-sm font-semibold">جنسیت مجاز برای ثبت‌نام</p>
            <p className="mb-3 text-xs leading-6 text-[var(--muted)]">
              مشخص کنید چه جنسیتی می‌تواند برای این پایه پیش‌ثبت‌نام کند. حداقل یکی را انتخاب
              کنید.
            </p>
            {schoolType === "boys" ? (
              <Alert tone="warning">
                این مدرسه از نوع «پسرانه» است؛ بنابراین فقط پسر می‌تواند پیش‌ثبت‌نام کند و گزینه
                دختر قابل انتخاب نیست.
                {branchId ? (
                  <>
                    {" "}
                    برای پذیرش دختر، نوع مدرسه را در{" "}
                    <Link href={`/schools/${branchId}/edit`} className="font-semibold underline">
                      تنظیمات مدرسه
                    </Link>{" "}
                    به «مختلط» یا «دخترانه» تغییر دهید.
                  </>
                ) : null}
              </Alert>
            ) : null}
            {schoolType === "girls" ? (
              <Alert tone="warning">
                این مدرسه از نوع «دخترانه» است؛ بنابراین فقط دختر می‌تواند پیش‌ثبت‌نام کند و
                گزینه پسر قابل انتخاب نیست.
                {branchId ? (
                  <>
                    {" "}
                    برای پذیرش پسر، نوع مدرسه را در{" "}
                    <Link href={`/schools/${branchId}/edit`} className="font-semibold underline">
                      تنظیمات مدرسه
                    </Link>{" "}
                    به «مختلط» یا «پسرانه» تغییر دهید.
                  </>
                ) : null}
              </Alert>
            ) : null}
            <div className={`flex flex-wrap gap-3 ${schoolType ? "mt-3" : ""}`}>
              <label
                className={`flex items-center gap-2 rounded-xl border px-4 py-3 text-sm ${
                  !canAllowBoys
                    ? "cursor-not-allowed opacity-45"
                    : draft.allowBoys
                      ? "cursor-pointer border-primary/40 bg-primary/5"
                      : "cursor-pointer border-[var(--border)]"
                }`}
              >
                <input
                  type="checkbox"
                  checked={draft.allowBoys && canAllowBoys}
                  disabled={!canAllowBoys}
                  onChange={(e) => patch({ allowBoys: e.target.checked })}
                />
                پسر
                {!canAllowBoys ? (
                  <span className="text-[11px] text-[var(--muted)]">(غیرمجاز برای این مدرسه)</span>
                ) : null}
              </label>
              <label
                className={`flex items-center gap-2 rounded-xl border px-4 py-3 text-sm ${
                  !canAllowGirls
                    ? "cursor-not-allowed opacity-45"
                    : draft.allowGirls
                      ? "cursor-pointer border-primary/40 bg-primary/5"
                      : "cursor-pointer border-[var(--border)]"
                }`}
              >
                <input
                  type="checkbox"
                  checked={draft.allowGirls && canAllowGirls}
                  disabled={!canAllowGirls}
                  onChange={(e) => patch({ allowGirls: e.target.checked })}
                />
                دختر
                {!canAllowGirls ? (
                  <span className="text-[11px] text-[var(--muted)]">(غیرمجاز برای این مدرسه)</span>
                ) : null}
              </label>
            </div>
            {fieldErrors.gender ? (
              <p className="mt-2 text-xs text-red-600">{fieldErrors.gender}</p>
            ) : !(canAllowBoys && draft.allowBoys) && !(canAllowGirls && draft.allowGirls) ? (
              <p className="mt-2 text-xs text-red-600">حداقل یک گزینه باید انتخاب شود.</p>
            ) : (
              <p className="mt-2 text-xs text-[var(--muted)]">
                مجاز:{" "}
                {[
                  canAllowBoys && draft.allowBoys ? "پسر" : null,
                  canAllowGirls && draft.allowGirls ? "دختر" : null,
                ]
                  .filter(Boolean)
                  .join(" و ")}
              </p>
            )}
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            <Field
              label="حداقل سن (در ۱ مهر)"
              hint="کوچک‌ترین سن مجاز در اول مهر سال تحصیلی"
              error={fieldErrors.min_age}
            >
              <Input
                type="number"
                min={0}
                max={30}
                value={draft.min_age}
                onChange={(e) => patch({ min_age: e.target.value })}
                disabled={readOnly}
              />
            </Field>
            <Field
              label="حداکثر سن (در ۱ مهر)"
              hint="بزرگ‌ترین سن مجاز در اول مهر سال تحصیلی"
            >
              <Input
                type="number"
                min={0}
                max={30}
                value={draft.max_age}
                onChange={(e) => patch({ max_age: e.target.value })}
                disabled={readOnly}
              />
            </Field>
          </div>
          {ageHint ? (
            <Alert tone={ageHint.includes("نباید") ? "warning" : "info"}>{ageHint}</Alert>
          ) : (
            <p className="text-xs text-[var(--muted)]">
              سن بر اساس ۱ مهر سال تحصیلی محاسبه می‌شود؛ متقاضی در هر ماهی که ثبت‌نام کند،
              eligibility با همین مبنا بررسی می‌شود.
            </p>
          )}

          <Field label="حداقل معدل سال قبل (اختیاری)">
            <Input
              type="number"
              value={draft.min_previous_gpa}
              onChange={(e) => patch({ min_previous_gpa: e.target.value })}
            />
          </Field>
          <Field label="اگر معدل کمتر از حد بود">
            <Select
              value={draft.min_previous_gpa_mode}
              onChange={(e) =>
                patch({ min_previous_gpa_mode: e.target.value as "block" | "warn" })
              }
            >
              <option value="warn">فقط هشدار بدهد و اجازه ادامه بدهد</option>
              <option value="block">ثبت‌نام را مسدود کند</option>
            </Select>
          </Field>
        </div>
      ) : null}

      {step === 3 ? (
        <Field
          label="متن شرایط (هر خط یک مورد)"
          hint="این متن در پورتال به اولیا نشان داده می‌شود"
        >
          <Textarea
            rows={6}
            value={draft.rules_text}
            onChange={(e) => patch({ rules_text: e.target.value })}
          />
        </Field>
      ) : null}

      {step === 4 ? (
        <div className="rounded-2xl border border-[var(--border)] bg-slate-50/80 p-4">
          <h3 className="text-sm font-bold">مدارک مورد نیاز</h3>
          <p className="mb-3 mt-1 text-xs leading-6 text-[var(--muted)]">
            مدارک تعریف‌شده توسط مدیر هلدینگ را انتخاب کنید. موارد اجباری سراسری قابل تغییر نیستند.
            مدرک مخصوص این مدرسه را جداگانه اضافه کنید.
          </p>
          <CatalogDocumentPicker
            catalog={documentCatalog}
            selectedIds={draft.selectedDocumentCatalogIds}
            onChange={(selectedDocumentCatalogIds) => patch({ selectedDocumentCatalogIds })}
          />
          <div className="mt-4 border-t border-[var(--border)] pt-4">
            <p className="mb-2 text-xs font-semibold">مدارک مخصوص این مدرسه</p>
            <DocumentListEditor
              items={draft.documents}
              onChange={(documents) => patch({ documents })}
            />
          </div>
        </div>
      ) : null}

      {step === 5 ? (
        <div className="rounded-2xl border border-[var(--border)] bg-slate-50/80 p-4">
          <h3 className="text-sm font-bold">سوالات فرم آموزشی</h3>
          <p className="mb-3 mt-1 text-xs leading-6 text-[var(--muted)]">
            می‌توانید از سوال‌های کاتالوگ هلدینگ استفاده کنید یا سوال جدید مخصوص این پایه بسازید.
          </p>
          <CatalogFormFieldPicker
            catalog={formFieldCatalog}
            selectedIds={draft.selectedFormFieldCatalogIds}
            onChange={(selectedFormFieldCatalogIds) => patch({ selectedFormFieldCatalogIds })}
          />
          <div className="mt-4 border-t border-[var(--border)] pt-4">
            <p className="mb-2 text-xs font-semibold">سوال‌های مخصوص این مدرسه</p>
            <FormFieldListEditor
              items={draft.formFields}
              onChange={(formFields) => patch({ formFields })}
            />
          </div>
        </div>
      ) : null}

      {step === 6 ? (
        <div className="grid gap-4">
          <p className="text-xs leading-6 text-[var(--muted)]">
            فقط مبلغ این پایه را اینجا تنظیم کنید.
            {showBranchPaymentLink && branchId ? (
              <>
                {" "}
                فعال بودن درگاه/کارت‌به‌کارت و اطلاعات حساب در{" "}
                <Link
                  href={`/pre-registration/payment?branchId=${branchId}`}
                  className="font-semibold text-primary underline"
                >
                  پرداخت و درگاه
                </Link>{" "}
                است.
              </>
            ) : (
              " فعال بودن درگاه/کارت‌به‌کارت و اطلاعات حساب در تنظیمات پرداخت مدرسه است."
            )}
          </p>
          <label className="flex items-center gap-2 text-sm">
            <input
              type="checkbox"
              checked={draft.admission_free}
              onChange={(e) => patch({ admission_free: e.target.checked })}
            />
            برای این پایه رایگان باشد
          </label>
          {!draft.admission_free ? (
            <Field label="مبلغ پیش‌ثبت‌نام این پایه">
              <MoneyInput
                value={draft.admission_amount}
                onChange={(admission_amount) => patch({ admission_amount })}
                disabled={readOnly}
              />
            </Field>
          ) : null}
        </div>
      ) : null}

      {step === 7 ? (
        <div className="grid gap-4">
          <p className="text-xs leading-6 text-[var(--muted)]">
            سقف پذیرش این پایه و رفتار لیست انتظار بعد از پر شدن ظرفیت.
          </p>
          <Field
            label="ظرفیت این پایه (نفر)"
            hint="خالی بگذارید تا ظرفیت نامحدود در نظر گرفته شود."
          >
            <Input
              type="number"
              value={draft.seat_quota}
              onChange={(e) => patch({ seat_quota: e.target.value })}
            />
          </Field>
          <label className="flex items-center gap-2 text-sm">
            <input
              type="checkbox"
              checked={draft.waitlist_enabled}
              onChange={(e) => patch({ waitlist_enabled: e.target.checked })}
            />
            بعد از پر شدن ظرفیت، لیست انتظار فعال باشد
          </label>
          {draft.waitlist_enabled ? (
            <Field label="سقف لیست انتظار (نفر)" hint="خالی = بدون سقف">
              <Input
                type="number"
                value={draft.waitlist_max}
                onChange={(e) => patch({ waitlist_max: e.target.value })}
              />
            </Field>
          ) : null}
        </div>
      ) : null}

      {step === 8 ? (
        <div className="grid gap-5">
          <div>
            <h3 className="text-sm font-bold">مرحله بعد از ثبت‌نام</h3>
            <p className="mb-3 mt-1 text-xs leading-6 text-[var(--muted)]">
              مشخص کنید بعد از تکمیل ثبت‌نام، با اولیا تماس گرفته می‌شود یا آزمون ورودی دارد.
            </p>
            <div className="grid gap-2 sm:grid-cols-2">
              <label className="flex cursor-pointer items-start gap-3 rounded-xl border border-[var(--border)] p-3 text-sm has-[:checked]:border-primary has-[:checked]:bg-primary/5">
                <input
                  type="radio"
                  className="mt-1"
                  name="followupMode"
                  checked={draft.followupMode === "contact_later"}
                  onChange={() => patch({ followupMode: "contact_later" })}
                />
                <span>
                  <span className="block font-semibold">بعداً تماس می‌گیریم</span>
                  <span className="mt-1 block text-xs text-[var(--muted)]">
                    متنی که اولیا بعد از ثبت‌نام می‌بینند را وارد کنید.
                  </span>
                </span>
              </label>
              <label className="flex cursor-pointer items-start gap-3 rounded-xl border border-[var(--border)] p-3 text-sm has-[:checked]:border-primary has-[:checked]:bg-primary/5">
                <input
                  type="radio"
                  className="mt-1"
                  name="followupMode"
                  checked={draft.followupMode === "exam"}
                  onChange={() => patch({ followupMode: "exam" })}
                />
                <span>
                  <span className="block font-semibold">آزمون ورودی دارد</span>
                  <span className="mt-1 block text-xs text-[var(--muted)]">
                    مکان و روز آزمون همین‌جا مشخص می‌شود.
                  </span>
                </span>
              </label>
            </div>
          </div>

          {draft.followupMode === "contact_later" ? (
            <Field
              label="متن پیام برای اولیا"
              hint="اختیاری است. این متن در پایان ثبت‌نام به کاربر نشان داده می‌شود."
            >
              <Textarea
                rows={5}
                value={draft.contactLaterMessage}
                onChange={(e) => patch({ contactLaterMessage: e.target.value })}
                placeholder="مثلاً: کارشناسان مدرسه طی چند روز آینده برای هماهنگی مراحل بعدی با شما تماس می‌گیرند."
              />
            </Field>
          ) : (
            <>
              <div>
                <h3 className="text-sm font-bold">محل برگزاری آزمون</h3>
                <p className="mb-3 mt-1 text-xs leading-6 text-[var(--muted)]">
                  {showBranchExamMap ? (
                    <>
                      برای پایه {gradeLabel} ذخیره می‌شود. محل مشترک مدرسه هم هم‌زمان به‌روز
                      می‌شود.
                    </>
                  ) : (
                    <>
                      اطلاعات محل آزمون در قوانین {gradeLabel ? `پایه ${gradeLabel}` : "این پایه"}{" "}
                      ذخیره می‌شود.
                    </>
                  )}
                </p>
                <div className="grid gap-3 sm:grid-cols-2">
                  <Field label="عنوان محل" error={fieldErrors.examTitle}>
                    <Input
                      value={draft.examTitle}
                      onChange={(e) => patch({ examTitle: e.target.value })}
                      placeholder="مثلاً سالن اجتماعات"
                    />
                  </Field>
                  <Field label="آدرس">
                    <Input
                      value={draft.examAddress}
                      onChange={(e) => patch({ examAddress: e.target.value })}
                    />
                  </Field>
                  {showBranchExamMap && !readOnly ? (
                    <div className="sm:col-span-2">
                      <MapPicker
                        lat={draft.examLat !== "" ? Number(draft.examLat) : null}
                        lng={draft.examLng !== "" ? Number(draft.examLng) : null}
                        onChange={(lat, lng) => {
                          patch({ examLat: String(lat), examLng: String(lng) });
                        }}
                      />
                    </div>
                  ) : null}
                  {showBranchExamMap && readOnly && (draft.examLat || draft.examLng) ? (
                    <div className="sm:col-span-2 grid gap-3 sm:grid-cols-2">
                      <Field label="عرض جغرافیایی">
                        <Input value={draft.examLat} readOnly />
                      </Field>
                      <Field label="طول جغرافیایی">
                        <Input value={draft.examLng} readOnly />
                      </Field>
                    </div>
                  ) : null}
                  <div className="sm:col-span-2">
                    <Field label="توضیحات">
                      <Textarea
                        rows={2}
                        value={draft.examNotes}
                        onChange={(e) => patch({ examNotes: e.target.value })}
                      />
                    </Field>
                  </div>
                </div>
              </div>
              <div>
                <h3 className="text-sm font-bold">زمان آزمون این پایه</h3>
                <p className="mb-3 mt-1 text-xs text-[var(--muted)]">
                  {showBranchExamMap
                    ? `برای پایه ${gradeLabel} جداگانه تعریف می‌شود.`
                    : `زمان‌بندی آزمون برای ${gradeLabel ? `پایه ${gradeLabel}` : "این پایه"} در قوانین ذخیره می‌شود.`}
                </p>
                <div className="grid gap-3 sm:grid-cols-2">
                  <Field label="عنوان زمان‌بندی">
                    <Input
                      value={draft.examScheduleTitle}
                      onChange={(e) => patch({ examScheduleTitle: e.target.value })}
                    />
                  </Field>
                  <div />
                  <Field label="شروع" error={fieldErrors.examStartsAt}>
                    <PersianDatePicker
                      value={draft.examStartsAt || undefined}
                      onChange={(v) => patch({ examStartsAt: v })}
                    />
                  </Field>
                  <Field label="پایان">
                    <PersianDatePicker
                      value={draft.examEndsAt || undefined}
                      onChange={(v) => patch({ examEndsAt: v })}
                    />
                  </Field>
                </div>
              </div>
            </>
          )}
        </div>
      ) : null}
    </fieldset>
  );
}