"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DatabaseTemplate } from "@/lib/template-service"
import { Plus, X, Save } from "lucide-react"

interface CustomTemplateFormProps {
  onSubmit: (templateData: Partial<DatabaseTemplate>) => Promise<void>
  onCancel: () => void
}

export function CustomTemplateForm({ onSubmit, onCancel }: CustomTemplateFormProps) {
  const [formData, setFormData] = useState({
    type: "",
    title: "",
    description: "",
    category: "",
    icon: "",
    gradient: "",
    border: "",
    text: "",
    subtext: ""
  })
  const [loading, setLoading] = useState(false)

  const categories = [
    "Food Delivery",
    "E-commerce",
    "SaaS Platform",
    "Mobile App",
    "Dashboard",
    "CRM System",
    "Learning Platform",
    "Healthcare",
    "Real Estate",
    "Travel",
    "Entertainment",
    "Finance",
    "Social Media",
    "Marketplace",
    "Other"
  ]

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    
    try {
      await onSubmit(formData)
    } catch (error) {
      console.error('Error creating template:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }))
  }

  return (
    <Card className="bg-white/5 border-white/10">
      <CardHeader>
        <CardTitle className="text-white flex items-center">
          <Plus className="mr-2 h-5 w-5" />
          Create Custom Template
        </CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <label className="text-sm font-medium text-white">Template Type *</label>
              <Input
                placeholder="e.g., multi_restaurant_food_delivery"
                value={formData.type}
                onChange={(e) => handleInputChange('type', e.target.value)}
                className="bg-white/5 border-white/10 text-white placeholder:text-white/40"
                required
              />
              <p className="text-xs text-white/60">Unique identifier for the template</p>
            </div>

            <div className="space-y-2">
              <label className="text-sm font-medium text-white">Title *</label>
              <Input
                placeholder="e.g., Multi-Restaurant Food Delivery App"
                value={formData.title}
                onChange={(e) => handleInputChange('title', e.target.value)}
                className="bg-white/5 border-white/10 text-white placeholder:text-white/40"
                required
              />
            </div>
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium text-white">Description *</label>
            <Textarea
              placeholder="Describe your template and its key features..."
              value={formData.description}
              onChange={(e) => handleInputChange('description', e.target.value)}
              className="bg-white/5 border-white/10 text-white placeholder:text-white/40 min-h-[100px]"
              required
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <label className="text-sm font-medium text-white">Category *</label>
              <Select value={formData.category} onValueChange={(value) => handleInputChange('category', value)}>
                <SelectTrigger className="bg-white/5 border-white/10 text-white">
                  <SelectValue placeholder="Select a category" />
                </SelectTrigger>
                <SelectContent className="bg-gray-900 border-white/10">
                  {categories.map((category) => (
                    <SelectItem key={category} value={category} className="text-white">
                      {category}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <label className="text-sm font-medium text-white">Icon (optional)</label>
              <Input
                placeholder="e.g., restaurant, shopping-cart, users"
                value={formData.icon}
                onChange={(e) => handleInputChange('icon', e.target.value)}
                className="bg-white/5 border-white/10 text-white placeholder:text-white/40"
              />
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="space-y-2">
              <label className="text-sm font-medium text-white">Gradient (optional)</label>
              <Input
                placeholder="e.g., from-orange-400 to-red-500"
                value={formData.gradient}
                onChange={(e) => handleInputChange('gradient', e.target.value)}
                className="bg-white/5 border-white/10 text-white placeholder:text-white/40"
              />
            </div>

            <div className="space-y-2">
              <label className="text-sm font-medium text-white">Border (optional)</label>
              <Input
                placeholder="e.g., border-orange-500"
                value={formData.border}
                onChange={(e) => handleInputChange('border', e.target.value)}
                className="bg-white/5 border-white/10 text-white placeholder:text-white/40"
              />
            </div>

            <div className="space-y-2">
              <label className="text-sm font-medium text-white">Text Color (optional)</label>
              <Input
                placeholder="e.g., text-orange-500"
                value={formData.text}
                onChange={(e) => handleInputChange('text', e.target.value)}
                className="bg-white/5 border-white/10 text-white placeholder:text-white/40"
              />
            </div>
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium text-white">Subtext (optional)</label>
            <Input
              placeholder="e.g., Perfect for food delivery startups"
              value={formData.subtext}
              onChange={(e) => handleInputChange('subtext', e.target.value)}
              className="bg-white/5 border-white/10 text-white placeholder:text-white/40"
            />
          </div>

          <div className="flex justify-end space-x-3 pt-4">
            <Button
              type="button"
              variant="outline"
              onClick={onCancel}
              className="border-white/20 text-white hover:bg-white/10 cursor-pointer"
              disabled={loading}
            >
              <X className="mr-2 h-4 w-4" />
              Cancel
            </Button>
            <Button
              type="submit"
              className="bg-orange-500 hover:bg-orange-400 text-black font-semibold cursor-pointer"
              disabled={loading}
            >
              <Save className="mr-2 h-4 w-4" />
              {loading ? "Creating..." : "Create Template"}
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
