"use client";

import React from "react";
import { ListWidgetConfig } from "../../types";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Input } from "@/components/ui/input";

interface ListTableOptionsProps {
  config: ListWidgetConfig;
  onConfigChange: (updates: Partial<ListWidgetConfig>) => void;
}

/**
 * 리스트 테이블 옵션 설정 컴포넌트
 * - 페이지 크기, 검색, 정렬 등 설정
 */
export function ListTableOptions({ config, onConfigChange }: ListTableOptionsProps) {
  return (
    <div>
      <div className="space-y-3">
        {/* 뷰 모드 */}
        <div>
          <Label className="mb-1 block text-[9px] font-medium text-foreground">뷰 모드</Label>
          <RadioGroup
            value={config.viewMode}
            onValueChange={(value: "table" | "card") => onConfigChange({ viewMode: value })}
            className="flex items-center gap-3"
          >
            <div className="flex items-center gap-1.5">
              <RadioGroupItem value="table" id="table" className="h-3 w-3" />
              <Label htmlFor="table" className="cursor-pointer text-[11px] font-normal">
                테이블
              </Label>
            </div>
            <div className="flex items-center gap-1.5">
              <RadioGroupItem value="card" id="card" className="h-3 w-3" />
              <Label htmlFor="card" className="cursor-pointer text-[11px] font-normal">
                카드
              </Label>
            </div>
          </RadioGroup>
        </div>

        {/* 카드 뷰 컬럼 수 */}
        {config.viewMode === "card" && (
          <div>
            <Label className="mb-1 block text-[9px] font-medium text-foreground">카드 컬럼 수</Label>
            <Input
              type="number"
              min="1"
              max="6"
              value={config.cardColumns || 3}
              onChange={(e) => onConfigChange({ cardColumns: parseInt(e.target.value) || 3 })}
              className="h-6 w-full px-1.5 text-[11px]"
            />
            <p className="mt-0.5 text-[9px] text-muted-foreground">한 줄에 표시할 카드 개수 (1-6)</p>
          </div>
        )}

        {/* 페이지 크기 */}
        <div>
          <Label className="mb-1 block text-[9px] font-medium text-foreground">페이지당 행 수</Label>
          <Select
            value={String(config.pageSize)}
            onValueChange={(value) => onConfigChange({ pageSize: parseInt(value) })}
          >
            <SelectTrigger className="h-6 px-1.5 text-[11px]">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="5" className="text-[11px]">
                5개
              </SelectItem>
              <SelectItem value="10" className="text-[11px]">
                10개
              </SelectItem>
              <SelectItem value="20" className="text-[11px]">
                20개
              </SelectItem>
              <SelectItem value="50" className="text-[11px]">
                50개
              </SelectItem>
              <SelectItem value="100" className="text-[11px]">
                100개
              </SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* 기능 활성화 */}
        <div>
          <Label className="mb-1 block text-[9px] font-medium text-foreground">페이지네이션</Label>
          <RadioGroup
            value={config.enablePagination ? "enabled" : "disabled"}
            onValueChange={(value) => onConfigChange({ enablePagination: value === "enabled" })}
            className="flex items-center gap-3"
          >
            <div className="flex items-center gap-1.5">
              <RadioGroupItem value="enabled" id="pagination-enabled" className="h-3 w-3" />
              <Label htmlFor="pagination-enabled" className="cursor-pointer text-[11px] font-normal">
                사용
              </Label>
            </div>
            <div className="flex items-center gap-1.5">
              <RadioGroupItem value="disabled" id="pagination-disabled" className="h-3 w-3" />
              <Label htmlFor="pagination-disabled" className="cursor-pointer text-[11px] font-normal">
                사용 안 함
              </Label>
            </div>
          </RadioGroup>
        </div>

        {/* 헤더 표시 */}
        {config.viewMode === "table" && (
          <div>
            <Label className="mb-1 block text-[9px] font-medium text-foreground">헤더 표시</Label>
            <RadioGroup
              value={config.showHeader ? "show" : "hide"}
              onValueChange={(value) => onConfigChange({ showHeader: value === "show" })}
              className="flex items-center gap-3"
            >
              <div className="flex items-center gap-1.5">
                <RadioGroupItem value="show" id="header-show" className="h-3 w-3" />
                <Label htmlFor="header-show" className="cursor-pointer text-[11px] font-normal">
                  표시
                </Label>
              </div>
              <div className="flex items-center gap-1.5">
                <RadioGroupItem value="hide" id="header-hide" className="h-3 w-3" />
                <Label htmlFor="header-hide" className="cursor-pointer text-[11px] font-normal">
                  숨김
                </Label>
              </div>
            </RadioGroup>
          </div>
        )}

        {/* 줄무늬 행 */}
        {config.viewMode === "table" && (
          <div>
            <Label className="mb-1 block text-[9px] font-medium text-foreground">줄무늬 행</Label>
            <RadioGroup
              value={config.stripedRows ? "enabled" : "disabled"}
              onValueChange={(value) => onConfigChange({ stripedRows: value === "enabled" })}
              className="flex items-center gap-3"
            >
              <div className="flex items-center gap-1.5">
                <RadioGroupItem value="enabled" id="striped-enabled" className="h-3 w-3" />
                <Label htmlFor="striped-enabled" className="cursor-pointer text-[11px] font-normal">
                  사용
                </Label>
              </div>
              <div className="flex items-center gap-1.5">
                <RadioGroupItem value="disabled" id="striped-disabled" className="h-3 w-3" />
                <Label htmlFor="striped-disabled" className="cursor-pointer text-[11px] font-normal">
                  사용 안 함
                </Label>
              </div>
            </RadioGroup>
          </div>
        )}
      </div>
    </div>
  );
}