"use client";

import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { ServiceSectionCard, ServiceTile } from "@/components/app/ServiceTile";
import { DataTable, DataTableEmpty } from "@/components/layout/DataTable";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, Textarea } from "@/components/ui/Field";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import {
  AdminUser,
  ApiError,
  BranchItem,
  apiGet,
  apiPut,
  getStoredUser,
} from "@/lib/api";
import { PRE_REGISTRATION_SETTINGS_ITEMS, filterItems } from "@/lib/menu";
import { getActiveRole } from "@/lib/session-context";

const DEFAULT_ABANDONED_REMINDER_MESSAGE =
  "{full_name} عزیز، با توجه به اینکه کمتر از {hours} ساعت تا پایان مهلت ثبت‌نام باقی مانده، لطفاً نسبت به تکمیل ثبت‌نام خود از طریق لینک زیر اقدام بفرمایید:\n{continue_link}";

type SchoolRegistrationRow = {
  id: number;
  name: string;
  code: string;
  enabled: boolean;
};

function StatusBadge({ enabled }: { enabled: boolean }) {
  return (
    <span
      className={`rounded-full px-2 py-0.5 text-[11px] font-semibold ${
        enabled ? "bg-green-100 text-green-800" : "bg-slate-100 text-slate-600"
      }`}
    >
      {enabled ? "فعال" : "غیرفعال"}
    </span>
  );
}

function InlineToggle({
  branchId,
  enabled,
  disabled,
  onChange,
}: {
  branchId: number;
  enabled: boolean;
  disabled: boolean;
  onChange: (enabled: boolean) => void;
}) {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <label className="inline-flex cursor-pointer items-center gap-1.5 text-xs">
        <input
          type="radio"
          name={`registration-${branchId}`}
          checked={enabled}
          disabled={disabled}
          onChange={() => onChange(true)}
          className="shrink-0"
        />
        <span>فعال</span>
      </label>
      <label className="inline-flex cursor-pointer items-center gap-1.5 text-xs">
        <input
          type="radio"
          name={`registration-${branchId}`}
          checked={!enabled}
          disabled={disabled}
          onChange={() => onChange(false)}
          className="shrink-0"
        />
        <span>غیرفعال</span>
      </label>
    </div>
  );
}

