"use client";

export type DocumentCatalogItem = {
  id: number;
  code: string | null;
  label: string;
  include_in_all: boolean;
  upload_required: boolean;
  locked_for_branch: boolean;
};

export type FormFieldCatalogItem = {
  id: number;
  field_key: string;
  label: string;
  type: string;
  required: boolean;
  include_in_all: boolean;
  locked_for_branch: boolean;
  options?: Array<{ value: string; label: string }> | null;
};

export function CatalogDocumentPicker({
  catalog,
  selectedIds,
  onChange,
}: {
  catalog: DocumentCatalogItem[];
  selectedIds: number[];
  onChange: (ids: number[]) => void;
}) {
  if (catalog.length === 0) {
    return <p className="text-xs text-[var(--muted)]">کاتالوگ هلدینگ هنوز مدرکی ندارد.</p>;
  }

  const toggle = (id: number, locked: boolean, includeAll: boolean) => {
    if (locked || includeAll) return;
    onChange(
      selectedIds.includes(id) ? selectedIds.filter((x) => x !== id) : [...selectedIds, id],
    );
  };

  return (
    <div className="space-y-2">
      {catalog.map((item) => {
        const forced = item.include_in_all || item.locked_for_branch;
        const checked = forced || selectedIds.includes(item.id);
        return (
          <label
            key={item.id}
            className={`flex items-start gap-2 rounded-xl border px-3 py-2 text-sm ${
              forced ? "border-[var(--border)] bg-white" : "border-[var(--border)] bg-slate-50"
            }`}
          >
            <input
              type="checkbox"
              className="mt-1"
              checked={checked}
              disabled={forced}
              onChange={() => toggle(item.id, item.locked_for_branch, item.include_in_all)}
            />
            <span>
              <span className="font-semibold">{item.label}</span>
              {item.code ? (
                <span className="mr-2 text-[11px] text-[var(--muted)]" dir="ltr">
                  {item.code}
                </span>
              ) : null}
              <span className="mt-0.5 block text-xs text-[var(--muted)]">
                {item.include_in_all ? "در همه ثبت‌نام‌ها هست. " : ""}
                {item.upload_required ? "بارگذاری برای عبور از مرحله اجباری است. " : "بارگذاری اختیاری است. "}
                {forced ? "مدیر مدرسه نمی‌تواند این مورد را تغییر دهد." : ""}
              </span>
            </span>
          </label>
        );
      })}
    </div>
  );
}

export function CatalogFormFieldPicker({
  catalog,
  selectedIds,
  onChange,
}: {
  catalog: FormFieldCatalogItem[];
  selectedIds: number[];
  onChange: (ids: number[]) => void;
}) {
  if (catalog.length === 0) {
    return <p className="text-xs text-[var(--muted)]">کاتالوگ سوال هلدینگ خالی است. می‌توانید سوال جدید اضافه کنید.</p>;
  }

  const toggle = (id: number, locked: boolean, includeAll: boolean) => {
    if (locked || includeAll) return;
    onChange(
      selectedIds.includes(id) ? selectedIds.filter((x) => x !== id) : [...selectedIds, id],
    );
  };

  return (
    <div className="space-y-2">
      {catalog.map((item) => {
        const forced = item.include_in_all || item.locked_for_branch;
        const checked = forced || selectedIds.includes(item.id);
        return (
          <label
            key={item.id}
            className="flex items-start gap-2 rounded-xl border border-[var(--border)] bg-slate-50 px-3 py-2 text-sm"
          >
            <input
              type="checkbox"
              className="mt-1"
              checked={checked}
              disabled={forced}
              onChange={() => toggle(item.id, item.locked_for_branch, item.include_in_all)}
            />
            <span>
              <span className="font-semibold">{item.label}</span>
              <span className="mt-0.5 block text-xs text-[var(--muted)]">
                {item.required ? "پاسخ اجباری. " : "پاسخ اختیاری. "}
                {forced ? "از کاتالوگ هلدینگ و غیرقابل حذف." : "انتخاب از کاتالوگ هلدینگ."}
              </span>
            </span>
          </label>
        );
      })}
    </div>
  );
}