"use client";

/**
 * 세금계산서 목록 설정 패널
 */

import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { TaxInvoiceListConfig, defaultTaxInvoiceListConfig } from "./types";

interface TaxInvoiceListConfigPanelProps {
  config: TaxInvoiceListConfig;
  onChange: (config: TaxInvoiceListConfig) => void;
}

export function TaxInvoiceListConfigPanel({
  config,
  onChange,
}: TaxInvoiceListConfigPanelProps) {
  const currentConfig = { ...defaultTaxInvoiceListConfig, ...config };

  const handleChange = (key: keyof TaxInvoiceListConfig, value: any) => {
    onChange({ ...currentConfig, [key]: value });
  };

  return (
    <div className="space-y-4">
      {/* 기본 설정 */}
      <div className="space-y-3">
        <h4 className="text-sm font-medium">기본 설정</h4>
        
        <div>
          <Label className="text-xs">제목</Label>
          <Input
            value={currentConfig.title || ""}
            onChange={(e) => handleChange("title", e.target.value)}
            placeholder="세금계산서 관리"
            className="h-8 text-xs"
          />
        </div>

        <div className="flex items-center justify-between">
          <Label className="text-xs">헤더 표시</Label>
          <Switch
            checked={currentConfig.showHeader}
            onCheckedChange={(checked) => handleChange("showHeader", checked)}
          />
        </div>
      </div>

      {/* 기본 필터 */}
      <div className="space-y-3">
        <h4 className="text-sm font-medium">기본 필터</h4>
        
        <div>
          <Label className="text-xs">기본 유형</Label>
          <Select
            value={currentConfig.defaultInvoiceType}
            onValueChange={(v) => handleChange("defaultInvoiceType", v)}
          >
            <SelectTrigger className="h-8 text-xs">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">전체</SelectItem>
              <SelectItem value="sales">매출</SelectItem>
              <SelectItem value="purchase">매입</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div>
          <Label className="text-xs">기본 상태</Label>
          <Select
            value={currentConfig.defaultStatus}
            onValueChange={(v) => handleChange("defaultStatus", v)}
          >
            <SelectTrigger className="h-8 text-xs">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">전체</SelectItem>
              <SelectItem value="draft">임시저장</SelectItem>
              <SelectItem value="issued">발행완료</SelectItem>
              <SelectItem value="sent">전송완료</SelectItem>
              <SelectItem value="cancelled">취소됨</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div>
          <Label className="text-xs">페이지당 항목 수</Label>
          <Select
            value={String(currentConfig.pageSize)}
            onValueChange={(v) => handleChange("pageSize", parseInt(v))}
          >
            <SelectTrigger className="h-8 text-xs">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="10">10개</SelectItem>
              <SelectItem value="20">20개</SelectItem>
              <SelectItem value="50">50개</SelectItem>
              <SelectItem value="100">100개</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* 권한 설정 */}
      <div className="space-y-3">
        <h4 className="text-sm font-medium">권한 설정</h4>
        
        <div className="flex items-center justify-between">
          <Label className="text-xs">생성 가능</Label>
          <Switch
            checked={currentConfig.canCreate}
            onCheckedChange={(checked) => handleChange("canCreate", checked)}
          />
        </div>

        <div className="flex items-center justify-between">
          <Label className="text-xs">수정 가능</Label>
          <Switch
            checked={currentConfig.canEdit}
            onCheckedChange={(checked) => handleChange("canEdit", checked)}
          />
        </div>

        <div className="flex items-center justify-between">
          <Label className="text-xs">삭제 가능</Label>
          <Switch
            checked={currentConfig.canDelete}
            onCheckedChange={(checked) => handleChange("canDelete", checked)}
          />
        </div>

        <div className="flex items-center justify-between">
          <Label className="text-xs">발행 가능</Label>
          <Switch
            checked={currentConfig.canIssue}
            onCheckedChange={(checked) => handleChange("canIssue", checked)}
          />
        </div>

        <div className="flex items-center justify-between">
          <Label className="text-xs">취소 가능</Label>
          <Switch
            checked={currentConfig.canCancel}
            onCheckedChange={(checked) => handleChange("canCancel", checked)}
          />
        </div>
      </div>
    </div>
  );
}