'use client'

import { useState } from 'react'
import { Block, GlobalStyles } from './types'
import { Button } from '../ui/button'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
import { X, Settings, Palette } from 'lucide-react'
import { GlobalStylesPanel } from './panels/GlobalStylesPanel'
import { BlockPropertyPanel } from './panels/BlockPropertyPanel'

interface EditorSidebarProps {
  selectedBlock: Block | null
  onBlockChange: (block: Block) => void
  globalStyles: GlobalStyles
  onGlobalStylesChange: (styles: GlobalStyles) => void
  onClose: () => void
}

export function EditorSidebar({
  selectedBlock,
  onBlockChange,
  globalStyles,
  onGlobalStylesChange,
  onClose,
}: EditorSidebarProps) {
  const [activeTab, setActiveTab] = useState(selectedBlock ? 'block' : 'global')

  return (
    <div className="w-72 border-l bg-background flex flex-col h-full overflow-hidden">
      <Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col h-full">
        <div className="flex items-center justify-between px-3 pt-3 pb-2 border-b">
          <TabsList className="h-8">
            <TabsTrigger value="block" className="text-xs h-7 px-2" disabled={!selectedBlock}>
              <Settings className="h-3 w-3 mr-1" />
              Block
            </TabsTrigger>
            <TabsTrigger value="global" className="text-xs h-7 px-2">
              <Palette className="h-3 w-3 mr-1" />
              Design
            </TabsTrigger>
          </TabsList>
          <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onClose}>
            <X className="h-3.5 w-3.5" />
          </Button>
        </div>

        <TabsContent value="block" className="flex-1 overflow-y-auto p-3 space-y-4 mt-0">
          {selectedBlock ? (
            <BlockPropertyPanel block={selectedBlock} onChange={onBlockChange} />
          ) : (
            <p className="text-sm text-muted-foreground text-center py-8">
              Select a block to edit its settings
            </p>
          )}
        </TabsContent>

        <TabsContent value="global" className="flex-1 overflow-y-auto p-3 space-y-4 mt-0">
          <GlobalStylesPanel
            globalStyles={globalStyles}
            onChange={onGlobalStylesChange}
          />
        </TabsContent>
      </Tabs>
    </div>
  )
}