"use client"

import type React from "react"

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

interface ProjectFormProps {
  project?: Project | null
  onSubmit: (data: Omit<Project, "id">) => void
  onCancel: () => void
}

export function ProjectForm({ project, onSubmit, onCancel }: ProjectFormProps) {
  const [formData, setFormData] = useState({
    name: "",
    role: "",
    description: "",
    highlights: [] as string[],
    stack: [] as string[],
    website: "",
    github: "",
    featured: false,
  })
  const [newHighlight, setNewHighlight] = useState("")
  const [newTech, setNewTech] = useState("")

  useEffect(() => {
    if (project) {
      setFormData({
        name: project.name,
        role: project.role,
        description: project.description,
        highlights: project.highlights,
        stack: project.stack,
        website: project.website || "",
        github: project.github || "",
        featured: project.featured,
      })
    }
  }, [project])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSubmit({
      ...formData,
      website: formData.website || null,
      github: formData.github || null,
    })
  }

  const addHighlight = () => {
    if (newHighlight.trim()) {
      setFormData((prev) => ({
        ...prev,
        highlights: [...prev.highlights, newHighlight.trim()],
      }))
      setNewHighlight("")
    }
  }

  const removeHighlight = (index: number) => {
    setFormData((prev) => ({
      ...prev,
      highlights: prev.highlights.filter((_, i) => i !== index),
    }))
  }

  const addTech = () => {
    if (newTech.trim()) {
      setFormData((prev) => ({
        ...prev,
        stack: [...prev.stack, newTech.trim()],
      }))
      setNewTech("")
    }
  }

  const removeTech = (index: number) => {
    setFormData((prev) => ({
      ...prev,
      stack: prev.stack.filter((_, i) => i !== index),
    }))
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="name" className="font-mono text-sm">
            Project Name
          </Label>
          <Input
            id="name"
            value={formData.name}
            onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
            placeholder="My Project"
            required
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="role" className="font-mono text-sm">
            Your Role
          </Label>
          <Input
            id="role"
            value={formData.role}
            onChange={(e) => setFormData((prev) => ({ ...prev, role: e.target.value }))}
            placeholder="Creator / Lead / Contributor"
            required
          />
        </div>
      </div>

      <div className="space-y-2">
        <Label htmlFor="description" className="font-mono text-sm">
          Description
        </Label>
        <Textarea
          id="description"
          value={formData.description}
          onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
          placeholder="A brief description of the project..."
          rows={3}
          required
        />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="website" className="font-mono text-sm">
            Website URL
          </Label>
          <Input
            id="website"
            type="url"
            value={formData.website}
            onChange={(e) => setFormData((prev) => ({ ...prev, website: e.target.value }))}
            placeholder="https://example.com"
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="github" className="font-mono text-sm">
            GitHub URL
          </Label>
          <Input
            id="github"
            type="url"
            value={formData.github}
            onChange={(e) => setFormData((prev) => ({ ...prev, github: e.target.value }))}
            placeholder="https://github.com/..."
          />
        </div>
      </div>

      {/* Highlights */}
      <div className="space-y-3">
        <Label className="font-mono text-sm">Key Highlights</Label>
        <div className="flex gap-2">
          <Input
            value={newHighlight}
            onChange={(e) => setNewHighlight(e.target.value)}
            placeholder="Add a highlight..."
            onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addHighlight())}
          />
          <Button type="button" variant="secondary" onClick={addHighlight}>
            <Plus size={16} />
          </Button>
        </div>
        {formData.highlights.length > 0 && (
          <ul className="space-y-2">
            {formData.highlights.map((highlight, i) => (
              <li
                key={i}
                className="flex items-center gap-2 text-sm text-muted-foreground bg-secondary px-3 py-2 rounded"
              >
                <span className="text-primary">→</span>
                <span className="flex-1">{highlight}</span>
                <button
                  type="button"
                  onClick={() => removeHighlight(i)}
                  className="text-muted-foreground hover:text-destructive"
                >
                  <X size={14} />
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>

      {/* Tech stack */}
      <div className="space-y-3">
        <Label className="font-mono text-sm">Tech Stack</Label>
        <div className="flex gap-2">
          <Input
            value={newTech}
            onChange={(e) => setNewTech(e.target.value)}
            placeholder="Add a technology..."
            onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addTech())}
          />
          <Button type="button" variant="secondary" onClick={addTech}>
            <Plus size={16} />
          </Button>
        </div>
        {formData.stack.length > 0 && (
          <div className="flex flex-wrap gap-2">
            {formData.stack.map((tech, i) => (
              <span
                key={i}
                className="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-mono bg-secondary text-secondary-foreground rounded"
              >
                {tech}
                <button
                  type="button"
                  onClick={() => removeTech(i)}
                  className="text-muted-foreground hover:text-destructive"
                >
                  <X size={12} />
                </button>
              </span>
            ))}
          </div>
        )}
      </div>

      {/* Featured toggle */}
      <div className="flex items-center justify-between bg-secondary p-4 rounded-lg">
        <div>
          <Label htmlFor="featured" className="font-mono text-sm">
            Featured Project
          </Label>
          <p className="text-xs text-muted-foreground">Display prominently on the homepage</p>
        </div>
        <Switch
          id="featured"
          checked={formData.featured}
          onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, featured: checked }))}
        />
      </div>

      {/* Actions */}
      <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">{project ? "Update Project" : "Create Project"}</Button>
      </div>
    </form>
  )
}