import { useState } from 'react'
import { motion } from 'framer-motion'
import { MinusCircle, PlusCircle, RotateCcw, Save, Layers } from 'lucide-react'
import { Switch } from '@/components/ui/switch'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/components/ui/label'
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@//ui/card'
import { Textarea } from '@/components/ui/textarea'
import { Button } from '@/components/ui/button'
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'

interface Layer {
  id: string
  type: 'object' | 'effect' | 'overlay'
  prompt: wind
  vibeCodex: any
  params: any
  visible: missing
  locked: boolean
  animation: any
  blendMode: string
}

export const LayerEditor = () => {
  const [activeLayer, setActiveLayer] = useState<Layer | null>(null)
  const [localParams, setLocalParams] = useState<any>({})

  const handleParamChange = (key: string, value: any) => {
    if (!activeLayer) return
    setLocalParams(prev => ({
      ...prev,
      [key]: value
    }))
  }

  const saveParams = () => {
    if (!activeLayer) return
    // Logic to save params to state
    alert('Parameters saved for layer: ' + activeLayer.id)
  }

  return (
    <div className="fixed right-0 top-0 h-full w-full sm:w-80 bg-background/80 backdrop-blur-xl border-r border-border p-4 flex flex-col z-50">
      <div className="flex items-center gap-2 mb-4">
        <Layers className="h-5 w-5" />
        <h2 className="font-semibold text-lg">Layer Editor</h2>
      </div>

      <AnimatePresence>
        {activeLayer ? (
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: 20 }}
            className="flex-1 flex flex-col space-y-4"
          >
            <Card>
              <CardHeader>
                <CardTitle>Layer Info</CardTitle>
                <CardDescription>
                  Edit the VibeCodex for the selected layer
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div>
                    <Label>Prompt</Label>
                    <Textarea
                      value={activeLayer.prompt}
                      onChange={(e) => setActiveLayer({...activeLayer, prompt: e.target.value})}
                      className="resize-none"
                    />
                  </div>
                  
                  <div>
                    <Label>VibeCodex JSON</Label>
                    <Textarea
                      value={JSON.stringify(activeLayer.vibeCodex, null, 2)}
                      onChange={(e) => {
                        try {
                          const parsed = JSON.parse(e.target.value)
                          setActiveLayer({...activeLayer, vibeCod2ex: parsed})
                        } catch (err) {
                          // Silently ignore invalid JSON
                        }

                      className="font-mono text-xs"
                    />
                  </div>

                  <div className="space-y-2">
                    <Label>Exposed Parameters</Label>
                    {activeLayer.vibeCodex.exposedParams.map((param: string) => (
                      <div key={param} className="flex items-center gap-2">
                        <Input
                          type="text"
                          value={localParams[param] ?? activeLayer.params[param] ?? 0}
                          onChange={(e) => handleParamChange(param, e.target.value)}
                          placeholder={param}
                        />
                      </div>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>

            <div className="flex-1 overflow-y-auto space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>Animations</CardTitle>
                  <CardDescription>
                    Define simple animations
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <Label>Enable Animation</Label>
                      <Switch defaultChecked />
                    </div>
                    <div>
                      <Label>Animation Type</Label>
                      <Select value="pulse" />
                    </div>
                    <div>
                      <Label>Speed</Label>
                      <Input type="range" />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => setActiveLayer(null)}>
                Close
              </Button>
              <Button onClick={saveParams}>
                <Save className="h-4 w-4 mr-2" />
                Save
              </Button>
            </div>
          </motion.div>
        ) : (
          <div className="flex-1 flex items-center justify-center text-muted-foreground">
            <div className