"use client";

import { SectionEditor } from "../_components/SectionEditor";
import { InputField } from "../_components/FormField";
import { ArrayEditor } from "../_components/ArrayEditor";

interface PricingData {
  title: string;
  subtitle: string;
  items: { name: string; price: string; note?: string }[];
  rentalTitle: string;
  rentalItems: { name: string; price: string; note?: string }[];
  rules: string[];
}

export default function PricingEditorPage() {
  return (
    <SectionEditor<PricingData> sectionKey="pricing" title="Цены">
      {(data, update) => (
        <>
          <InputField
            label="Заголовок секции"
            value={data.title}
            onChange={(v) => update({ ...data, title: v })}
          />
          <InputField
            label="Подзаголовок"
            value={data.subtitle}
            onChange={(v) => update({ ...data, subtitle: v })}
          />

          <ArrayEditor
            label="Абонементы"
            items={data.items}
            onChange={(items) => update({ ...data, items })}
            renderItem={(item, _i, updateItem) => (
              <div className="grid gap-3 sm:grid-cols-3">
                <InputField
                  label="Название"
                  value={item.name}
                  onChange={(v) => updateItem({ ...item, name: v })}
                />
                <InputField
                  label="Цена"
                  value={item.price}
                  onChange={(v) => updateItem({ ...item, price: v })}
                />
                <InputField
                  label="Примечание"
                  value={item.note || ""}
                  onChange={(v) => updateItem({ ...item, note: v })}
                />
              </div>
            )}
            createItem={() => ({ name: "", price: "", note: "" })}
            addLabel="Добавить абонемент"
          />

          <InputField
            label="Заголовок аренды"
            value={data.rentalTitle}
            onChange={(v) => update({ ...data, rentalTitle: v })}
          />

          <ArrayEditor
            label="Аренда"
            items={data.rentalItems}
            onChange={(rentalItems) => update({ ...data, rentalItems })}
            renderItem={(item, _i, updateItem) => (
              <div className="grid gap-3 sm:grid-cols-3">
                <InputField
                  label="Название"
                  value={item.name}
                  onChange={(v) => updateItem({ ...item, name: v })}
                />
                <InputField
                  label="Цена"
                  value={item.price}
                  onChange={(v) => updateItem({ ...item, price: v })}
                />
                <InputField
                  label="Примечание"
                  value={item.note || ""}
                  onChange={(v) => updateItem({ ...item, note: v })}
                />
              </div>
            )}
            createItem={() => ({ name: "", price: "", note: "" })}
            addLabel="Добавить вариант аренды"
          />

          <ArrayEditor
            label="Правила"
            items={data.rules}
            onChange={(rules) => update({ ...data, rules })}
            renderItem={(rule, _i, updateItem) => (
              <InputField label="Правило" value={rule} onChange={updateItem} />
            )}
            createItem={() => ""}
            addLabel="Добавить правило"
          />
        </>
      )}
    </SectionEditor>
  );
}
