"use client";

import { Upload, Wand2, Save, X } from "lucide-react";
import { useState } from "react";

export default function CreatePage() {
  const [characterData, setCharacterData] = useState({
    name: "",
    avatar: "",
    description: "",
    personality: "",
    category: "Fantasy",
  });

  const [step, setStep] = useState(1);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setCharacterData((prev) => ({ ...prev, [name]: value }));
  };

  const handleNext = () => {
    if (step < 4) setStep(step + 1);
  };

  const handlePrev = () => {
    if (step > 1) setStep(step - 1);
  };

  return (
    <div className="p-6 max-w-2xl mx-auto">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-2">Create Character</h1>
        <p className="text-gray-600">Build your own AI character in 4 simple steps</p>
      </div>

      {/* Progress */}
      <div className="flex gap-2 mb-8">
        {[1, 2, 3, 4].map((num) => (
          <div
            key={num}
            className={`flex-1 h-2 rounded-full transition ${
              num <= step ? "bg-black" : "bg-gray-200"
            }`}
          ></div>
        ))}
      </div>

      {/* Form */}
      <div className="bg-white border border-gray-200 rounded-xl p-8 space-y-6">
        {/* Step 1: Basic Info */}
        {step === 1 && (
          <div className="space-y-6">
            <div>
              <label className="block text-sm font-semibold mb-2">Character Name</label>
              <input
                type="text"
                name="name"
                value={characterData.name}
                onChange={handleChange}
                placeholder="e.g., Luna, Alex, Sage"
                className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-black focus:outline-none transition"
              />
            </div>

            <div>
              <label className="block text-sm font-semibold mb-2">Category</label>
              <select
                name="category"
                value={characterData.category}
                onChange={handleChange}
                className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-black focus:outline-none transition"
              >
                <option>Fantasy</option>
                <option>Sci-Fi</option>
                <option>Romance</option>
                <option>Mystery</option>
                <option>Adventure</option>
              </select>
            </div>

            <p className="text-sm text-gray-600">
              Give your character a unique name and choose a category that best fits their personality.
            </p>
          </div>
        )}

        {/* Step 2: Avatar */}
        {step === 2 && (
          <div className="space-y-6">
            <div>
              <label className="block text-sm font-semibold mb-4">Character Avatar</label>

              {/* Preview */}
              <div className="w-32 h-32 bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 rounded-xl flex items-center justify-center mb-6">
                <span className="text-5xl">✨</span>
              </div>

              {/* Upload Options */}
              <div className="space-y-3">
                <button className="w-full border-2 border-dashed border-gray-300 rounded-lg py-8 hover:border-gray-400 transition flex flex-col items-center gap-2">
                  <Upload className="w-6 h-6 text-gray-600" />
                  <span className="text-sm font-medium">Upload Image</span>
                  <span className="text-xs text-gray-500">or drag and drop</span>
                </button>

                <button className="w-full border-2 border-gray-200 rounded-lg py-3 font-medium hover:bg-gray-50 transition flex items-center justify-center gap-2">
                  <Wand2 className="w-5 h-5" />
                  Generate with AI
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Step 3: Description */}
        {step === 3 && (
          <div className="space-y-6">
            <div>
              <label className="block text-sm font-semibold mb-2">Character Description</label>
              <textarea
                name="description"
                value={characterData.description}
                onChange={handleChange}
                placeholder="Describe your character's appearance, background, and key traits..."
                rows={4}
                className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-black focus:outline-none transition resize-none"
              />
            </div>

            <div>
              <label className="block text-sm font-semibold mb-2">Personality & Traits</label>
              <textarea
                name="personality"
                value={characterData.personality}
                onChange={handleChange}
                placeholder="Define their personality, interests, quirks, and conversation style..."
                rows={4}
                className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-black focus:outline-none transition resize-none"
              />
            </div>
          </div>
        )}

        {/* Step 4: Review */}
        {step === 4 && (
          <div className="space-y-6">
            <div className="bg-gray-50 rounded-lg p-6 space-y-4">
              <div className="flex items-start gap-4">
                <div className="w-20 h-20 bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 rounded-lg flex items-center justify-center text-3xl">
                  ✨
                </div>
                <div className="flex-1">
                  <h3 className="text-xl font-bold">{characterData.name || "Character Name"}</h3>
                  <p className="text-sm text-gray-600">{characterData.category}</p>
                </div>
              </div>

              <div className="border-t border-gray-200 pt-4">
                <p className="text-sm">
                  <span className="font-semibold">Description:</span>{" "}
                  {characterData.description || "No description provided"}
                </p>
              </div>

              <div className="border-t border-gray-200 pt-4">
                <p className="text-sm">
                  <span className="font-semibold">Personality:</span>{" "}
                  {characterData.personality || "No personality traits provided"}
                </p>
              </div>
            </div>

            <p className="text-sm text-gray-600">
              Review your character and click "Publish" to make them available to the community!
            </p>
          </div>
        )}

        {/* Actions */}
        <div className="flex gap-3 pt-6 border-t border-gray-200">
          <button
            onClick={handlePrev}
            disabled={step === 1}
            className="flex-1 px-4 py-3 border-2 border-gray-200 rounded-lg font-medium hover:bg-gray-50 transition disabled:opacity-50"
          >
            Previous
          </button>
          {step < 4 ? (
            <button
              onClick={handleNext}
              className="flex-1 px-4 py-3 bg-black text-white rounded-lg font-medium hover:bg-gray-800 transition"
            >
              Next
            </button>
          ) : (
            <button className="flex-1 px-4 py-3 bg-black text-white rounded-lg font-medium hover:bg-gray-800 transition flex items-center justify-center gap-2">
              <Save className="w-5 h-5" />
              Publish Character
            </button>
          )}
        </div>
      </div>
    </div>
  );
}