"use client";

import { useState } from "react";
import { Plus_Jakarta_Sans, Space_Grotesk } from "next/font/google";
import Wizard from "@/components/Wizard";
import { CATEGORIES } from "@/lib/categories";
import PromptPreview from "@/app/components/PromptPreview";

const bodyFont = Plus_Jakarta_Sans({ subsets: ["latin"], weight: ["400", "500", "600"] });
const titleFont = Space_Grotesk({ subsets: ["latin"], weight: ["500", "600", "700"] });

export default function PromptsPage() {
  const [step, setStep] = useState(0);
  const [answers, setAnswers] = useState<Record<string, string>>({});
  const [isComplete, setIsComplete] = useState(false);

  const handleNext = () => {
    if (step < CATEGORIES.length - 1) {
      setStep((prev) => prev + 1);
      return;
    }
    setIsComplete(true);
  };

  const handlePrev = () => {
    setStep((prev) => Math.max(0, prev - 1));
  };

  const handleReset = () => {
    setIsComplete(false);
    setStep(0);
  };

  const handleAnswerChange = (id: string, value: string) => {
    setAnswers((prev) => ({ ...prev, [id]: value }));
  };

  return (
    <div
      className={`relative min-h-screen overflow-hidden bg-slate-50 ${bodyFont.className}`}
    >
      <div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,_#fff7ed_0%,_#f8fafc_45%,_#e2e8f0_100%)]" />
      <div className="absolute -top-24 right-10 -z-10 h-72 w-72 rounded-full bg-amber-200/60 blur-3xl animate-[float-slow_12s_ease-in-out_infinite]" />
      <div className="absolute bottom-0 left-0 -z-10 h-80 w-80 rounded-full bg-slate-200/70 blur-3xl animate-[float-slow_14s_ease-in-out_infinite]" />
      <div className="absolute inset-0 -z-10 bg-[linear-gradient(90deg,_rgba(15,23,42,0.05)_1px,_transparent_1px),linear-gradient(180deg,_rgba(15,23,42,0.05)_1px,_transparent_1px)] bg-[size:120px_120px] opacity-30" />

      <main className="mx-auto flex min-h-screen w-full max-w-6xl flex-col gap-10 px-6 py-12 md:px-10">
        <header
          className="flex flex-col gap-5 animate-[fade-up_0.7s_ease-out]"
          style={{ animationDelay: "80ms" }}
        >
          <div className="flex flex-wrap items-center gap-3 text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
            <span className="rounded-full border border-slate-300 bg-white/80 px-3 py-1">
              Wizard 14 etapas
            </span>
            <span>Gerador de Prompts</span>
          </div>
          <div className="max-w-3xl">
            <h1
              className={`${titleFont.className} text-4xl font-semibold text-slate-900 md:text-5xl`}
            >
              Construa o briefing perfeito para hotelaria
            </h1>
            <p className="mt-4 text-lg text-slate-600">
              Preencha as etapas com contexto claro para gerar prompts precisos,
              consistentes e prontos para comunicação.
            </p>
          </div>
        </header>

        <div
          className="grid gap-8 animate-[fade-up_0.7s_ease-out]"
          style={{ animationDelay: "160ms" }}
        >
          <Wizard
            step={step}
            categories={CATEGORIES}
            answers={answers}
            isComplete={isComplete}
            onAnswerChange={handleAnswerChange}
            onNext={handleNext}
            onPrev={handlePrev}
            onReset={handleReset}
          />
          <PromptPreview answers={answers} />
        </div>
      </main>
    </div>
  );
}