"use client";

import { useEffect, useMemo, useState } from "react";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select } from "@/components/ui/Field";
import { SearchableSelect } from "@/components/ui/SearchableSelect";
import { ApiError, BranchItem, apiGet, apiPatch, apiPost } from "@/lib/api";
import { isHoldingAdmin } from "@/lib/permissions";
import { getActiveBranchId } from "@/lib/session-context";
import {
  DriverField,
  DriverKey,
  ONLINE_CLASS_DRIVERS,
  OnlineClassProvider,
  driverLabel,
  driverOf,
} from "@/lib/online-class-drivers";

type FormState = {
  driver_key: DriverKey;
  title: string;
  base_url: string;
  username: string;
  password: string;
  api_token: string;
  folder_id: string;
  max_rooms: string;
  is_active: boolean;
  branch_id: string;
};

function formFromProvider(provider?: OnlineClassProvider | null): FormState {
  const folder = provider?.config?.folder_id;
  return {
    driver_key: (provider?.driver_key as DriverKey) || "adobe_connect",
    title: provider?.title ?? "",
    base_url: provider?.base_url ?? "",
    username: "",
    password: "",
    api_token: "",
    folder_id: typeof folder === "string" || typeof folder === "number" ? String(folder) : "",
    max_rooms: String(provider?.max_rooms ?? 0),
    is_active: provider ? provider.is_active !== false : true,
    branch_id: provider?.branch_id ? String(provider.branch_id) : "",
  };
}

