"use client";

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

interface PricingItem {
  name: string;
  price: string;
  note?: string;
  popular?: boolean;
  featured?: boolean;
}

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

function PriceField({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
  // Strip "BYN" suffix for editing, add back on save
  const raw = value.replace(/\s*BYN\s*$/i, "").trim();

  return (
    <div>
      <label className="block text-sm text-neutral-400 mb-1.5">{label}</label>
      <div className="flex rounded-lg border border-white/10 bg-neutral-800 focus-within:border-gold transition-colors">
        <input
          type="text"
          value={raw}
          onChange={(e) => {
            const v = e.target.value;
            onChange(v ? `${v} BYN` : "");
          }}
          placeholder="0"
          className="flex-1 bg-transparent px-4 py-2.5 text-white placeholder-neutral-500 outline-none min-w-0"
        />
        <span className="flex items-center pr-4 text-sm font-medium text-gold select-none">
          BYN
        </span>
      </div>
    </div>
  );
}

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 })}
          />

          {/* Popular & Featured selectors */}
          {(() => {
            const itemOptions = data.items
              .map((it, idx) => ({ value: String(idx), label: it.name }))
              .filter((o) => o.label.trim() !== "");
            const noneOption = { value: "", label: "— Нет —" };

            const popularIdx = data.items.findIndex((it) => it.popular);
            const featuredIdx = data.items.findIndex((it) => it.featured);

            return (
              <div className="grid gap-3 sm:grid-cols-2">
                <SelectField
                  label="Популярный абонемент"
                  value={popularIdx >= 0 ? String(popularIdx) : ""}
                  onChange={(v) => {
                    const items = data.items.map((it, idx) => ({
                      ...it,
                      popular: v ? idx === Number(v) : false,
                    }));
                    update({ ...data, items });
                  }}
                  options={[noneOption, ...itemOptions]}
                  placeholder="Выберите..."
                />
                <SelectField
                  label="Выделенный абонемент (безлимит)"
                  value={featuredIdx >= 0 ? String(featuredIdx) : ""}
                  onChange={(v) => {
                    const items = data.items.map((it, idx) => ({
                      ...it,
                      featured: v ? idx === Number(v) : false,
                    }));
                    update({ ...data, items });
                  }}
                  options={[noneOption, ...itemOptions]}
                  placeholder="Выберите..."
                />
              </div>
            );
          })()}

          <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 })}
                />
                <PriceField
                  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 })}
                />
                <PriceField
                  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>
  );
}
