'use client';

import { Settings2, RotateCcw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';
import type { ColumnWithVisibility } from '@/hooks/useColumnSettings';

interface ColumnSettingsPopoverProps {
  columns: ColumnWithVisibility[];
  onToggle: (key: string) => void;
  onReset: () => void;
  hasHiddenColumns: boolean;
}

export function ColumnSettingsPopover({
  columns,
  onToggle,
  onReset,
  hasHiddenColumns,
}: ColumnSettingsPopoverProps) {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" size="sm" className="relative h-8 px-2">
          <Settings2 className="h-4 w-4" />
          <span className="hidden sm:inline ml-1">컬럼</span>
          {hasHiddenColumns && (
            <span className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-blue-500" />
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent
        align="end"
        className="w-56 p-3"
        onPointerDownOutside={(e) => e.preventDefault()}
        onInteractOutside={(e) => e.preventDefault()}
      >
        <div className="flex items-center justify-between mb-2">
          <span className="text-sm font-medium">컬럼 표시 설정</span>
          <Button
            variant="ghost"
            size="sm"
            className="h-7 px-2 text-xs"
            onClick={onReset}
          >
            <RotateCcw className="h-3 w-3 mr-1" />
            초기화
          </Button>
        </div>
        <div className="space-y-1 max-h-[300px] overflow-y-auto">
          {columns.map((col) => (
            <label
              key={col.key}
              className={`flex items-center gap-2 px-2 py-1.5 rounded text-sm cursor-pointer hover:bg-muted/50 ${
                col.locked ? 'opacity-50 cursor-not-allowed' : ''
              }`}
            >
              <Checkbox
                checked={col.visible}
                onCheckedChange={() => onToggle(col.key)}
                disabled={col.locked}
              />
              <span>{col.label}</span>
              {col.locked && (
                <span className="text-xs text-muted-foreground ml-auto">고정</span>
              )}
            </label>
          ))}
        </div>
      </PopoverContent>
    </Popover>
  );
}