"use client";

import { useState } from "react";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select } from "@/components/ui/Field";
import { apiDelete, apiPost, ApiError } from "@/lib/api";
import type { DocumentCatalogItem, FormFieldCatalogItem } from "@/components/pre-registration/CatalogPickers";

export function HoldingCatalogPanel({
  organizationId,
  documents,
  fields,
  onDocumentsChange,
  onFieldsChange,
}: {
  organizationId: number;
  documents: DocumentCatalogItem[];
  fields: FormFieldCatalogItem[];
  onDocumentsChange: (items: DocumentCatalogItem[]) => void;
  onFieldsChange: (items: FormFieldCatalogItem[]) => void;
}) {
  const [docForm, setDocForm] = useState({
    code: "",
    label: "",
    include_in_all: true,
    upload_required: true,
    locked_for_branch: true,
  });
  const [fieldForm, setFieldForm] = useState({
    field_key: "",
    label: "",
    type: "text",
    required: false,
    include_in_all: false,
    locked_for_branch: false,
  });
  const [error, setError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);

  const addDocument = async () => {
    if (!docForm.code.trim() || !docForm.label.trim()) {
      setError("کد سیستمی و عنوان مدرک الزامی است.");
      return;
    }
    setSaving(true);
    setError(null);
    try {
      const created = await apiPost<DocumentCatalogItem>("/pre-registration-document-catalog", {
        organization_id: organizationId,
        ...docForm,
        code: docForm.code.trim(),
        label: docForm.label.trim(),
      });
      onDocumentsChange([...documents, created]);
      setDocForm({ ...docForm, code: "", label: "" });
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در ذخیره مدرک");
    } finally {
      setSaving(false);
    }
  };

  const addField = async () => {
    if (!fieldForm.field_key.trim() || !fieldForm.label.trim()) {
      setError("کلید و عنوان سوال الزامی است.");
      return;
    }
    setSaving(true);
    setError(null);
    try {
      const created = await apiPost<FormFieldCatalogItem>("/pre-registration-form-field-catalog", {
        organization_id: organizationId,
        ...fieldForm,
        field_key: fieldForm.field_key.trim(),
        label: fieldForm.label.trim(),
      });
      onFieldsChange([...fields, created]);
      setFieldForm({ ...fieldForm, field_key: "", label: "" });
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در ذخیره سوال");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="grid gap-4 lg:grid-cols-2">
      {error ? <p className="col-span-full text-sm text-red-600">{error}</p> : null}
      <div className="rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
        <h3 className="text-sm font-bold">کاتالوگ مدارک هلدینگ</h3>
        <p className="mb-3 mt-1 text-xs leading-6 text-[var(--muted)]">
          اگر «در همه ثبت‌نام‌ها» و «قفل برای شعبه» فعال باشد، مدیر مدرسه نمی‌تواند آن را بردارد و اولیا باید فایل را بارگذاری کنند.
        </p>
        <ul className="mb-3 space-y-2 text-sm">
          {documents.map((item) => (
            <li key={item.id} className="flex items-start justify-between gap-2 rounded-xl bg-slate-50 px-3 py-2">
              <span>
                <strong>{item.label}</strong>
                <span className="mr-2 text-[11px] text-[var(--muted)]" dir="ltr">{item.code}</span>
                <span className="mt-0.5 block text-xs text-[var(--muted)]">
                  {item.include_in_all ? "همه ثبت‌نام‌ها · " : ""}
                  {item.upload_required ? "بارگذاری اجباری · " : ""}
                  {item.locked_for_branch ? "قفل شعبه" : "قابل انتخاب در شعبه"}
                </span>
              </span>
              <button
                type="button"
                className="text-xs text-red-600"
                onClick={async () => {
                  try {
                    await apiDelete(`/pre-registration-document-catalog/${item.id}`);
                    onDocumentsChange(documents.filter((row) => row.id !== item.id));
                  } catch (err) {
                    setError(err instanceof ApiError ? err.message : "حذف نشد");
                  }
                }}
              >
                حذف
              </button>
            </li>
          ))}
        </ul>
        <div className="grid gap-2">
          <Field label="عنوان">
            <Input value={docForm.label} onChange={(e) => setDocForm({ ...docForm, label: e.target.value })} />
          </Field>
          <Field label="کد سیستمی">
            <Input value={docForm.code} onChange={(e) => setDocForm({ ...docForm, code: e.target.value })} dir="ltr" />
          </Field>
          <label className="flex items-center gap-2 text-xs">
            <input
              type="checkbox"
              checked={docForm.include_in_all}
              onChange={(e) => setDocForm({ ...docForm, include_in_all: e.target.checked })}
            />
            در همه ثبت‌نام‌ها باشد
          </label>
          <label className="flex items-center gap-2 text-xs">
            <input
              type="checkbox"
              checked={docForm.upload_required}
              onChange={(e) => setDocForm({ ...docForm, upload_required: e.target.checked })}
            />
            بارگذاری برای عبور از مرحله اجباری است
          </label>
          <label className="flex items-center gap-2 text-xs">
            <input
              type="checkbox"
              checked={docForm.locked_for_branch}
              onChange={(e) => setDocForm({ ...docForm, locked_for_branch: e.target.checked })}
            />
            مدیر شعبه نتواند تغییر دهد
          </label>
          <Button type="button" disabled={saving} onClick={() => void addDocument()}>
            افزودن مدرک
          </Button>
        </div>
      </div>

      <div className="rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
        <h3 className="text-sm font-bold">کاتالوگ سوالات فرم آموزشی</h3>
        <p className="mb-3 mt-1 text-xs leading-6 text-[var(--muted)]">
          مدیر مدرسه می‌تواند این سوال‌ها را انتخاب کند یا سوال جدید بسازد.
        </p>
        <ul className="mb-3 space-y-2 text-sm">
          {fields.map((item) => (
            <li key={item.id} className="flex items-start justify-between gap-2 rounded-xl bg-slate-50 px-3 py-2">
              <span>
                <strong>{item.label}</strong>
                <span className="mt-0.5 block text-xs text-[var(--muted)]">
                  {item.include_in_all ? "در همه فرم‌ها · " : "قابل انتخاب · "}
                  {item.required ? "پاسخ اجباری" : "اختیاری"}
                </span>
              </span>
              <button
                type="button"
                className="text-xs text-red-600"
                onClick={async () => {
                  try {
                    await apiDelete(`/pre-registration-form-field-catalog/${item.id}`);
                    onFieldsChange(fields.filter((row) => row.id !== item.id));
                  } catch (err) {
                    setError(err instanceof ApiError ? err.message : "حذف نشد");
                  }
                }}
              >
                حذف
              </button>
            </li>
          ))}
        </ul>
        <div className="grid gap-2">
          <Field label="عنوان سوال">
            <Input value={fieldForm.label} onChange={(e) => setFieldForm({ ...fieldForm, label: e.target.value })} />
          </Field>
          <Field label="کلید سیستمی">
            <Input
              value={fieldForm.field_key}
              onChange={(e) => setFieldForm({ ...fieldForm, field_key: e.target.value })}
              dir="ltr"
            />
          </Field>
          <Field label="نوع">
            <Select
              value={fieldForm.type}
              onChange={(e) => setFieldForm({ ...fieldForm, type: e.target.value })}
            >
              <option value="text">متن کوتاه</option>
              <option value="textarea">متن بلند</option>
              <option value="number">عدد</option>
              <option value="select">انتخاب از لیست</option>
              <option value="date">تاریخ</option>
            </Select>
          </Field>
          <label className="flex items-center gap-2 text-xs">
            <input
              type="checkbox"
              checked={fieldForm.include_in_all}
              onChange={(e) => setFieldForm({ ...fieldForm, include_in_all: e.target.checked })}
            />
            در همه ثبت‌نام‌ها باشد
          </label>
          <label className="flex items-center gap-2 text-xs">
            <input
              type="checkbox"
              checked={fieldForm.required}
              onChange={(e) => setFieldForm({ ...fieldForm, required: e.target.checked })}
            />
            پاسخ اجباری
          </label>
          <label className="flex items-center gap-2 text-xs">
            <input
              type="checkbox"
              checked={fieldForm.locked_for_branch}
              onChange={(e) => setFieldForm({ ...fieldForm, locked_for_branch: e.target.checked })}
            />
            مدیر شعبه نتواند حذف کند
          </label>
          <Button type="button" disabled={saving} onClick={() => void addField()}>
            افزودن سوال
          </Button>
        </div>
      </div>
    </div>
  );
}