"use client";

import { Button } from "@/components/ui/Button";
import { Field, Input } from "@/components/ui/Field";
import { DocumentDraft, DEFAULT_DOCUMENT } from "@/lib/rule-set";

export function DocumentListEditor({
  items,
  onChange,
}: {
  items: DocumentDraft[];
  onChange: (items: DocumentDraft[]) => void;
}) {
  const update = (index: number, patch: Partial<DocumentDraft>) => {
    onChange(items.map((item, i) => (i === index ? { ...item, ...patch } : item)));
  };

  const remove = (index: number) => {
    onChange(items.filter((_, i) => i !== index));
  };

  const add = () => onChange([...items, { ...DEFAULT_DOCUMENT }]);

  return (
    <div className="space-y-3">
      {items.map((doc, index) => (
        <div key={index} className="rounded-xl border border-[var(--border)] bg-slate-50 p-3">
          <div className="grid gap-3">
            <Field label="عنوان مدرک">
              <Input
                value={doc.label}
                placeholder="مثلاً: عکس پرسنلی"
                onChange={(e) => update(index, { label: e.target.value })}
              />
            </Field>
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={doc.required}
                onChange={(e) => update(index, { required: e.target.checked })}
              />
              بارگذاری برای عبور از مرحله اجباری است
            </label>
          </div>
          {items.length > 1 ? (
            <button
              type="button"
              onClick={() => remove(index)}
              className="mt-2 text-xs text-red-600"
            >
              حذف
            </button>
          ) : null}
        </div>
      ))}
      <Button type="button" variant="secondary" onClick={add}>
        + مدرک مخصوص این مدرسه
      </Button>
    </div>
  );
}