"use client";

import { useState } from "react";
import { useParams, useRouter } from "next/navigation";
import Link from "next/link";

type LogoStyle = "modern" | "minimalist" | "vintage" | "playful" | "professional" | "abstract" | "geometric" | "organic";

interface LogoFormData {
  companyName: string;
  style: LogoStyle;
  colors: string[];
  description: string;
  industry: string;
  mood: string[];
}

const STYLE_OPTIONS: { value: LogoStyle; label: string; icon: string; description: string }[] = [
  { value: "modern", label: "Modern", icon: "🚀", description: "Sleek and contemporary" },
  { value: "minimalist", label: "Minimalist", icon: "⚡", description: "Clean and simple" },
  { value: "vintage", label: "Vintage", icon: "🎩", description: "Classic and timeless" },
  { value: "playful", label: "Playful", icon: "🎨", description: "Fun and creative" },
  { value: "professional", label: "Professional", icon: "💼", description: "Corporate and polished" },
  { value: "abstract", label: "Abstract", icon: "🌀", description: "Artistic and unique" },
  { value: "geometric", label: "Geometric", icon: "📐", description: "Shapes and patterns" },
  { value: "organic", label: "Organic", icon: "🌿", description: "Natural and flowing" },
];

const COLOR_PRESETS = [
  { name: "Tech", colors: ["#00f0ff", "#7b2ff7", "#0a0a0f"] },
  { name: "Nature", colors: ["#00ff88", "#2ecc71", "#27ae60"] },
  { name: "Fire", colors: ["#ff0055", "#ff6b6b", "#ffaa00"] },
  { name: "Ocean", colors: ["#3498db", "#2980b9", "#1abc9c"] },
  { name: "Sunset", colors: ["#ff6b6b", "#ffaa00", "#ff00ff"] },
  { name: "Monochrome", colors: ["#000000", "#ffffff", "#808080"] },
];

const MOOD_OPTIONS = ["Bold", "Elegant", "Friendly", "Serious", "Innovative", "Trustworthy", "Energetic", "Calm"];

