"use client";
import { useMemo, useState } from "react";
import { buildThemeCss, type ThemeInput } from "@/lib/tools/theme";
import { CodeOutput } from "@/components/tools/CodeOutput";

const FIELDS: { key: keyof ThemeInput; label: string }[] = [
  { key: "background", label: "Фон" },
  { key: "text", label: "Текст" },
  { key: "accent", label: "Акцент" },
  { key: "link", label: "Ссылки" },
  { key: "border", label: "Рамка" },
];

const fieldStyle = { border: "1px solid var(--border)", borderRadius: "2px", backgroundColor: "var(--background)", color: "var(--foreground)" } as const;

export function ThemeForm() {
  const [theme, setTheme] = useState<ThemeInput>({
    background: "#0F0F0F", text: "#EAEAEA", accent: "#7C3AED", link: "#4EA1FF", border: "#333333",
  });

  const css = useMemo(() => buildThemeCss(theme), [theme]);

  function update(key: keyof ThemeInput, value: string) {
    setTheme((prev) => ({ ...prev, [key]: value }));
  }

  return (
    <div className="grid gap-6 md:grid-cols-2">
      <div className="flex flex-col gap-3">
        {FIELDS.map((f) => (
          <label key={f.key} className="flex items-center justify-between gap-3 text-sm">
            <span>{f.label}</span>
            <span className="flex items-center gap-2">
              <input
                type="color" value={theme[f.key]} onChange={(e) => update(f.key, e.target.value)}
                aria-label={f.label} style={{ width: 36, height: 28, border: "1px solid var(--border)", borderRadius: 2, padding: 0, background: "none" }}
              />
              <input
                className="w-28 p-2 text-sm" style={fieldStyle}
                value={theme[f.key]} onChange={(e) => update(f.key, e.target.value)}
              />
            </span>
          </label>
        ))}
        <div
          className="mt-2 p-4 text-sm"
          style={{ backgroundColor: theme.background, color: theme.text, border: `2px solid ${theme.border}`, borderRadius: 2 }}
        >
          Превью темы. <a href="#" onClick={(e) => e.preventDefault()} style={{ color: theme.link }}>ссылка</a>,{" "}
          <span style={{ color: theme.accent, fontWeight: 700 }}>акцент</span>.
        </div>
      </div>
      <div className="flex flex-col gap-4">
        <CodeOutput code={css} tool="theme" label="CSS-переменные темы" />
      </div>
    </div>
  );
}