"use client"

import type React from "react"

import { useState, useEffect } from "react"
import type { StackCategory } from "@/lib/types"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { X, Plus } from "lucide-react"

interface StackFormProps {
  category?: StackCategory | null
  onSubmit: (data: Omit<StackCategory, "id">) => void
  onCancel: () => void
}

export function StackForm({ category, onSubmit, onCancel }: StackFormProps) {
  const [title, setTitle] = useState("")
  const [items, setItems] = useState<string[]>([])
  const [newItem, setNewItem] = useState("")

  useEffect(() => {
    if (category) {
      setTitle(category.title)
      setItems(category.items)
    }
  }, [category])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSubmit({ title, items })
  }

  const addItem = () => {
    if (newItem.trim()) {
      setItems((prev) => [...prev, newItem.trim()])
      setNewItem("")
    }
  }

  const removeItem = (index: number) => {
    setItems((prev) => prev.filter((_, i) => i !== index))
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="space-y-2">
        <Label htmlFor="title" className="font-mono text-sm">
          Category Name
        </Label>
        <Input
          id="title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="e.g. Backend, Infrastructure, Databases"
          required
        />
      </div>

      <div className="space-y-3">
        <Label className="font-mono text-sm">Technologies</Label>
        <div className="flex gap-2">
          <Input
            value={newItem}
            onChange={(e) => setNewItem(e.target.value)}
            placeholder="Add a technology..."
            onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addItem())}
          />
          <Button type="button" variant="secondary" onClick={addItem}>
            <Plus size={16} />
          </Button>
        </div>
        {items.length > 0 && (
          <div className="flex flex-wrap gap-2">
            {items.map((item, i) => (
              <span
                key={i}
                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-mono bg-secondary text-secondary-foreground rounded"
              >
                <span className="w-1 h-1 bg-primary rounded-full" />
                {item}
                <button
                  type="button"
                  onClick={() => removeItem(i)}
                  className="ml-1 text-muted-foreground hover:text-destructive"
                >
                  <X size={14} />
                </button>
              </span>
            ))}
          </div>
        )}
        {items.length === 0 && (
          <p className="text-sm text-muted-foreground">Add at least one technology to this category.</p>
        )}
      </div>

      <div className="flex justify-end gap-3 pt-4 border-t border-border">
        <Button type="button" variant="ghost" onClick={onCancel}>
          Cancel
        </Button>
        <Button type="submit" disabled={items.length === 0}>
          {category ? "Update Category" : "Create Category"}
        </Button>
      </div>
    </form>
  )
}