export default function RegistrationSettingsPage() {
  const searchParams = useSearchParams();
  const contextBranchId = Number(searchParams.get("branchId") || 0) || null;

  const user = useMemo(() => getStoredUser<AdminUser>(), []);
  const role = getActiveRole();
  const isSuperAdmin = role === "super_admin" || role === "developer" || Boolean(user?.roles.includes("super_admin") || user?.roles.includes("developer"));

  const [rows, setRows] = useState<SchoolRegistrationRow[]>([]);
  const [foreignNationalsEnabled, setForeignNationalsEnabled] = useState(false);
  const [reminderEnabled, setReminderEnabled] = useState(false);
  const [reminderHours, setReminderHours] = useState("24");
  const [reminderMessage, setReminderMessage] = useState(DEFAULT_ABANDONED_REMINDER_MESSAGE);
  const [loading, setLoading] = useState(true);
  const [savingBranchId, setSavingBranchId] = useState<number | null>(null);
  const [savingOrg, setSavingOrg] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);

  const settingsItems = useMemo(() => {
    const roles = role ? [role] : user?.roles ?? [];
    return filterItems(PRE_REGISTRATION_SETTINGS_ITEMS, roles);
  }, [role, user?.roles]);

  const contextSchool = useMemo(
    () => rows.find((row) => row.id === contextBranchId) ?? null,
    [rows, contextBranchId],
  );

  const load = useCallback(async () => {
    if (!user) return;
    setLoading(true);
    setError(null);
    try {
      const branchList = await apiGet<BranchItem[]>("/branches");
      const params = new URLSearchParams();
      params.set("organization_id", String(user.organization_id));
      const keys = isSuperAdmin
        ? [
            "registration.enabled",
            "registration.foreign_nationals_enabled",
            "registration.abandoned_reminder_enabled",
            "registration.abandoned_reminder_hours",
            "registration.abandoned_reminder_message",
          ]
        : ["registration.enabled"];
      for (const key of keys) params.append("keys[]", key);
      for (const branch of branchList) params.append("branch_ids[]", String(branch.id));

      const resolved = await apiGet<{
        organization: Record<string, unknown>;
        branches: Record<string, Record<string, unknown>>;
      }>(`/settings/resolve-many?${params.toString()}`).catch(() => ({
        organization: {},
        branches: {},
      }));

      if (isSuperAdmin) {
        setForeignNationalsEnabled(Boolean(resolved.organization["registration.foreign_nationals_enabled"]));
        setReminderEnabled(Boolean(resolved.organization["registration.abandoned_reminder_enabled"]));
        setReminderHours(String(resolved.organization["registration.abandoned_reminder_hours"] ?? 24));
        setReminderMessage(
          String(resolved.organization["registration.abandoned_reminder_message"] || DEFAULT_ABANDONED_REMINDER_MESSAGE),
        );
      }

      setRows(
        branchList.map((branch) => ({
          id: branch.id,
          name: branch.name,
          code: branch.code,
          enabled: Boolean(resolved.branches[String(branch.id)]?.["registration.enabled"] ?? true),
        })),
      );
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری");
    } finally {
      setLoading(false);
    }
  }, [isSuperAdmin, user]);

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

  const saveOrgSettings = async () => {
    if (!user || !isSuperAdmin) return;
    setSavingOrg(true);
    setError(null);
    setMessage(null);
    try {
      const orgId = user.organization_id;
      const hours = Math.max(1, Number(reminderHours) || 24);
      await Promise.all([
        apiPut(`/organizations/${orgId}/settings`, {
          key: "registration.foreign_nationals_enabled",
          value: foreignNationalsEnabled,
          module: "sis",
        }),
        apiPut(`/organizations/${orgId}/settings`, {
          key: "registration.abandoned_reminder_enabled",
          value: reminderEnabled,
          module: "sis",
        }),
        apiPut(`/organizations/${orgId}/settings`, {
          key: "registration.abandoned_reminder_hours",
          value: hours,
          module: "sis",
        }),
        apiPut(`/organizations/${orgId}/settings`, {
          key: "registration.abandoned_reminder_message",
          value: reminderMessage.trim() || DEFAULT_ABANDONED_REMINDER_MESSAGE,
          module: "sis",
        }),
      ]);
      setMessage("تنظیمات سازمان ذخیره شد.");
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در ذخیره");
    } finally {
      setSavingOrg(false);
    }
  };

  const updateEnabled = async (branchId: number, enabled: boolean) => {
    const previous = rows.find((row) => row.id === branchId)?.enabled;
    if (previous === enabled) return;

    setSavingBranchId(branchId);
    setError(null);
    setRows((current) =>
      current.map((row) => (row.id === branchId ? { ...row, enabled } : row)),
    );

    try {
      await apiPut(`/branches/${branchId}/settings`, {
        key: "registration.enabled",
        value: enabled,
        inherits: false,
      });
    } catch (err) {
      setRows((current) =>
        current.map((row) =>
          row.id === branchId ? { ...row, enabled: previous ?? !enabled } : row,
        ),
      );
      setError(err instanceof ApiError ? err.message : "خطا در ذخیره");
    } finally {
      setSavingBranchId(null);
    }
  };

  return (
    <AppShell title="تنظیمات پیش‌ثبت‌نام" subtitle="فعال‌سازی و میانبرهای پیش‌ثبت‌نام">
      {loading && rows.length === 0 ? (
        <PageContentSkeleton rows={4} />
      ) : (
      <div className="space-y-4">
        {error ? <Alert tone="error">{error}</Alert> : null}
        {message ? <Alert tone="success">{message}</Alert> : null}

        {contextBranchId && contextSchool ? (
          <Alert tone="info">
            این صفحه تنظیمات کلی پیش‌ثبت‌نام است. برای مدیریت قوانین و شرایط{" "}
            <span className="font-bold">پایه‌های مدرسه {contextSchool.name}</span>
            {contextSchool.code ? (
              <>
                {" "}
                <span className="text-[var(--muted)]">({contextSchool.code})</span>
              </>
            ) : null}{" "}
            از دکمه «مدیریت» در ردیف همان مدرسه یا{" "}
            <Link
              href={`/pre-registration/grades?branchId=${contextBranchId}`}
              className="font-semibold underline"
            >
              صفحه قوانین پایه‌ها
            </Link>{" "}
            استفاده کنید.
          </Alert>
        ) : null}

        <ServiceSectionCard title="تنظیمات مرتبط" tone="secondary">
          {settingsItems.map((item) => (
            <ServiceTile key={item.id} item={item} />
          ))}
        </ServiceSectionCard>

        {isSuperAdmin ? (
          <div className="rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card sm:p-5">
            <h2 className="mb-1 text-sm font-bold">تنظیمات سازمان</h2>
            <p className="mb-4 text-xs leading-6 text-[var(--muted)]">
              این موارد برای همه مدارس سازمان اعمال می‌شود.
            </p>
            <div className="space-y-4">
              <label className="flex items-start gap-3 rounded-xl border border-[var(--border)] p-3 text-sm">
                <input
                  type="checkbox"
                  className="mt-1"
                  checked={foreignNationalsEnabled}
                  onChange={(e) => setForeignNationalsEnabled(e.target.checked)}
                />
                <span>
                  <span className="font-semibold">ثبت‌نام اتباع خارجی</span>
                  <span className="mt-1 block text-xs leading-6 text-[var(--muted)]">
                    با فعال بودن، گزینه «اتباع هستم» در پورتال پیش‌ثبت‌نام نمایش داده می‌شود.
                  </span>
                </span>
              </label>

              <label className="flex items-start gap-3 rounded-xl border border-[var(--border)] p-3 text-sm">
                <input
                  type="checkbox"
                  className="mt-1"
                  checked={reminderEnabled}
                  onChange={(e) => setReminderEnabled(e.target.checked)}
                />
                <span>
                  <span className="font-semibold">یادآوری ثبت‌نام ناتمام (SMS)</span>
                  <span className="mt-1 block text-xs leading-6 text-[var(--muted)]">
                    برای درخواست‌های رها شده پس از مهلت تعیین‌شده پیامک ارسال می‌شود.
                  </span>
                </span>
              </label>

              <div className="grid gap-3 sm:grid-cols-2">
                <Field label="مهلت یادآوری (ساعت)">
                  <Input
                    type="number"
                    min={1}
                    value={reminderHours}
                    onChange={(e) => setReminderHours(e.target.value)}
                  />
                </Field>
              </div>

              <Field label="متن پیامک یادآوری">
                <Textarea
                  rows={4}
                  value={reminderMessage}
                  onChange={(e) => setReminderMessage(e.target.value)}
                />
                <p className="mt-1 text-xs text-[var(--muted)]">
                  متغیرها: {"{full_name}"}، {"{hours}"}، {"{continue_link}"}
                </p>
              </Field>

              <Button loading={savingOrg} onClick={() => void saveOrgSettings()}>
                ذخیره تنظیمات سازمان
              </Button>
            </div>
          </div>
        ) : null}

        {!user ? (
          <Alert tone="warning">برای مشاهده تنظیمات وارد شوید.</Alert>
        ) : rows.length === 0 ? (
          <Alert tone="warning">
            مدرسه‌ای در دسترس نیست. از صفحه{" "}
            <Link href="/select-context" className="font-semibold underline">
              انتخاب زمینه
            </Link>{" "}
            نقش و مدرسه را مشخص کنید.
          </Alert>
        ) : (
          <div className="space-y-3">
            <p className="text-sm text-[var(--muted)]">
              وضعیت پیش‌ثبت‌نام هر مدرسه را مستقیماً تغییر دهید. برای تنظیم قوانین پایه‌ها از دکمه
              مدیریت استفاده کنید.
            </p>

            <DataTable
              loading={loading}
              columns={[
                { key: "idx", label: "#" },
                { key: "school", label: "مدرسه" },
                { key: "status", label: "وضعیت فعلی" },
                { key: "toggle", label: "فعال‌سازی" },
                { key: "ops", label: "عملیات" },
              ]}
            >
              {rows.length === 0 ? (
                <DataTableEmpty colSpan={5} message="مدرسه‌ای یافت نشد." />
              ) : (
                rows.map((row, index) => (
                  <tr key={row.id} className="hover:bg-slate-50">
                    <td className="px-3 py-3">{index + 1}</td>
                    <td className="px-3 py-3">
                      <div className="font-medium text-slate-900">{row.name}</div>
                      <div className="text-xs text-[var(--muted)]">{row.code}</div>
                    </td>
                    <td className="px-3 py-3">
                      <StatusBadge enabled={row.enabled} />
                    </td>
                    <td className="px-3 py-3">
                      <InlineToggle
                        branchId={row.id}
                        enabled={row.enabled}
                        disabled={savingBranchId === row.id}
                        onChange={(enabled) => void updateEnabled(row.id, enabled)}
                      />
                    </td>
                    <td className="px-3 py-3">
                      <Link href={`/pre-registration/grades?branchId=${row.id}`}>
                        <Button variant="secondary" className="!px-3 !py-1.5 text-xs">
                          مدیریت
                        </Button>
                      </Link>
                    </td>
                  </tr>
                ))
              )}
            </DataTable>
          </div>
        )}
      </div>
      )}
    </AppShell>
  );
}