"use client";

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

const ICON_OPTIONS = [
  "sparkles", "flame", "wind", "zap", "star", "monitor",
  "heart", "music", "dumbbell", "trophy",
];

const COLOR_SWATCHES: { value: string; bg: string }[] = [
  { value: "rose", bg: "bg-rose-500" },
  { value: "orange", bg: "bg-orange-500" },
  { value: "amber", bg: "bg-amber-500" },
  { value: "yellow", bg: "bg-yellow-400" },
  { value: "lime", bg: "bg-lime-500" },
  { value: "emerald", bg: "bg-emerald-500" },
  { value: "teal", bg: "bg-teal-500" },
  { value: "cyan", bg: "bg-cyan-500" },
  { value: "sky", bg: "bg-sky-500" },
  { value: "blue", bg: "bg-blue-500" },
  { value: "indigo", bg: "bg-indigo-500" },
  { value: "violet", bg: "bg-violet-500" },
  { value: "purple", bg: "bg-purple-500" },
  { value: "fuchsia", bg: "bg-fuchsia-500" },
  { value: "pink", bg: "bg-pink-500" },
  { value: "red", bg: "bg-red-500" },
];

interface ClassesData {
  title: string;
  items: {
    name: string;
    description: string;
    icon: string;
    detailedDescription?: string;
    images?: string[];
    color?: string;
  }[];
}

export default function ClassesEditorPage() {
  return (
    <SectionEditor<ClassesData> sectionKey="classes" title="Направления">
      {(data, update) => (
        <>
          <InputField
            label="Заголовок секции"
            value={data.title}
            onChange={(v) => update({ ...data, title: v })}
          />

          <ArrayEditor
            label="Направления"
            items={data.items}
            onChange={(items) => update({ ...data, items })}
            renderItem={(item, _i, updateItem) => (
              <div className="space-y-3">
                <div className="grid gap-3 sm:grid-cols-2">
                  <InputField
                    label="Название"
                    value={item.name}
                    onChange={(v) => updateItem({ ...item, name: v })}
                  />
                  <div>
                    <label className="block text-sm text-neutral-400 mb-1.5">
                      Иконка
                    </label>
                    <select
                      value={item.icon}
                      onChange={(e) =>
                        updateItem({ ...item, icon: e.target.value })
                      }
                      className="w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white outline-none focus:border-gold transition-colors"
                    >
                      {ICON_OPTIONS.map((icon) => (
                        <option key={icon} value={icon}>
                          {icon}
                        </option>
                      ))}
                    </select>
                  </div>
                </div>
                <div>
                  <label className="block text-sm text-neutral-400 mb-1.5">
                    Цвет в расписании
                  </label>
                  <div className="flex flex-wrap gap-1.5">
                    {COLOR_SWATCHES.map((c) => {
                      const isUsed = data.items.some(
                        (other) => other !== item && other.color === c.value
                      );
                      if (isUsed) return null;
                      return (
                        <button
                          key={c.value}
                          type="button"
                          onClick={() => updateItem({ ...item, color: c.value })}
                          className={`h-6 w-6 rounded-full ${c.bg} transition-all ${
                            item.color === c.value
                              ? "ring-2 ring-white ring-offset-1 ring-offset-neutral-900 scale-110"
                              : "opacity-50 hover:opacity-100"
                          }`}
                        />
                      );
                    })}
                  </div>
                </div>
                <TextareaField
                  label="Краткое описание"
                  value={item.description}
                  onChange={(v) => updateItem({ ...item, description: v })}
                  rows={2}
                />
                <TextareaField
                  label="Подробное описание"
                  value={item.detailedDescription || ""}
                  onChange={(v) =>
                    updateItem({ ...item, detailedDescription: v })
                  }
                  rows={4}
                />
              </div>
            )}
            createItem={() => ({
              name: "",
              description: "",
              icon: "sparkles",
              detailedDescription: "",
              images: [],
            })}
            addLabel="Добавить направление"
          />
        </>
      )}
    </SectionEditor>
  );
}
