"use client";

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

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

/**
 * 리스트 테이블 옵션 설정 컴포넌트
 * - 페이지 크기, 검색, 정렬 등 설정
 */
export function ListTableOptions({ config, onChange }: ListTableOptionsProps) {
  return (
    <Card className="p-4">
      <div className="mb-4">
        <h3 className="text-lg font-semibold text-gray-800">테이블 옵션</h3>
        <p className="text-sm text-gray-600">테이블 동작과 스타일을 설정하세요</p>
      </div>

      <div className="space-y-6">
        {/* 뷰 모드 */}
        <div>
          <Label className="mb-2 block text-sm font-medium">뷰 모드</Label>
          <RadioGroup
            value={config.viewMode}
            onValueChange={(value: "table" | "card") => onChange({ viewMode: value })}
          >
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="table" id="table" />
              <Label htmlFor="table" className="cursor-pointer font-normal">
                📊 테이블 (기본)
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="card" id="card" />
              <Label htmlFor="card" className="cursor-pointer font-normal">
                🗂️ 카드
              </Label>
            </div>
          </RadioGroup>
        </div>

        {/* 컬럼 모드 */}
        <div>
          <Label className="mb-2 block text-sm font-medium">컬럼 설정 방식</Label>
          <RadioGroup
            value={config.columnMode}
            onValueChange={(value: "auto" | "manual") => onChange({ columnMode: value })}
          >
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="auto" id="auto" />
              <Label htmlFor="auto" className="cursor-pointer font-normal">
                자동 (쿼리 결과에서 선택)
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="manual" id="manual" />
              <Label htmlFor="manual" className="cursor-pointer font-normal">
                수동 (직접 추가 및 매핑)
              </Label>
            </div>
          </RadioGroup>
        </div>

        {/* 카드 뷰 컬럼 수 */}
        {config.viewMode === "card" && (
          <div>
            <Label className="mb-2 block text-sm font-medium">카드 컬럼 수</Label>
            <Input
              type="number"
              min="1"
              max="6"
              value={config.cardColumns || 3}
              onChange={(e) => onChange({ cardColumns: parseInt(e.target.value) || 3 })}
              className="w-full"
            />
            <p className="mt-1 text-xs text-gray-500">한 줄에 표시할 카드 개수 (1-6)</p>
          </div>
        )}

        {/* 페이지 크기 */}
        <div>
          <Label className="mb-2 block text-sm font-medium">페이지당 행 수</Label>
          <Select value={String(config.pageSize)} onValueChange={(value) => onChange({ pageSize: parseInt(value) })}>
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="5">5개</SelectItem>
              <SelectItem value="10">10개</SelectItem>
              <SelectItem value="20">20개</SelectItem>
              <SelectItem value="50">50개</SelectItem>
              <SelectItem value="100">100개</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* 기능 활성화 */}
        <div className="space-y-3">
          <Label className="text-sm font-medium">기능</Label>
          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <Checkbox
                id="enablePagination"
                checked={config.enablePagination}
                onCheckedChange={(checked) => onChange({ enablePagination: checked as boolean })}
              />
              <Label htmlFor="enablePagination" className="cursor-pointer font-normal">
                페이지네이션
              </Label>
            </div>
          </div>
        </div>

        {/* 스타일 */}
        <div className="space-y-3">
          <Label className="text-sm font-medium">스타일</Label>
          <div className="space-y-2">
            {config.viewMode === "table" && (
              <>
                <div className="flex items-center gap-2">
                  <Checkbox
                    id="showHeader"
                    checked={config.showHeader}
                    onCheckedChange={(checked) => onChange({ showHeader: checked as boolean })}
                  />
                  <Label htmlFor="showHeader" className="cursor-pointer font-normal">
                    헤더 표시
                  </Label>
                </div>
                <div className="flex items-center gap-2">
                  <Checkbox
                    id="stripedRows"
                    checked={config.stripedRows}
                    onCheckedChange={(checked) => onChange({ stripedRows: checked as boolean })}
                  />
                  <Label htmlFor="stripedRows" className="cursor-pointer font-normal">
                    줄무늬 행
                  </Label>
                </div>
              </>
            )}
            <div className="flex items-center gap-2">
              <Checkbox
                id="compactMode"
                checked={config.compactMode}
                onCheckedChange={(checked) => onChange({ compactMode: checked as boolean })}
              />
              <Label htmlFor="compactMode" className="cursor-pointer font-normal">
                압축 모드 (작은 크기)
              </Label>
            </div>
          </div>
        </div>
      </div>
    </Card>
  );
}