"use client";

import React, { useState, useCallback } from "react";
import { ChartDataSource, QueryResult } from "./types";
import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection";
import { dashboardApi } from "@/lib/api/dashboard";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Label } from "@/components/ui/label";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Play, Loader2, Database, Code } from "lucide-react";

interface QueryEditorProps {
  dataSource?: ChartDataSource;
  onDataSourceChange: (dataSource: ChartDataSource) => void;
  onQueryTest?: (result: QueryResult) => void;
}

/**
 * SQL 쿼리 에디터 컴포넌트
 * - SQL 쿼리 작성 및 편집
 * - 쿼리 실행 및 결과 미리보기
 * - 현재 DB / 외부 DB 분기 처리
 */
export function QueryEditor({ dataSource, onDataSourceChange, onQueryTest }: QueryEditorProps) {
  const [query, setQuery] = useState(dataSource?.query || "");
  const [isExecuting, setIsExecuting] = useState(false);
  const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
  const [error, setError] = useState<string | null>(null);

  // 쿼리 실행
  const executeQuery = useCallback(async () => {
    console.log("🚀 executeQuery 호출됨!");
    console.log("📝 현재 쿼리:", query);
    console.log("✅ query.trim():", query.trim());

    if (!query.trim()) {
      setError("쿼리를 입력해주세요.");
      return;
    }

    // 외부 DB인 경우 커넥션 ID 확인
    if (dataSource?.connectionType === "external" && !dataSource?.externalConnectionId) {
      setError("외부 DB 커넥션을 선택해주세요.");
      console.log("❌ 쿼리가 비어있음!");
      return;
    }

    setIsExecuting(true);
    setError(null);
    console.log("🔄 쿼리 실행 시작...");

    try {
      let apiResult: { columns: string[]; rows: any[]; rowCount: number };

      // 현재 DB vs 외부 DB 분기
      if (dataSource?.connectionType === "external" && dataSource?.externalConnectionId) {
        // 외부 DB 쿼리 실행
        const result = await ExternalDbConnectionAPI.executeQuery(
          parseInt(dataSource.externalConnectionId),
          query.trim(),
        );

        if (!result.success) {
          throw new Error(result.message || "외부 DB 쿼리 실행에 실패했습니다.");
        }

        // ExternalDbConnectionAPI의 응답을 통일된 형식으로 변환
        apiResult = {
          columns: result.data?.[0] ? Object.keys(result.data[0]) : [],
          rows: result.data || [],
          rowCount: result.data?.length || 0,
        };
      } else {
        // 현재 DB 쿼리 실행
        apiResult = await dashboardApi.executeQuery(query.trim());
      }

      // 결과를 QueryResult 형식으로 변환
      const result: QueryResult = {
        columns: apiResult.columns,
        rows: apiResult.rows,
        totalRows: apiResult.rowCount,
        executionTime: 0,
      };

      setQueryResult(result);
      onQueryTest?.(result);

      // 데이터 소스 업데이트
      onDataSourceChange({
        ...dataSource,
        type: "database",
        query: query.trim(),
        refreshInterval: dataSource?.refreshInterval ?? 0,
        lastExecuted: new Date().toISOString(),
      });
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "쿼리 실행 중 오류가 발생했습니다.";
      setError(errorMessage);
    } finally {
      setIsExecuting(false);
    }
  }, [query, dataSource, onDataSourceChange, onQueryTest]);

  // 샘플 쿼리 삽입
  const insertSampleQuery = useCallback((sampleType: string) => {
    const samples = {
      comparison: `-- 제품별 월별 매출 비교 (다중 시리즈)
-- 갤럭시(Galaxy) vs 아이폰(iPhone) 매출 비교
SELECT 
  DATE_TRUNC('month', order_date) as month,
  SUM(CASE WHEN product_category = '갤럭시' THEN amount ELSE 0 END) as galaxy_sales,
  SUM(CASE WHEN product_category = '아이폰' THEN amount ELSE 0 END) as iphone_sales,
  SUM(CASE WHEN product_category = '기타' THEN amount ELSE 0 END) as other_sales
FROM orders 
WHERE order_date >= CURRENT_DATE - INTERVAL '12 months'
GROUP BY DATE_TRUNC('month', order_date)
ORDER BY month;`,

      sales: `-- 월별 매출 데이터
SELECT 
  DATE_TRUNC('month', order_date) as month,
  SUM(total_amount) as sales,
  COUNT(*) as order_count
FROM orders 
WHERE order_date >= CURRENT_DATE - INTERVAL '12 months'
GROUP BY DATE_TRUNC('month', order_date)
ORDER BY month;`,

      users: `-- 사용자 가입 추이
SELECT 
  DATE_TRUNC('week', created_at) as week,
  COUNT(*) as new_users
FROM users 
WHERE created_at >= CURRENT_DATE - INTERVAL '3 months'
GROUP BY DATE_TRUNC('week', created_at)
ORDER BY week;`,

      products: `-- 상품별 판매량
SELECT 
  product_name,
  SUM(quantity) as total_sold,
  SUM(quantity * price) as revenue
FROM order_items oi
JOIN products p ON oi.product_id = p.id
WHERE oi.created_at >= CURRENT_DATE - INTERVAL '1 month'
GROUP BY product_name
ORDER BY total_sold DESC
LIMIT 10;`,

      regional: `-- 지역별 매출 비교
SELECT 
  region as 지역,
  SUM(CASE WHEN quarter = 'Q1' THEN sales ELSE 0 END) as Q1,
  SUM(CASE WHEN quarter = 'Q2' THEN sales ELSE 0 END) as Q2,
  SUM(CASE WHEN quarter = 'Q3' THEN sales ELSE 0 END) as Q3,
  SUM(CASE WHEN quarter = 'Q4' THEN sales ELSE 0 END) as Q4
FROM regional_sales
WHERE year = EXTRACT(YEAR FROM CURRENT_DATE)
GROUP BY region
ORDER BY Q4 DESC;`,
    };

    setQuery(samples[sampleType as keyof typeof samples] || "");
  }, []);

  return (
    <div className="space-y-6">
      {/* 쿼리 에디터 헤더 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Database className="h-5 w-5 text-blue-600" />
          <h4 className="text-lg font-semibold text-gray-800">SQL 쿼리 에디터</h4>
        </div>
        <Button onClick={executeQuery} disabled={isExecuting || !query.trim()} size="sm">
          {isExecuting ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              실행 중...
            </>
          ) : (
            <>
              <Play className="mr-2 h-4 w-4" />
              실행
            </>
          )}
        </Button>
      </div>

      {/* 샘플 쿼리 버튼들 */}
      <Card className="p-4">
        <div className="flex flex-wrap items-center gap-2">
          <Label className="text-sm text-gray-600">샘플 쿼리:</Label>
          <Button variant="outline" size="sm" onClick={() => insertSampleQuery("comparison")}>
            <Code className="mr-2 h-3 w-3" />
            제품 비교
          </Button>
          <Button variant="outline" size="sm" onClick={() => insertSampleQuery("regional")}>
            <Code className="mr-2 h-3 w-3" />
            지역별 비교
          </Button>
          <Button variant="outline" size="sm" onClick={() => insertSampleQuery("sales")}>
            매출 데이터
          </Button>
          <Button variant="outline" size="sm" onClick={() => insertSampleQuery("users")}>
            사용자 추이
          </Button>
          <Button variant="outline" size="sm" onClick={() => insertSampleQuery("products")}>
            상품 판매량
          </Button>
        </div>
      </Card>

      {/* SQL 쿼리 입력 영역 */}
      <div className="space-y-2">
        <Label>SQL 쿼리</Label>
        <div className="relative">
          <Textarea
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="SELECT * FROM your_table WHERE condition = 'value';"
            className="h-40 resize-none font-mono text-sm"
          />
        </div>
      </div>

      {/* 새로고침 간격 설정 */}
      <div className="flex items-center gap-3">
        <Label className="text-sm">자동 새로고침:</Label>
        <Select
          value={String(dataSource?.refreshInterval ?? 0)}
          onValueChange={(value) =>
            onDataSourceChange({
              ...dataSource,
              type: "database",
              query,
              refreshInterval: parseInt(value),
            })
          }
        >
          <SelectTrigger className="w-32">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="0">수동</SelectItem>
            <SelectItem value="10000">10초</SelectItem>
            <SelectItem value="30000">30초</SelectItem>
            <SelectItem value="60000">1분</SelectItem>
            <SelectItem value="300000">5분</SelectItem>
            <SelectItem value="600000">10분</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 오류 메시지 */}
      {error && (
        <Alert variant="destructive">
          <AlertDescription>
            <div className="text-sm font-medium">오류</div>
            <div className="mt-1 text-sm">{error}</div>
          </AlertDescription>
        </Alert>
      )}

      {/* 쿼리 결과 미리보기 */}
      {queryResult && (
        <Card>
          <div className="border-b border-gray-200 bg-gray-50 px-4 py-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <span className="text-sm font-medium text-gray-700">쿼리 결과</span>
                <Badge variant="secondary">{queryResult.rows.length}행</Badge>
              </div>
              <span className="text-xs text-gray-500">실행 시간: {queryResult.executionTime}ms</span>
            </div>
          </div>

          <div className="p-3">
            {queryResult.rows.length > 0 ? (
              <div className="max-h-60 overflow-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      {queryResult.columns.map((col, idx) => (
                        <TableHead key={idx}>{col}</TableHead>
                      ))}
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {queryResult.rows.slice(0, 10).map((row, idx) => (
                      <TableRow key={idx}>
                        {queryResult.columns.map((col, colIdx) => (
                          <TableCell key={colIdx}>{String(row[col] ?? "")}</TableCell>
                        ))}
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>

                {queryResult.rows.length > 10 && (
                  <div className="mt-3 text-center text-xs text-gray-500">
                    ... 및 {queryResult.rows.length - 10}개 더 (미리보기는 10행까지만 표시)
                  </div>
                )}
              </div>
            ) : (
              <div className="py-8 text-center text-gray-500">결과가 없습니다.</div>
            )}
          </div>
        </Card>
      )}

      {/* 키보드 단축키 안내 */}
      <Card className="p-3">
        <div className="text-xs text-gray-600">
          <strong>단축키:</strong> Ctrl+Enter (쿼리 실행), Ctrl+/ (주석 토글)
        </div>
      </Card>
    </div>
  );
}

