"use client";

import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { ChevronDown, Settings } from "lucide-react";

interface AdvancedSettingsProps {
  connectionType: "data_save" | "external_call";
}

/**
 * ⚙️ 고급 설정 패널
 * - 트랜잭션 설정
 * - 배치 처리 설정
 * - 로깅 설정
 */
const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [settings, setSettings] = useState({
    batchSize: 1000,
    timeout: 30,
    retryCount: 3,
    logLevel: "INFO",
  });

  const handleSettingChange = (key: string, value: string | number) => {
    setSettings((prev) => ({ ...prev, [key]: value }));
  };

  return (
    <Card>
      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" className="h-auto w-full justify-between p-4">
            <div className="flex items-center gap-2">
              <Settings className="h-4 w-4" />
              <span className="font-medium">고급 설정</span>
            </div>
            <ChevronDown className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`} />
          </Button>
        </CollapsibleTrigger>

        <CollapsibleContent>
          <CardContent className="space-y-3 px-4 pt-0 pb-3">
            {connectionType === "data_save" && (
              <>
                {/* 트랜잭션 설정 - 컴팩트 */}
                <div className="space-y-2">
                  <h4 className="text-xs font-medium text-muted-foreground">🔄 트랜잭션 설정</h4>
                  <div className="grid grid-cols-3 gap-2">
                    <div>
                      <Label htmlFor="batchSize" className="text-xs text-gray-500">
                        배치
                      </Label>
                      <Input
                        id="batchSize"
                        type="number"
                        value={settings.batchSize}
                        onChange={(e) => handleSettingChange("batchSize", parseInt(e.target.value))}
                        className="h-7 text-xs"
                      />
                    </div>
                    <div>
                      <Label htmlFor="timeout" className="text-xs text-gray-500">
                        타임아웃
                      </Label>
                      <Input
                        id="timeout"
                        type="number"
                        value={settings.timeout}
                        onChange={(e) => handleSettingChange("timeout", parseInt(e.target.value))}
                        className="h-7 text-xs"
                      />
                    </div>
                    <div>
                      <Label htmlFor="retryCount" className="text-xs text-gray-500">
                        재시도
                      </Label>
                      <Input
                        id="retryCount"
                        type="number"
                        value={settings.retryCount}
                        onChange={(e) => handleSettingChange("retryCount", parseInt(e.target.value))}
                        className="h-7 text-xs"
                      />
                    </div>
                  </div>
                </div>
              </>
            )}

            {connectionType === "external_call" && (
              <>
                {/* API 호출 설정 - 컴팩트 */}
                <div className="space-y-2">
                  <h4 className="text-xs font-medium text-muted-foreground">🌐 API 호출 설정</h4>
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <Label htmlFor="timeout" className="text-xs text-gray-500">
                        타임아웃 (초)
                      </Label>
                      <Input
                        id="timeout"
                        type="number"
                        value={settings.timeout}
                        onChange={(e) => handleSettingChange("timeout", parseInt(e.target.value))}
                        className="h-7 text-xs"
                      />
                    </div>
                    <div>
                      <Label htmlFor="retryCount" className="text-xs text-gray-500">
                        재시도 횟수
                      </Label>
                      <Input
                        id="retryCount"
                        type="number"
                        value={settings.retryCount}
                        onChange={(e) => handleSettingChange("retryCount", parseInt(e.target.value))}
                        className="h-7 text-xs"
                      />
                    </div>
                  </div>
                </div>
              </>
            )}

            {/* 로깅 설정 - 컴팩트 */}
            <div className="space-y-2">
              <h4 className="text-xs font-medium text-muted-foreground">📝 로깅 설정</h4>
              <div>
                <Select value={settings.logLevel} onValueChange={(value) => handleSettingChange("logLevel", value)}>
                  <SelectTrigger className="h-7 text-xs">
                    <SelectValue placeholder="로그 레벨 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="DEBUG">DEBUG</SelectItem>
                    <SelectItem value="INFO">INFO</SelectItem>
                    <SelectItem value="WARN">WARN</SelectItem>
                    <SelectItem value="ERROR">ERROR</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            {/* 설정 요약 - 더 컴팩트 */}
            <div className="border-t pt-2">
              <div className="text-muted-foreground text-xs">
                배치: {settings.batchSize.toLocaleString()} | 타임아웃: {settings.timeout}s | 재시도:{" "}
                {settings.retryCount} | 로그: {settings.logLevel}
              </div>
            </div>
          </CardContent>
        </CollapsibleContent>
      </Collapsible>
    </Card>
  );
};

export default AdvancedSettings;