"use client"

import { Button } from "@/components/common/button"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
    DropdownMenuCheckboxItem,
} from "@/components/common/dropdown-menu"
import { Settings2, ChevronUp, ChevronDown, RotateCcw, Eye, EyeOff, Cog } from "lucide-react"
import { WidgetConfig } from "@/lib/types/dashboard"

interface WidgetSettingsProps {
    widgets: WidgetConfig[]
    onToggle: (id: string) => void
    onMove: (id: string, direction: "up" | "down") => void
    onReset: () => void
    onConfigure?: (widget: WidgetConfig) => void
}

export function WidgetSettings({ widgets, onToggle, onMove, onReset, onConfigure }: WidgetSettingsProps) {
    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant="outline" size="sm" className="h-8 gap-2">
                    <Settings2 className="h-4 w-4" />
                    <span className="hidden sm:inline">Customize</span>
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-64">
                <DropdownMenuLabel className="flex items-center justify-between">
                    Dashboard Widgets
                    <Button
                        variant="ghost"
                        size="sm"
                        className="h-6 px-2 text-xs"
                        onClick={onReset}
                    >
                        <RotateCcw className="h-3 w-3 mr-1" />
                        Reset
                    </Button>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                {widgets.map((widget, index) => (
                    <div key={widget.id} className="flex items-center gap-1 px-2 py-1.5 hover:bg-muted/50 rounded-sm">
                        <button
                            onClick={() => onToggle(widget.id)}
                            className="flex-1 flex items-center gap-2 text-sm hover:text-foreground transition-colors"
                        >
                            {widget.visible ? (
                                <Eye className="h-4 w-4 text-primary" />
                            ) : (
                                <EyeOff className="h-4 w-4 text-muted-foreground" />
                            )}
                            <span className={widget.visible ? "" : "text-muted-foreground line-through"}>
                                {widget.title}
                            </span>
                        </button>
                        <div className="flex items-center gap-0.5">
                            {widget.settings && onConfigure && (
                                <Button
                                    variant="ghost"
                                    size="icon"
                                    className="h-6 w-6"
                                    onClick={(e) => {
                                        e.stopPropagation()
                                        onConfigure(widget)
                                    }}
                                    title="Configure widget"
                                >
                                    <Cog className="h-3 w-3" />
                                </Button>
                            )}
                            <Button
                                variant="ghost"
                                size="icon"
                                className="h-6 w-6"
                                onClick={() => onMove(widget.id, "up")}
                                disabled={index === 0}
                            >
                                <ChevronUp className="h-3 w-3" />
                            </Button>
                            <Button
                                variant="ghost"
                                size="icon"
                                className="h-6 w-6"
                                onClick={() => onMove(widget.id, "down")}
                                disabled={index === widgets.length - 1}
                            >
                                <ChevronDown className="h-3 w-3" />
                            </Button>
                        </div>
                    </div>
                ))}
            </DropdownMenuContent>
        </DropdownMenu>
    )
}