"use client";

import React from "react";
import { ChartDataSource } from "../types";
import { Card } from "@/components/ui/card";
import { Database, Globe } from "lucide-react";

interface DataSourceSelectorProps {
  dataSource: ChartDataSource;
  onTypeChange: (type: "database" | "api") => void;
}

/**
 * 데이터 소스 선택 컴포넌트
 * - DB vs API 선택
 * - 큰 카드 UI로 직관적인 선택
 */
export function DataSourceSelector({ dataSource, onTypeChange }: DataSourceSelectorProps) {
  return (
    <div className="space-y-4">
      <div>
        <h3 className="text-lg font-semibold text-foreground">1단계: 데이터 소스 선택</h3>
        <p className="mt-1 text-sm text-foreground">차트에 표시할 데이터를 어디서 가져올지 선택하세요</p>
      </div>

      <div className="grid grid-cols-2 gap-4">
        {/* 데이터베이스 옵션 */}
        <Card
          className={`cursor-pointer p-6 transition-all ${
            dataSource.type === "database"
              ? "border-2 border-primary bg-primary/10"
              : "border-2 border-border hover:border-border"
          }`}
          onClick={() => onTypeChange("database")}
        >
          <div className="flex flex-col items-center space-y-3 text-center">
            <div className={`rounded-full p-4 ${dataSource.type === "database" ? "bg-primary/10" : "bg-muted"}`}>
              <Database className={`h-8 w-8 ${dataSource.type === "database" ? "text-primary" : "text-foreground"}`} />
            </div>
            <div>
              <h4 className="font-semibold text-foreground">데이터베이스</h4>
              <p className="mt-1 text-sm text-foreground">SQL 쿼리로 데이터 조회</p>
            </div>
            <div className="space-y-1 text-xs text-muted-foreground">
              <div>✓ 현재 DB 또는 외부 DB</div>
              <div>✓ SELECT 쿼리 지원</div>
              <div>✓ 실시간 데이터 조회</div>
            </div>
          </div>
        </Card>

        {/* REST API 옵션 */}
        <Card
          className={`cursor-pointer p-6 transition-all ${
            dataSource.type === "api"
              ? "border-2 border-success bg-success/10"
              : "border-2 border-border hover:border-border"
          }`}
          onClick={() => onTypeChange("api")}
        >
          <div className="flex flex-col items-center space-y-3 text-center">
            <div className={`rounded-full p-4 ${dataSource.type === "api" ? "bg-success/10" : "bg-muted"}`}>
              <Globe className={`h-8 w-8 ${dataSource.type === "api" ? "text-success" : "text-foreground"}`} />
            </div>
            <div>
              <h4 className="font-semibold text-foreground">REST API</h4>
              <p className="mt-1 text-sm text-foreground">외부 API에서 데이터 가져오기</p>
            </div>
            <div className="space-y-1 text-xs text-muted-foreground">
              <div>✓ GET 요청 지원</div>
              <div>✓ JSON 응답 파싱</div>
              <div>✓ 커스텀 헤더 설정</div>
            </div>
          </div>
        </Card>
      </div>

      {/* 선택된 타입 표시 */}
      {dataSource.type && (
        <div className="rounded-lg border border-border bg-muted p-3">
          <div className="flex items-center gap-2 text-sm">
            <span className="font-medium text-foreground">선택됨:</span>
            <span className="text-foreground">{dataSource.type === "database" ? "🗄️ 데이터베이스" : "🌐 REST API"}</span>
          </div>
        </div>
      )}
    </div>
  );
}