"use client";
import { useMemo, useState } from "react";
import { buildCalloutCss } from "@/lib/tools/callout";
import { CodeOutput } from "@/components/tools/CodeOutput";

export function CalloutForm() {
  const [id, setId] = useState("idea");
  const [title, setTitle] = useState("Идея");
  const [color, setColor] = useState("#7C3AED");
  const [icon, setIcon] = useState("lightbulb");

  const result = useMemo(() => {
    try { return buildCalloutCss({ id, title, color, icon }); }
    catch { return null; }
  }, [id, title, color, icon]);

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

  return (
    <div className="grid gap-6 md:grid-cols-2">
      <div className="flex flex-col gap-3">
        <label className="text-sm">Тип (id)
          <input className={field} style={fieldStyle} value={id} onChange={(e) => setId(e.target.value)} />
        </label>
        <label className="text-sm">Заголовок
          <input className={field} style={fieldStyle} value={title} onChange={(e) => setTitle(e.target.value)} />
        </label>
        <label className="text-sm">Цвет (HEX)
          <input className={field} style={fieldStyle} value={color} onChange={(e) => setColor(e.target.value)} />
        </label>
        <label className="text-sm">Иконка (lucide-id)
          <input className={field} style={fieldStyle} value={icon} onChange={(e) => setIcon(e.target.value)} />
        </label>
      </div>
      <div className="flex flex-col gap-4">
        {result ? (
          <>
            <CodeOutput code={result.css} tool="callout" label="CSS-snippet" />
            <CodeOutput code={result.markdown} tool="callout" label="Пример разметки" />
          </>
        ) : (
          <p className="text-sm" style={{ color: "var(--muted-foreground)" }}>
            Проверь поля: id — латиница и цифры (напр. <code>idea</code>), цвет — корректный HEX (напр. <code>#7C3AED</code>).
          </p>
        )}
      </div>
    </div>
  );
}