/**
 * 샘플 쿼리 결과 생성 함수
 */
function generateSampleQueryResult(query: string): QueryResult {
  // 쿼리에서 키워드 추출하여 적절한 샘플 데이터 생성
  const queryLower = query.toLowerCase();

  // 디버깅용 로그
  // console.log('generateSampleQueryResult called with query:', query.substring(0, 100));

  // 가장 구체적인 조건부터 먼저 체크 (순서 중요!)
  const isComparison =
    queryLower.includes("galaxy") ||
    queryLower.includes("갤럭시") ||
    queryLower.includes("아이폰") ||
    queryLower.includes("iphone");
  const isRegional = queryLower.includes("region") || queryLower.includes("지역");
  const isMonthly = queryLower.includes("month");
  const isSales = queryLower.includes("sales") || queryLower.includes("매출");
  const isUsers = queryLower.includes("users") || queryLower.includes("사용자");
  const isProducts = queryLower.includes("product") || queryLower.includes("상품");
  const isWeekly = queryLower.includes("week");

  // console.log('Sample data type detection:', {
  //   isComparison,
  //   isRegional,
  //   isWeekly,
  //   isProducts,
  //   isMonthly,
  //   isSales,
  //   isUsers,
  //   querySnippet: query.substring(0, 200)
  // });

  let columns: string[];
  let rows: Record<string, any>[];

  // 더 구체적인 조건부터 먼저 체크 (순서 중요!)
  if (isComparison) {
    // console.log('✅ Using COMPARISON data');
    // 제품 비교 데이터 (다중 시리즈)
    columns = ["month", "galaxy_sales", "iphone_sales", "other_sales"];
    rows = [
      { month: "2024-01", galaxy_sales: 450000, iphone_sales: 620000, other_sales: 130000 },
      { month: "2024-02", galaxy_sales: 520000, iphone_sales: 680000, other_sales: 150000 },
      { month: "2024-03", galaxy_sales: 480000, iphone_sales: 590000, other_sales: 110000 },
      { month: "2024-04", galaxy_sales: 610000, iphone_sales: 650000, other_sales: 160000 },
      { month: "2024-05", galaxy_sales: 720000, iphone_sales: 780000, other_sales: 180000 },
      { month: "2024-06", galaxy_sales: 680000, iphone_sales: 690000, other_sales: 170000 },
      { month: "2024-07", galaxy_sales: 750000, iphone_sales: 800000, other_sales: 170000 },
      { month: "2024-08", galaxy_sales: 690000, iphone_sales: 720000, other_sales: 170000 },
      { month: "2024-09", galaxy_sales: 730000, iphone_sales: 750000, other_sales: 170000 },
      { month: "2024-10", galaxy_sales: 800000, iphone_sales: 810000, other_sales: 170000 },
      { month: "2024-11", galaxy_sales: 870000, iphone_sales: 880000, other_sales: 170000 },
      { month: "2024-12", galaxy_sales: 950000, iphone_sales: 990000, other_sales: 160000 },
    ];
    // COMPARISON 데이터를 반환하고 함수 종료
    // console.log('COMPARISON data generated:', {
    //   columns,
    //   rowCount: rows.length,
    //   sampleRow: rows[0],
    //   allRows: rows,
    //   fieldTypes: {
    //     month: typeof rows[0].month,
    //     galaxy_sales: typeof rows[0].galaxy_sales,
    //     iphone_sales: typeof rows[0].iphone_sales,
    //     other_sales: typeof rows[0].other_sales
    //   },
    //   firstFewRows: rows.slice(0, 3),
    //   lastFewRows: rows.slice(-3)
    // });
    return {
      columns,
      rows,
      totalRows: rows.length,
      executionTime: Math.floor(Math.random() * 200) + 100,
    };
  } else if (isRegional) {
    // console.log('✅ Using REGIONAL data');
    // 지역별 분기별 매출
    columns = ["지역", "Q1", "Q2", "Q3", "Q4"];
    rows = [
      { 지역: "서울", Q1: 1200000, Q2: 1350000, Q3: 1420000, Q4: 1580000 },
      { 지역: "경기", Q1: 980000, Q2: 1120000, Q3: 1180000, Q4: 1290000 },
      { 지역: "부산", Q1: 650000, Q2: 720000, Q3: 780000, Q4: 850000 },
      { 지역: "대구", Q1: 450000, Q2: 490000, Q3: 520000, Q4: 580000 },
      { 지역: "인천", Q1: 520000, Q2: 580000, Q3: 620000, Q4: 690000 },
      { 지역: "광주", Q1: 380000, Q2: 420000, Q3: 450000, Q4: 490000 },
      { 지역: "대전", Q1: 410000, Q2: 460000, Q3: 490000, Q4: 530000 },
    ];
  } else if (isWeekly && isUsers) {
    // console.log('✅ Using USERS data');
    // 사용자 가입 추이
    columns = ["week", "new_users"];
    rows = [
      { week: "2024-W10", new_users: 23 },
      { week: "2024-W11", new_users: 31 },
      { week: "2024-W12", new_users: 28 },
      { week: "2024-W13", new_users: 35 },
      { week: "2024-W14", new_users: 42 },
      { week: "2024-W15", new_users: 38 },
      { week: "2024-W16", new_users: 45 },
      { week: "2024-W17", new_users: 52 },
      { week: "2024-W18", new_users: 48 },
      { week: "2024-W19", new_users: 55 },
      { week: "2024-W20", new_users: 61 },
      { week: "2024-W21", new_users: 58 },
    ];
  } else if (isProducts && !isComparison) {
    // console.log('✅ Using PRODUCTS data');
    // 상품별 판매량
    columns = ["product_name", "total_sold", "revenue"];
    rows = [
      { product_name: "스마트폰", total_sold: 156, revenue: 234000000 },
      { product_name: "노트북", total_sold: 89, revenue: 178000000 },
      { product_name: "태블릿", total_sold: 134, revenue: 67000000 },
      { product_name: "이어폰", total_sold: 267, revenue: 26700000 },
      { product_name: "스마트워치", total_sold: 98, revenue: 49000000 },
      { product_name: "키보드", total_sold: 78, revenue: 15600000 },
      { product_name: "마우스", total_sold: 145, revenue: 8700000 },
      { product_name: "모니터", total_sold: 67, revenue: 134000000 },
      { product_name: "프린터", total_sold: 34, revenue: 17000000 },
      { product_name: "웹캠", total_sold: 89, revenue: 8900000 },
    ];
  } else if (isMonthly && isSales && !isComparison) {
    // console.log('✅ Using MONTHLY SALES data');
    // 월별 매출 데이터
    columns = ["month", "sales", "order_count"];
    rows = [
      { month: "2024-01", sales: 1200000, order_count: 45 },
      { month: "2024-02", sales: 1350000, order_count: 52 },
      { month: "2024-03", sales: 1180000, order_count: 41 },
      { month: "2024-04", sales: 1420000, order_count: 58 },
      { month: "2024-05", sales: 1680000, order_count: 67 },
      { month: "2024-06", sales: 1540000, order_count: 61 },
      { month: "2024-07", sales: 1720000, order_count: 71 },
      { month: "2024-08", sales: 1580000, order_count: 63 },
      { month: "2024-09", sales: 1650000, order_count: 68 },
      { month: "2024-10", sales: 1780000, order_count: 75 },
      { month: "2024-11", sales: 1920000, order_count: 82 },
      { month: "2024-12", sales: 2100000, order_count: 89 },
    ];
  } else {
    // console.log('⚠️ Using DEFAULT data');
    // 기본 샘플 데이터
    columns = ["category", "value", "count"];
    rows = [
      { category: "A", value: 100, count: 10 },
      { category: "B", value: 150, count: 15 },
      { category: "C", value: 120, count: 12 },
      { category: "D", value: 180, count: 18 },
      { category: "E", value: 90, count: 9 },
      { category: "F", value: 200, count: 20 },
      { category: "G", value: 110, count: 11 },
      { category: "H", value: 160, count: 16 },
    ];
  }

  return {
    columns,
    rows,
    totalRows: rows.length,
    executionTime: Math.floor(Math.random() * 200) + 100, // 100-300ms
  };
}