export function ProviderServerForm({
  provider,
  onSaved,
  onCancel,
}: {
  provider?: OnlineClassProvider | null;
  onSaved: (saved: OnlineClassProvider) => void;
  onCancel: () => void;
}) {
  const editing = Boolean(provider);
  const holdingAdmin = isHoldingAdmin();
  const [form, setForm] = useState<FormState>(() => formFromProvider(provider));
  const [schools, setSchools] = useState<BranchItem[]>([]);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    apiGet<BranchItem[]>("/branches")
      .then((rows) => setSchools(Array.isArray(rows) ? rows : []))
      .catch(() => setSchools([]));
  }, []);

  const ownSchoolId = holdingAdmin ? null : getActiveBranchId();
  const ownSchool = schools.find((school) => school.id === ownSchoolId) ?? schools[0];

  const selected = useMemo(
    () =>
      driverOf(form.driver_key) ?? {
        key: form.driver_key,
        label: driverLabel(form.driver_key),
        fields: [] as DriverField[],
      },
    [form.driver_key],
  );

  const save = async () => {
    const title = form.title.trim();
    if (!title) {
      setError("عنوان سرور را وارد کنید.");
      return;
    }

    const branchId = holdingAdmin ? (form.branch_id ? Number(form.branch_id) : null) : ownSchoolId;
    if (!holdingAdmin && !branchId) {
      setError("مدرسه فعال مشخص نیست.");
      return;
    }

    const fields = selected.fields;
    if (!editing) {
      if (fields.includes("base_url") && !form.base_url.trim()) {
        setError("آدرس سرور را وارد کنید.");
        return;
      }
      if (fields.includes("username") && !form.username.trim()) {
        setError("نام کاربری را وارد کنید.");
        return;
      }
      if (fields.includes("password") && !form.password) {
        setError("رمز را وارد کنید.");
        return;
      }
      if (fields.includes("api_token") && !form.api_token.trim()) {
        setError("توکن یا کلید API را وارد کنید.");
        return;
      }
    }

    const maxRooms = Number(form.max_rooms);
    if (!Number.isInteger(maxRooms) || maxRooms < 0) {
      setError("سقف اتاق باید عدد صفر یا بزرگ‌تر باشد.");
      return;
    }

    const config: Record<string, unknown> = { ...(provider?.config ?? {}) };
    if (fields.includes("folder_id")) {
      const folderId = form.folder_id.trim();
      if (folderId && !/^\d+$/.test(folderId)) {
        setError("شناسه پوشه ادوبی باید عدد باشد. نامی مثل server1 پذیرفته نمی‌شود. اگر شناسه را نمی‌دانید، این فیلد را خالی بگذارید.");
        return;
      }
      if (folderId) config.folder_id = folderId;
      else delete config.folder_id;
    }

    const body: Record<string, unknown> = {
      title,
      max_rooms: maxRooms,
      is_active: form.is_active,
      config,
      branch_id: branchId,
    };
    if (selected.baseUrl) body.base_url = selected.baseUrl;
    else if (fields.includes("base_url")) body.base_url = form.base_url.trim() || null;
    if (!editing) body.driver_key = form.driver_key;
    else body.status = form.is_active ? "active" : "disabled";
    if (fields.includes("username") && form.username.trim()) body.username = form.username.trim();
    if (fields.includes("password") && form.password) body.password = form.password;
    if (fields.includes("api_token") && form.api_token.trim()) body.api_token = form.api_token.trim();

    setSaving(true);
    setError(null);
    try {
      const saved = provider
        ? await apiPatch<OnlineClassProvider>(`/online-class/providers/${provider.id}`, body)
        : await apiPost<OnlineClassProvider>("/online-class/providers", body);
      onSaved(saved);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در ذخیره سرور");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="rounded-xl border bg-white p-4">
      {error ? <p className="mb-3 text-sm text-red-600">{error}</p> : null}
      <div className="grid gap-4 md:grid-cols-2">
        <Field label="عنوان">
          <Input value={form.title} onChange={(event) => setForm({ ...form, title: event.target.value })} />
        </Field>
        {holdingAdmin ? (
          <Field label="مدرسه" hint="اگر مدرسه‌ای انتخاب نشود، سرور برای همهٔ مدارس در دسترس است.">
            <SearchableSelect
              value={form.branch_id}
              onChange={(value) => setForm({ ...form, branch_id: value })}
              emptyLabel="همه مدارس"
              placeholder="نام یا کد مدرسه"
              options={schools.map((school) => ({
                value: String(school.id),
                label: school.name,
                keywords: school.code,
              }))}
            />
          </Field>
        ) : (
          <Field label="مدرسه">
            <Input value={ownSchool?.name ?? "مدرسه فعال"} disabled />
          </Field>
        )}
        <Field label="سامانه" hint={editing ? "سامانه بعد از ثبت عوض نمی‌شود." : undefined}>
          <Select
            value={form.driver_key}
            disabled={editing}
            onChange={(event) =>
              setForm({
                ...form,
                driver_key: event.target.value as DriverKey,
                base_url: "",
                username: "",
                password: "",
                api_token: "",
                folder_id: "",
              })
            }
          >
            {ONLINE_CLASS_DRIVERS.map((driver) => (
              <option key={driver.key} value={driver.key}>
                {driver.label}
              </option>
            ))}
            {driverOf(form.driver_key) ? null : <option value={form.driver_key}>{driverLabel(form.driver_key)}</option>}
          </Select>
        </Field>
        {selected.fields.includes("base_url") ? (
          <Field label="آدرس سرور" hint="آدرس میزبان ادوبی کانکت، مثلاً https://meet.example.com">
            <Input
              dir="ltr"
              value={form.base_url}
              onChange={(event) => setForm({ ...form, base_url: event.target.value })}
              placeholder="https://"
            />
          </Field>
        ) : null}
        {selected.fields.includes("username") ? (
          <Field label="نام کاربری" hint={editing && provider?.has_credentials ? "خالی بماند تا مقدار قبلی حفظ شود." : undefined}>
            <Input
              dir="ltr"
              autoComplete="off"
              value={form.username}
              onChange={(event) => setForm({ ...form, username: event.target.value })}
              placeholder={editing && provider?.has_credentials ? "ثبت شده، برای تغییر بنویسید" : ""}
            />
          </Field>
        ) : null}
        {selected.fields.includes("password") ? (
          <Field label="رمز" hint={editing && provider?.has_credentials ? "خالی بماند تا مقدار قبلی حفظ شود." : undefined}>
            <Input
              dir="ltr"
              type="password"
              autoComplete="new-password"
              value={form.password}
              onChange={(event) => setForm({ ...form, password: event.target.value })}
              placeholder={editing && provider?.has_credentials ? "ثبت شده، برای تغییر بنویسید" : ""}
            />
          </Field>
        ) : null}
        {selected.fields.includes("api_token") ? (
          <Field
            label={form.driver_key === "skyroom" ? "کلید API" : "توکن"}
            hint={
              form.driver_key === "fanotech"
                ? "توکن Bearer پنل فنوتک. بعد از ذخیره نمایش داده نمی‌شود."
                : editing && provider?.has_credentials
                  ? "خالی بماند تا مقدار قبلی حفظ شود."
                  : "بعد از ذخیره نمایش داده نمی‌شود."
            }
          >
            <Input
              dir="ltr"
              type="password"
              autoComplete="off"
              value={form.api_token}
              onChange={(event) => setForm({ ...form, api_token: event.target.value })}
              placeholder={editing && provider?.has_credentials ? "ثبت شده، برای تغییر بنویسید" : ""}
            />
          </Field>
        ) : null}
        {selected.fields.includes("folder_id") ? (
          <Field
            label="شناسه پوشه"
            hint="اختیاری و فقط عدد، مثلاً ۱۱۰۰۳. اگر خالی باشد، پوشه جلسه‌های همان حساب ادوبی استفاده می‌شود."
          >
            <Input dir="ltr" value={form.folder_id} onChange={(event) => setForm({ ...form, folder_id: event.target.value })} />
          </Field>
        ) : null}
        <Field label="سقف اتاق همزمان" hint="صفر یعنی بدون سقف.">
          <Input
            dir="ltr"
            inputMode="numeric"
            value={form.max_rooms}
            onChange={(event) => setForm({ ...form, max_rooms: event.target.value })}
          />
        </Field>
        <Field label="وضعیت">
          <Select
            value={form.is_active ? "1" : "0"}
            onChange={(event) => setForm({ ...form, is_active: event.target.value === "1" })}
          >
            <option value="1">فعال</option>
            <option value="0">غیرفعال</option>
          </Select>
        </Field>
      </div>
      <div className="mt-4 flex gap-2">
        <Button type="button" onClick={save} disabled={saving}>
          {saving ? "در حال ذخیره…" : editing ? "ذخیره سرور" : holdingAdmin ? "ثبت سرور و ادامه به دسترسی" : "ثبت سرور"}
        </Button>
        <Button type="button" variant="secondary" onClick={onCancel} disabled={saving}>
          انصراف
        </Button>
      </div>
    </div>
  );
}