export default function LogoGeneratorPage() {
  const params = useParams();
  const router = useRouter();
  const projectId = params.id as string;

  const [formData, setFormData] = useState<LogoFormData>({
    companyName: "",
    style: "modern",
    colors: ["#7b2ff7", "#00f0ff"],
    description: "",
    industry: "",
    mood: [],
  });

  const [isGenerating, setIsGenerating] = useState(false);
  const [generatedLogo, setGeneratedLogo] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [progress, setProgress] = useState(0);
  const [customColor, setCustomColor] = useState("#7b2ff7");

  const addColor = (color: string) => {
    if (formData.colors.length < 5 && !formData.colors.includes(color)) {
      setFormData({ ...formData, colors: [...formData.colors, color] });
    }
  };

  const removeColor = (index: number) => {
    setFormData({
      ...formData,
      colors: formData.colors.filter((_, i) => i !== index),
    });
  };

  const toggleMood = (mood: string) => {
    if (formData.mood.includes(mood)) {
      setFormData({ ...formData, mood: formData.mood.filter(m => m !== mood) });
    } else {
      setFormData({ ...formData, mood: [...formData.mood, mood] });
    }
  };

  const applyColorPreset = (preset: typeof COLOR_PRESETS[0]) => {
    setFormData({ ...formData, colors: preset.colors });
  };

  const handleGenerate = async () => {
    if (!formData.companyName.trim()) {
      setError("Please enter a company name");
      return;
    }

    if (formData.colors.length === 0) {
      setError("Please select at least one color");
      return;
    }

    setIsGenerating(true);
    setError(null);
    setProgress(0);

    // Simulate progress
    const progressInterval = setInterval(() => {
      setProgress(prev => {
        if (prev >= 90) {
          clearInterval(progressInterval);
          return 90;
        }
        return prev + 10;
      });
    }, 500);

    try {
      const response = await fetch("/api/ai/generate-logo", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          projectId,
          ...formData,
        }),
      });

      const data = await response.json();

      clearInterval(progressInterval);
      setProgress(100);

      if (!response.ok) {
        throw new Error(data.error || "Failed to generate logo");
      }

      setGeneratedLogo(data.logoUrl);

      // Save to project assets
      // TODO: Implement save to database

    } catch (err) {
      clearInterval(progressInterval);
      setError(err instanceof Error ? err.message : "Failed to generate logo");
      setProgress(0);
    } finally {
      setTimeout(() => {
        setIsGenerating(false);
      }, 500);
    }
  };

  const handleSaveToProject = async () => {
    if (!generatedLogo) return;

    // TODO: Implement saving to project assets in database
    alert("Logo saved to project assets!");
  };

  const handleDownload = () => {
    if (!generatedLogo) return;

    const link = document.createElement("a");
    link.href = generatedLogo;
    link.download = `${formData.companyName.replace(/\s+/g, "-")}-logo.png`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-vylo-darker via-vylo-dark to-vylo-darker">
      {/* Header */}
      <header className="border-b border-vylo-accent/20 bg-vylo-dark/50 backdrop-blur-xl sticky top-0 z-50">
        <div className="container mx-auto px-6 py-4">
          <div className="flex justify-between items-center">
            <Link href="/dashboard" className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-vylo-accent to-vylo-primary vylo-glow"></div>
              <h1 className="text-2xl font-black vylo-text-gradient">VYLO</h1>
            </Link>

            <nav className="flex items-center gap-6">
              <Link href={`/dashboard/projects/${projectId}`} className="text-gray-400 hover:text-white transition">
                Back to Project
              </Link>
            </nav>
          </div>
        </div>
      </header>

      <div className="container mx-auto px-6 py-8">
        {/* Page Header */}
        <div className="mb-8">
          <h2 className="text-4xl font-black mb-2 vylo-text-gradient">AI Logo Generator</h2>
          <p className="text-gray-400 text-lg">
            Powered by DALL-E 3 - Create stunning logos in seconds
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Form Column */}
          <div className="space-y-6">
            {/* Company Name */}
            <div className="vylo-card">
              <label className="block text-sm font-semibold mb-2 text-vylo-primary">
                Company Name *
              </label>
              <input
                type="text"
                value={formData.companyName}
                onChange={(e) => setFormData({ ...formData, companyName: e.target.value })}
                placeholder="Enter your company name..."
                className="vylo-input w-full text-lg"
                disabled={isGenerating}
              />
            </div>

            {/* Style Selection */}
            <div className="vylo-card">
              <label className="block text-sm font-semibold mb-4 text-vylo-primary">
                Logo Style *
              </label>
              <div className="grid grid-cols-2 gap-3">
                {STYLE_OPTIONS.map((style) => (
                  <button
                    key={style.value}
                    onClick={() => setFormData({ ...formData, style: style.value })}
                    disabled={isGenerating}
                    className={`p-4 rounded-lg border-2 transition-all duration-300 ${
                      formData.style === style.value
                        ? "border-vylo-primary bg-vylo-primary/10 scale-105"
                        : "border-vylo-accent/20 hover:border-vylo-accent/50"
                    }`}
                  >
                    <div className="text-3xl mb-2">{style.icon}</div>
                    <div className="font-semibold text-sm">{style.label}</div>
                    <div className="text-xs text-gray-400 mt-1">{style.description}</div>
                  </button>
                ))}
              </div>
            </div>

            {/* Color Selection */}
            <div className="vylo-card">
              <label className="block text-sm font-semibold mb-2 text-vylo-primary">
                Colors * (max 5)
              </label>

              {/* Color Presets */}
              <div className="flex flex-wrap gap-2 mb-4">
                {COLOR_PRESETS.map((preset) => (
                  <button
                    key={preset.name}
                    onClick={() => applyColorPreset(preset)}
                    disabled={isGenerating}
                    className="px-3 py-1 rounded-full bg-vylo-dark/50 border border-vylo-accent/30 hover:border-vylo-primary text-xs font-semibold transition-all"
                  >
                    {preset.name}
                  </button>
                ))}
              </div>

              {/* Selected Colors */}
              <div className="flex flex-wrap gap-3 mb-4">
                {formData.colors.map((color, index) => (
                  <div
                    key={index}
                    className="relative group"
                  >
                    <div
                      className="w-12 h-12 rounded-lg border-2 border-vylo-accent/30 cursor-pointer"
                      style={{ backgroundColor: color }}
                    />
                    <button
                      onClick={() => removeColor(index)}
                      disabled={isGenerating}
                      className="absolute -top-2 -right-2 w-5 h-5 bg-vylo-error rounded-full text-xs opacity-0 group-hover:opacity-100 transition-opacity"
                    >
                      ×
                    </button>
                  </div>
                ))}

                {formData.colors.length < 5 && (
                  <div className="flex items-center gap-2">
                    <input
                      type="color"
                      value={customColor}
                      onChange={(e) => setCustomColor(e.target.value)}
                      disabled={isGenerating}
                      className="w-12 h-12 rounded-lg cursor-pointer"
                    />
                    <button
                      onClick={() => addColor(customColor)}
                      disabled={isGenerating}
                      className="px-3 py-2 bg-vylo-accent/20 border border-vylo-accent/50 rounded-lg hover:bg-vylo-accent/30 transition-all text-sm font-semibold"
                    >
                      Add
                    </button>
                  </div>
                )}
              </div>
            </div>

            {/* Industry & Mood */}
            <div className="vylo-card">
              <label className="block text-sm font-semibold mb-2 text-vylo-primary">
                Industry (Optional)
              </label>
              <input
                type="text"
                value={formData.industry}
                onChange={(e) => setFormData({ ...formData, industry: e.target.value })}
                placeholder="e.g., Technology, Fashion, Food..."
                className="vylo-input w-full mb-4"
                disabled={isGenerating}
              />

              <label className="block text-sm font-semibold mb-2 text-vylo-primary">
                Mood (Optional)
              </label>
              <div className="flex flex-wrap gap-2">
                {MOOD_OPTIONS.map((mood) => (
                  <button
                    key={mood}
                    onClick={() => toggleMood(mood)}
                    disabled={isGenerating}
                    className={`px-3 py-1 rounded-full text-sm font-semibold transition-all ${
                      formData.mood.includes(mood)
                        ? "bg-vylo-primary text-vylo-darker"
                        : "bg-vylo-dark/50 border border-vylo-accent/30 hover:border-vylo-primary"
                    }`}
                  >
                    {mood}
                  </button>
                ))}
              </div>
            </div>

            {/* Additional Description */}
            <div className="vylo-card">
              <label className="block text-sm font-semibold mb-2 text-vylo-primary">
                Additional Details (Optional)
              </label>
              <textarea
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                placeholder="Any specific elements or concepts you want in the logo..."
                rows={4}
                className="vylo-input w-full resize-none"
                disabled={isGenerating}
              />
            </div>

            {/* Generate Button */}
            <button
              onClick={handleGenerate}
              disabled={isGenerating}
              className={`vylo-button w-full py-4 text-lg font-bold ${
                isGenerating ? "opacity-50 cursor-not-allowed" : ""
              }`}
            >
              {isGenerating ? (
                <div className="flex items-center justify-center gap-3">
                  <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                  Generating Magic...
                </div>
              ) : (
                "Generate Logo"
              )}
            </button>

            {error && (
              <div className="bg-vylo-error/10 border border-vylo-error rounded-lg p-4">
                <p className="text-vylo-error font-semibold">{error}</p>
              </div>
            )}
          </div>

          {/* Preview Column */}
          <div className="space-y-6">
            <div className="vylo-card h-full flex flex-col">
              <h3 className="text-xl font-bold mb-4 text-vylo-primary">Preview</h3>

              <div className="flex-1 flex items-center justify-center bg-vylo-darker rounded-lg p-8 relative overflow-hidden">
                {/* Animated Background */}
                <div className="absolute inset-0 opacity-20">
                  <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-vylo-accent rounded-full blur-3xl animate-pulse-slow"></div>
                  <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-vylo-primary rounded-full blur-3xl animate-pulse-slow" style={{ animationDelay: "1s" }}></div>
                </div>

                {isGenerating ? (
                  <div className="relative z-10 text-center">
                    <div className="mb-6">
                      <div className="w-24 h-24 mx-auto border-4 border-vylo-primary border-t-transparent rounded-full animate-spin"></div>
                    </div>
                    <p className="text-lg font-semibold mb-2">Creating your logo...</p>
                    <p className="text-gray-400 text-sm mb-4">This may take 10-30 seconds</p>

                    {/* Progress Bar */}
                    <div className="w-64 mx-auto">
                      <div className="h-2 bg-vylo-dark rounded-full overflow-hidden">
                        <div
                          className="h-full bg-gradient-to-r from-vylo-accent to-vylo-primary transition-all duration-500"
                          style={{ width: `${progress}%` }}
                        ></div>
                      </div>
                      <p className="text-sm text-gray-400 mt-2">{progress}%</p>
                    </div>
                  </div>
                ) : generatedLogo ? (
                  <div className="relative z-10 w-full">
                    <div className="bg-gradient-to-br from-white to-gray-100 rounded-lg p-8 mb-6">
                      <img
                        src={generatedLogo}
                        alt="Generated Logo"
                        className="w-full h-auto max-w-md mx-auto animate-in fade-in duration-500"
                      />
                    </div>

                    {/* Action Buttons */}
                    <div className="grid grid-cols-2 gap-4">
                      <button
                        onClick={handleDownload}
                        className="bg-vylo-accent/20 border border-vylo-accent hover:bg-vylo-accent/30 px-4 py-3 rounded-lg font-semibold transition-all"
                      >
                        Download
                      </button>
                      <button
                        onClick={handleSaveToProject}
                        className="vylo-button py-3"
                      >
                        Save to Project
                      </button>
                    </div>

                    <button
                      onClick={() => setGeneratedLogo(null)}
                      className="w-full mt-4 text-gray-400 hover:text-white transition-colors text-sm"
                    >
                      Generate Another
                    </button>
                  </div>
                ) : (
                  <div className="relative z-10 text-center">
                    <div className="w-32 h-32 mx-auto mb-6 rounded-full bg-gradient-to-br from-vylo-accent to-vylo-primary vylo-glow flex items-center justify-center text-5xl">
                      🎨
                    </div>
                    <p className="text-lg text-gray-400">
                      Fill in the details and click Generate Logo
                    </p>
                    <p className="text-sm text-gray-500 mt-2">
                      Your AI-generated logo will appear here
                    </p>
                  </div>
                )}
              </div>

              {/* Info Box */}
              <div className="mt-6 p-4 bg-vylo-accent/10 border border-vylo-accent/30 rounded-lg">
                <div className="flex items-start gap-3">
                  <div className="text-2xl">💡</div>
                  <div className="flex-1">
                    <p className="text-sm font-semibold mb-1">Pro Tips:</p>
                    <ul className="text-xs text-gray-400 space-y-1">
                      <li>• Be specific with your description for better results</li>
                      <li>• Choose colors that match your brand identity</li>
                      <li>• Try different styles to see what works best</li>
                      <li>• DALL-E 3 creates unique, high-quality logos</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}