'use client'

import * as React from 'react'
import { BlockType } from './types'
import { Button } from '../ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '../ui/dropdown-menu'
import {
  Plus,
  Type,
  BarChart3,
  Minus,
  MousePointerClick,
  ImageIcon,
  ArrowUpDown,
  Share2,
  Building2,
  FileText,
} from 'lucide-react'

interface BlockOption {
  type: BlockType
  label: string
  icon: React.ReactNode
  description: string
  category: 'content' | 'layout' | 'preset'
}

const BLOCK_OPTIONS: BlockOption[] = [
  // Content blocks
  { type: 'text', label: 'Text', icon: <Type className="h-4 w-4" />, description: 'Rich text content', category: 'content' },
  { type: 'image', label: 'Image', icon: <ImageIcon className="h-4 w-4" />, description: 'Image with caption', category: 'content' },
  { type: 'cta', label: 'Button', icon: <MousePointerClick className="h-4 w-4" />, description: 'Call to action button', category: 'content' },
  { type: 'metrics', label: 'Metrics', icon: <BarChart3 className="h-4 w-4" />, description: 'KPI grid', category: 'content' },

  // Layout blocks
  { type: 'divider', label: 'Divider', icon: <Minus className="h-4 w-4" />, description: 'Visual separator', category: 'layout' },
  { type: 'spacer', label: 'Spacer', icon: <ArrowUpDown className="h-4 w-4" />, description: 'Vertical spacing', category: 'layout' },

  // Preset blocks
  { type: 'header', label: 'Header', icon: <Building2 className="h-4 w-4" />, description: 'Logo + company name', category: 'preset' },
  { type: 'footer', label: 'Footer', icon: <FileText className="h-4 w-4" />, description: 'Unsubscribe + address', category: 'preset' },
  { type: 'social', label: 'Social Links', icon: <Share2 className="h-4 w-4" />, description: 'Social media icons', category: 'preset' },
]

interface AddBlockMenuProps {
  onAdd: (type: BlockType) => void
  variant?: 'default' | 'small' | 'inline'
}

export function AddBlockMenu({ onAdd, variant = 'default' }: AddBlockMenuProps) {
  const contentBlocks = BLOCK_OPTIONS.filter((b) => b.category === 'content')
  const layoutBlocks = BLOCK_OPTIONS.filter((b) => b.category === 'layout')
  const presetBlocks = BLOCK_OPTIONS.filter((b) => b.category === 'preset')

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        {variant === 'small' ? (
          <Button
            variant="outline"
            size="icon"
            className="h-6 w-6 rounded-full border-dashed"
          >
            <Plus className="h-3 w-3" />
          </Button>
        ) : variant === 'inline' ? (
          <Button
            variant="ghost"
            size="sm"
            className="h-8 gap-1 text-muted-foreground hover:text-foreground"
          >
            <Plus className="h-3 w-3" />
            <span className="text-xs">Add block</span>
          </Button>
        ) : (
          <Button variant="outline" size="sm" className="gap-2">
            <Plus className="h-4 w-4" />
            Add Block
          </Button>
        )}
      </DropdownMenuTrigger>
      <DropdownMenuContent align="center" className="w-56">
        <DropdownMenuLabel className="text-xs text-muted-foreground">
          Content
        </DropdownMenuLabel>
        {contentBlocks.map((option) => (
          <DropdownMenuItem
            key={option.type}
            onClick={() => onAdd(option.type)}
            className="flex items-center gap-3"
          >
            {option.icon}
            <div>
              <div className="text-sm font-medium">{option.label}</div>
              <div className="text-xs text-muted-foreground">
                {option.description}
              </div>
            </div>
          </DropdownMenuItem>
        ))}

        <DropdownMenuSeparator />
        <DropdownMenuLabel className="text-xs text-muted-foreground">
          Layout
        </DropdownMenuLabel>
        {layoutBlocks.map((option) => (
          <DropdownMenuItem
            key={option.type}
            onClick={() => onAdd(option.type)}
            className="flex items-center gap-3"
          >
            {option.icon}
            <div>
              <div className="text-sm font-medium">{option.label}</div>
              <div className="text-xs text-muted-foreground">
                {option.description}
              </div>
            </div>
          </DropdownMenuItem>
        ))}

        <DropdownMenuSeparator />
        <DropdownMenuLabel className="text-xs text-muted-foreground">
          Presets
        </DropdownMenuLabel>
        {presetBlocks.map((option) => (
          <DropdownMenuItem
            key={option.type}
            onClick={() => onAdd(option.type)}
            className="flex items-center gap-3"
          >
            {option.icon}
            <div>
              <div className="text-sm font-medium">{option.label}</div>
              <div className="text-xs text-muted-foreground">
                {option.description}
              </div>
            </div>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}