"use client";

import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { AuthType } from "@/lib/api/externalRestApiConnection";

interface AuthenticationConfigProps {
  authType: AuthType;
  authConfig: any;
  onAuthTypeChange: (type: AuthType) => void;
  onAuthConfigChange: (config: any) => void;
}

export function AuthenticationConfig({
  authType,
  authConfig = {},
  onAuthTypeChange,
  onAuthConfigChange,
}: AuthenticationConfigProps) {
  // 인증 설정 변경
  const updateAuthConfig = (field: string, value: string) => {
    onAuthConfigChange({
      ...authConfig,
      [field]: value,
    });
  };

  return (
    <div className="space-y-4">
      {/* 인증 타입 선택 */}
      <div className="space-y-2">
        <Label htmlFor="auth-type">인증 타입</Label>
        <Select value={authType} onValueChange={(value) => onAuthTypeChange(value as AuthType)}>
          <SelectTrigger id="auth-type">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="none">인증 없음</SelectItem>
            <SelectItem value="api-key">API Key</SelectItem>
            <SelectItem value="bearer">Bearer Token</SelectItem>
            <SelectItem value="basic">Basic Auth</SelectItem>
            <SelectItem value="oauth2">OAuth 2.0</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 인증 타입별 설정 필드 */}
      {authType === "api-key" && (
        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
          <h4 className="text-sm font-medium">API Key 설정</h4>

          {/* 키 위치 */}
          <div className="space-y-2">
            <Label htmlFor="key-location">키 위치</Label>
            <Select
              value={authConfig.keyLocation || "header"}
              onValueChange={(value) => updateAuthConfig("keyLocation", value)}
            >
              <SelectTrigger id="key-location">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="header">Header</SelectItem>
                <SelectItem value="query">Query Parameter</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* 키 이름 */}
          <div className="space-y-2">
            <Label htmlFor="key-name">키 이름</Label>
            <Input
              id="key-name"
              type="text"
              value={authConfig.keyName || ""}
              onChange={(e) => updateAuthConfig("keyName", e.target.value)}
              placeholder="예: X-API-Key"
            />
          </div>

          {/* 키 값 */}
          <div className="space-y-2">
            <Label htmlFor="key-value">키 값</Label>
            <Input
              id="key-value"
              type="password"
              value={authConfig.keyValue || ""}
              onChange={(e) => updateAuthConfig("keyValue", e.target.value)}
              placeholder="API Key를 입력하세요"
            />
          </div>
        </div>
      )}

      {authType === "bearer" && (
        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
          <h4 className="text-sm font-medium">Bearer Token 설정</h4>

          {/* 토큰 */}
          <div className="space-y-2">
            <Label htmlFor="token">Token</Label>
            <Input
              id="token"
              type="password"
              value={authConfig.token || ""}
              onChange={(e) => updateAuthConfig("token", e.target.value)}
              placeholder="Bearer Token을 입력하세요"
            />
          </div>

          <p className="text-xs text-gray-500">
            * Authorization 헤더에 &quot;Bearer &#123;token&#125;&quot; 형식으로 전송됩니다.
          </p>
        </div>
      )}

      {authType === "basic" && (
        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
          <h4 className="text-sm font-medium">Basic Auth 설정</h4>

          {/* 사용자명 */}
          <div className="space-y-2">
            <Label htmlFor="username">사용자명</Label>
            <Input
              id="username"
              type="text"
              value={authConfig.username || ""}
              onChange={(e) => updateAuthConfig("username", e.target.value)}
              placeholder="사용자명을 입력하세요"
            />
          </div>

          {/* 비밀번호 */}
          <div className="space-y-2">
            <Label htmlFor="password">비밀번호</Label>
            <Input
              id="password"
              type="password"
              value={authConfig.password || ""}
              onChange={(e) => updateAuthConfig("password", e.target.value)}
              placeholder="비밀번호를 입력하세요"
            />
          </div>

          <p className="text-xs text-gray-500">* Authorization 헤더에 Base64 인코딩된 인증 정보가 전송됩니다.</p>
        </div>
      )}

      {authType === "oauth2" && (
        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
          <h4 className="text-sm font-medium">OAuth 2.0 설정</h4>

          {/* Client ID */}
          <div className="space-y-2">
            <Label htmlFor="client-id">Client ID</Label>
            <Input
              id="client-id"
              type="text"
              value={authConfig.clientId || ""}
              onChange={(e) => updateAuthConfig("clientId", e.target.value)}
              placeholder="Client ID를 입력하세요"
            />
          </div>

          {/* Client Secret */}
          <div className="space-y-2">
            <Label htmlFor="client-secret">Client Secret</Label>
            <Input
              id="client-secret"
              type="password"
              value={authConfig.clientSecret || ""}
              onChange={(e) => updateAuthConfig("clientSecret", e.target.value)}
              placeholder="Client Secret을 입력하세요"
            />
          </div>

          {/* Token URL */}
          <div className="space-y-2">
            <Label htmlFor="token-url">Token URL</Label>
            <Input
              id="token-url"
              type="text"
              value={authConfig.tokenUrl || ""}
              onChange={(e) => updateAuthConfig("tokenUrl", e.target.value)}
              placeholder="예: https://oauth.example.com/token"
            />
          </div>

          <p className="text-xs text-gray-500">* OAuth 2.0 Client Credentials Grant 방식을 사용합니다.</p>
        </div>
      )}

      {authType === "none" && (
        <div className="rounded-md border border-dashed p-4 text-center text-sm text-gray-500">
          인증이 필요하지 않은 공개 API입니다.
        </div>
      )}
    </div>
  );
}