"use client";

import { useState } from "react";
import { Sparkles } from "lucide-react";
import { TEMPLATE_TYPES, TEMPLATE_LABELS, type TemplateType, type GameDefinition } from "@/lib/games/types";
import type { QuizDefinition } from "@/lib/games/quiz";
import type { ClickerDefinition } from "@/lib/games/clicker";
import type { MazeDefinition } from "@/lib/games/maze";
import { QuizBuilder } from "@/components/builders/quiz-builder";
import { ClickerBuilder } from "@/components/builders/clicker-builder";
import { MazeBuilder } from "@/components/builders/maze-builder";

export function AiGenerateForm() {
  const [templateType, setTemplateType] = useState<TemplateType>("quiz");
  const [title, setTitle] = useState("");
  const [prompt, setPrompt] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [definition, setDefinition] = useState<GameDefinition | null>(null);

  async function handleGenerate(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError(null);
    setDefinition(null);

    const res = await fetch("/api/ai/generate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ templateType, prompt }),
    });

    setLoading(false);
    if (!res.ok) {
      const data = await res.json().catch(() => null);
      setError(data?.error ?? "Не удалось сгенерировать игру");
      return;
    }

    const data = await res.json();
    setDefinition(data.definition);
  }

  if (definition) {
    return (
      <div className="flex flex-col gap-4">
        <p className="rounded-md bg-accent-soft px-3 py-2 text-sm text-accent-soft-text">
          Игра сгенерирована — проверьте и подправьте перед сохранением.
        </p>
        {templateType === "quiz" && (
          <QuizBuilder mode="create" initialTitle={title} initialDefinition={definition as QuizDefinition} />
        )}
        {templateType === "clicker" && (
          <ClickerBuilder mode="create" initialTitle={title} initialDefinition={definition as ClickerDefinition} />
        )}
        {templateType === "maze" && (
          <MazeBuilder mode="create" initialTitle={title} initialDefinition={definition as MazeDefinition} />
        )}
      </div>
    );
  }

  return (
    <form onSubmit={handleGenerate} className="card flex flex-col gap-4 p-5">
      <div className="text-sm">
        <span className="mb-1 block font-medium text-text-muted">Тип игры</span>
        <div className="flex gap-2">
          {TEMPLATE_TYPES.map((t) => (
            <button
              key={t}
              type="button"
              onClick={() => setTemplateType(t)}
              className={`btn ${templateType === t ? "btn-primary" : "btn-ghost"}`}
            >
              {TEMPLATE_LABELS[t]}
            </button>
          ))}
        </div>
      </div>

      <label className="text-sm">
        <span className="mb-1 block font-medium text-text-muted">Название игры</span>
        <input
          required
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          className="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
        />
      </label>

      <label className="text-sm">
        <span className="mb-1 block font-medium text-text-muted">Опишите игру</span>
        <textarea
          required
          rows={5}
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="Например: викторина на 5 вопросов про космос для детей"
          className="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
        />
      </label>

      {error && <p className="rounded-md bg-danger-soft px-3 py-2 text-sm text-danger-soft-text">{error}</p>}

      <button type="submit" disabled={loading || !title || !prompt} className="btn btn-primary self-start">
        <Sparkles size={15} />
        {loading ? "Генерируем…" : "Сгенерировать"}
      </button>
    </form>
  );
}