"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Plus, Trash2, Sparkles, Wand2, Layers } from "lucide-react"

interface SeriesConfig {
  id: string
  title: string
  description: string
  imageCount: number
  style: string
  prompts: string[]
}

export function Creator() {
  const [prompt, setPrompt] = useState("")
  const [series, setSeries] = useState<SeriesConfig[]>([{
    id: "1",
    title: "My First Series",
    description: "An epic adventure story",
    imageCount: 5,
    style: "anime",
    prompts: []
  }])

  const addSeries = () => {
    const newSeries: SeriesConfig = {
      id: Date.now().toString(),
      title: `Series ${series.length + 1}`,
      description: "Enter series description",
      imageCount: 5,
      style: "realistic",
      prompts: []
    }
    setSeries([...series, newSeries])
  }

  const removeSeries = (id: string) => {
    setSeries(series.filter(s => s.id !== id))
  }

  return (
    <section className="container mx-auto px-4 py-16">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold mb-4">Create Your Image Series</h2>
          <p className="text-gray-600">
            Describe your vision and configure your story series
          </p>
        </div>

        <Card className="mb-8">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Sparkles className="h-5 w-5" />
              Image Prompt
            </CardTitle>
            <CardDescription>
              Describe the image you want to create. Be detailed and specific 
              for best results.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <Input
                placeholder="A beautiful magical forest with glowing trees and floating islands..."
                value={prompt}
                onChange={(e) => setPrompt(e.target.value)}
                className="min-h-[100px] resize-none"
              />
              <div className="flex justify-end">
                <Button className="bg-blue-600 text-white hover:bg-blue-700">
                  <Wand2 className="mr-2 h-4 w-4" />
                  Generate Ideas
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Layers className="h-5 w-5" />
                Series Configuration
              </div>
              <Button variant="outline" size="sm" onClick={addSeries}>
                <Plus className="h-4 w-4 mr-2" />
                Add Series
              </Button>
            </CardTitle>
            <CardDescription>
              Configure up to 30 images per series with consistent characters 
              and narrative flow.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              {series.map((item) => (
                <div key={item.id} className="border border-gray-200 rounded-lg p-4 space-y-4">
                  <div className="flex justify-between items-start">
                    <div className="flex-1 space-y-3">
                      <Input
                        placeholder="Series title"
                        value={item.title}
                        onChange={(e) => {
                          const updated = series.map(s => 
                            s.id === item.id ? {...s, title: e.target.value} : s
                          )
                          setSeries(updated)
                        }}
                      />
                      <Input
                        placeholder="Series description"
                        value={item.description}
                        onChange={(e) => {
                          const updated = series.map(s => 
                            s.id === item.id ? {...s, description: e.target.value} : s
                          )
                          setSeries(updated)
                        }}
                      />
                    </div>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => removeSeries(item.id)}
                      className="text-red-600 hover:text-red-700"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                  
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium mb-2 block">
                        Number of Images
                      </label>
                      <Input
                        type="number"
                        min="1"
                        max="30"
                        value={item.imageCount}
                        onChange={(e) => {
                          const updated = series.map(s => 
                            s.id === item.id ? {...s, imageCount: parseInt(e.target.value)} : s
                          )
                          setSeries(updated)
                        }}
                      />
                    </div>
                    <div>
                      <label className="text-sm font-medium mb-2 block">
                        Art Style
                      </label>
                      <select
                        className="flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
                        value={item.style}
                        onChange={(e) => {
                          const updated = series.map(s => 
                            s.id === item.id ? {...s, style: e.target.value} : s
                          )
                          setSeries(updated)
                        }}
                      >
                        <option value="realistic">Realistic</option>
                        <option value="anime">Anime</option>
                        <option value="cartoon">Cartoon</option>
                        <option value="fantasy">Fantasy</option>
                        <option value="cyberpunk">Cyberpunk</option>
                      </select>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            
            <div className="mt-6 pt-6 border-t border-gray-200">
              <div className="flex justify-between items-center">
                <div className="text-sm text-gray-600">
                  Total images: {series.reduce((sum, item) => sum + item.imageCount, 0)}
                </div>
                <div className="space-x-2">
                  <Button variant="outline">
                    Save Draft
                  </Button>
                  <Button className="bg-blue-600 text-white hover:bg-blue-700">
                    <Sparkles className="mr-2 h-4 w-4" />
                    Generate Series
                  </Button>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}