"use client"

import { useEditorStore } from "@/lib/store"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Trash2, X } from "lucide-react"

export function PropertiesPanel() {
  const { selectedComponent, updateComponent, removeComponent, selectComponent } = useEditorStore()

  if (!selectedComponent) {
    return null
  }

  const handlePropChange = (key: string, value: any) => {
    updateComponent(selectedComponent.id, {
      props: { ...selectedComponent.props, [key]: value },
    })
  }

  const handleDelete = () => {
    removeComponent(selectedComponent.id)
    selectComponent(null)
  }

  const renderPropertyEditor = () => {
    switch (selectedComponent.type) {
      case "button":
        return (
          <div className="space-y-4">
            <div>
              <Label htmlFor="button-text">Button Text</Label>
              <Input
                id="button-text"
                value={selectedComponent.props.children || ""}
                onChange={(e) => handlePropChange("children", e.target.value)}
                placeholder="Button text"
              />
            </div>
            <div>
              <Label htmlFor="button-variant">Variant</Label>
              <Select
                value={selectedComponent.props.variant || "default"}
                onValueChange={(value) => handlePropChange("variant", value)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="default">Default</SelectItem>
                  <SelectItem value="destructive">Destructive</SelectItem>
                  <SelectItem value="outline">Outline</SelectItem>
                  <SelectItem value="secondary">Secondary</SelectItem>
                  <SelectItem value="ghost">Ghost</SelectItem>
                  <SelectItem value="link">Link</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        )

      case "input":
      case "textarea":
        return (
          <div className="space-y-4">
            <div>
              <Label htmlFor="placeholder">Placeholder</Label>
              <Input
                id="placeholder"
                value={selectedComponent.props.placeholder || ""}
                onChange={(e) => handlePropChange("placeholder", e.target.value)}
                placeholder="Enter placeholder text"
              />
            </div>
          </div>
        )

      case "card":
        return (
          <div className="space-y-4">
            <div>
              <Label htmlFor="card-title">Title</Label>
              <Input
                id="card-title"
                value={selectedComponent.props.title || ""}
                onChange={(e) => handlePropChange("title", e.target.value)}
                placeholder="Card title"
              />
            </div>
            <div>
              <Label htmlFor="card-description">Description</Label>
              <Textarea
                id="card-description"
                value={selectedComponent.props.description || ""}
                onChange={(e) => handlePropChange("description", e.target.value)}
                placeholder="Card description"
              />
            </div>
          </div>
        )

      case "checkbox":
      case "switch":
        return (
          <div className="space-y-4">
            <div>
              <Label htmlFor="label">Label</Label>
              <Input
                id="label"
                value={selectedComponent.props.label || ""}
                onChange={(e) => handlePropChange("label", e.target.value)}
                placeholder="Label text"
              />
            </div>
            <div className="flex items-center space-x-2">
              <Switch
                id="checked"
                checked={selectedComponent.props.checked || false}
                onCheckedChange={(checked) => handlePropChange("checked", checked)}
              />
              <Label htmlFor="checked">Checked</Label>
            </div>
          </div>
        )

      case "progress":
        return (
          <div className="space-y-4">
            <div>
              <Label htmlFor="progress-value">Value</Label>
              <Input
                id="progress-value"
                type="number"
                min="0"
                max="100"
                value={selectedComponent.props.value || 50}
                onChange={(e) => handlePropChange("value", Number.parseInt(e.target.value))}
              />
            </div>
          </div>
        )

      case "avatar":
        return (
          <div className="space-y-4">
            <div>
              <Label htmlFor="fallback">Fallback Text</Label>
              <Input
                id="fallback"
                value={selectedComponent.props.fallback || ""}
                onChange={(e) => handlePropChange("fallback", e.target.value)}
                placeholder="AB"
                maxLength={2}
              />
            </div>
          </div>
        )

      default:
        return <div className="text-sm text-muted-foreground">No properties available for this component type.</div>
    }
  }

  return (
    <div className="h-full flex flex-col overflow-hidden">
      {/* Header */}
      <div className="p-4 border-b border-sidebar-border flex items-center justify-between">
        <h2 className="text-lg font-semibold text-sidebar-foreground">Properties</h2>
        <Button variant="ghost" size="sm" onClick={() => selectComponent(null)} className="h-8 w-8 p-0">
          <X className="h-4 w-4" />
        </Button>
      </div>

      <ScrollArea className="flex-1 properties-panel-scroll">
        <div className="p-2 space-y-3">
          {/* Component Info */}
          <Card className="w-full max-w-sm">
            <CardHeader className="pb-2 px-3 pt-3">
              <CardTitle className="text-sm font-medium">Component Info</CardTitle>
            </CardHeader>
            <CardContent className="space-y-1.5 px-3 pb-3">
              <div>
                <Label className="text-xs text-muted-foreground">Type</Label>
                <p className="text-sm font-medium capitalize">{selectedComponent.type}</p>
              </div>
              <div>
                <Label className="text-xs text-muted-foreground">ID</Label>
                <p className="text-sm font-mono text-muted-foreground">{selectedComponent.id}</p>
              </div>
            </CardContent>
          </Card>

          {/* Properties */}
          <Card className="w-full max-w-sm">
            <CardHeader className="pb-2 px-3 pt-3">
              <CardTitle className="text-sm font-medium">Properties</CardTitle>
            </CardHeader>
            <CardContent className="px-3 pb-3">{renderPropertyEditor()}</CardContent>
          </Card>

          {/* Position */}
          <Card className="w-full max-w-sm">
            <CardHeader className="pb-2 px-3 pt-3">
              <CardTitle className="text-sm font-medium">Position</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3 px-3 pb-3">
              <div className="grid grid-cols-2 gap-2">
                <div>
                  <Label htmlFor="pos-x" className="text-xs">
                    X
                  </Label>
                  <Input
                    id="pos-x"
                    type="number"
                    value={selectedComponent.position.x}
                    onChange={(e) =>
                      updateComponent(selectedComponent.id, {
                        position: { ...selectedComponent.position, x: Number.parseInt(e.target.value) || 0 },
                      })
                    }
                  />
                </div>
                <div>
                  <Label htmlFor="pos-y" className="text-xs">
                    Y
                  </Label>
                  <Input
                    id="pos-y"
                    type="number"
                    value={selectedComponent.position.y}
                    onChange={(e) =>
                      updateComponent(selectedComponent.id, {
                        position: { ...selectedComponent.position, y: Number.parseInt(e.target.value) || 0 },
                      })
                    }
                  />
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Actions */}
          <Card className="w-full max-w-sm">
            <CardHeader className="pb-2 px-3 pt-3">
              <CardTitle className="text-sm font-medium">Actions</CardTitle>
            </CardHeader>
            <CardContent className="px-3 pb-3">
              <Button variant="destructive" size="sm" onClick={handleDelete} className="w-full">
                <Trash2 className="w-4 h-4 mr-2" />
                Delete Component
              </Button>
            </CardContent>
          </Card>
        </div>
      </ScrollArea>
    </div>
  )
}
