"use client";

import React, { useState, useCallback, useEffect } from "react";
import { DashboardElement, ChartDataSource, QueryResult } from "../types";
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 { ChevronLeft, ChevronRight, Save, X } from "lucide-react";
import { DataSourceSelector } from "../data-sources/DataSourceSelector";
import { DatabaseConfig } from "../data-sources/DatabaseConfig";
import { ApiConfig } from "../data-sources/ApiConfig";
import { QueryEditor } from "../QueryEditor";

interface TodoWidgetConfigModalProps {
  isOpen: boolean;
  element: DashboardElement;
  onClose: () => void;
  onSave: (updates: Partial<DashboardElement>) => void;
}

/**
 * 일정관리 위젯 설정 모달 (범용)
 * - 2단계 설정: 데이터 소스 → 쿼리 입력/테스트
 */
export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: TodoWidgetConfigModalProps) {
  const [currentStep, setCurrentStep] = useState<1 | 2>(1);
  const [title, setTitle] = useState(element.title || "일정관리 위젯");
  const [dataSource, setDataSource] = useState<ChartDataSource>(
    element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 },
  );
  const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
  
  // 데이터베이스 연동 설정
  const [enableDbSync, setEnableDbSync] = useState(element.chartConfig?.enableDbSync || false);
  const [dbSyncMode, setDbSyncMode] = useState<"simple" | "advanced">(element.chartConfig?.dbSyncMode || "simple");
  const [tableName, setTableName] = useState(element.chartConfig?.tableName || "");
  const [columnMapping, setColumnMapping] = useState(element.chartConfig?.columnMapping || {
    id: "id",
    title: "title",
    description: "description",
    priority: "priority",
    status: "status",
    assignedTo: "assigned_to",
    dueDate: "due_date",
    isUrgent: "is_urgent",
  });

  // 모달 열릴 때 element에서 설정 로드
  useEffect(() => {
    if (isOpen) {
      setTitle(element.title || "일정관리 위젯");
      
      // 데이터 소스 설정 로드 (저장된 설정 우선, 없으면 기본값)
      const loadedDataSource = element.dataSource || { 
        type: "database", 
        connectionType: "current", 
        refreshInterval: 0 
      };
      setDataSource(loadedDataSource);
      
      // 저장된 쿼리가 있으면 자동으로 실행 (실제 결과 가져오기)
      if (loadedDataSource.query) {
          // 쿼리 자동 실행
          const executeQuery = async () => {
            try {
              const token = localStorage.getItem("authToken");
              const userLang = localStorage.getItem("userLang") || "KR";
              
              const apiUrl = loadedDataSource.connectionType === "external" && loadedDataSource.externalConnectionId
                ? `http://localhost:9771/api/external-db/query?userLang=${userLang}`
                : `http://localhost:9771/api/dashboards/execute-query?userLang=${userLang}`;
              
              const requestBody = loadedDataSource.connectionType === "external" && loadedDataSource.externalConnectionId
                ? {
                    connectionId: parseInt(loadedDataSource.externalConnectionId),
                    query: loadedDataSource.query,
                  }
                : { query: loadedDataSource.query };

              const response = await fetch(apiUrl, {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                  Authorization: `Bearer ${token}`,
                },
                body: JSON.stringify(requestBody),
              });

              if (response.ok) {
                const result = await response.json();
                const rows = result.data?.rows || result.data || [];
                setQueryResult({
                  rows: rows,
                  rowCount: rows.length,
                  executionTime: 0,
                });
              } else {
                // 실패해도 더미 결과로 2단계 진입 가능
                setQueryResult({
                  rows: [{ _info: "저장된 쿼리가 있습니다. 다시 테스트해주세요." }],
                  rowCount: 1,
                  executionTime: 0,
                });
              }
            } catch (error) {
              // 에러 발생해도 2단계 진입 가능
              setQueryResult({
                rows: [{ _info: "저장된 쿼리가 있습니다. 다시 테스트해주세요." }],
                rowCount: 1,
                executionTime: 0,
              });
            }
          };
          
          executeQuery();
        }
      
      // DB 동기화 설정 로드
      setEnableDbSync(element.chartConfig?.enableDbSync || false);
      setDbSyncMode(element.chartConfig?.dbSyncMode || "simple");
      setTableName(element.chartConfig?.tableName || "");
      if (element.chartConfig?.columnMapping) {
        setColumnMapping(element.chartConfig.columnMapping);
      }
      setCurrentStep(1);
    }
  }, [isOpen, element.id]);

  // 데이터 소스 타입 변경
  const handleDataSourceTypeChange = useCallback((type: "database" | "api") => {
    if (type === "database") {
      setDataSource((prev) => ({
        ...prev,
        type: "database",
        connectionType: "current",
      }));
    } else {
      setDataSource((prev) => ({
        ...prev,
        type: "api",
        method: "GET",
      }));
    }
    setQueryResult(null);
  }, []);

  // 데이터 소스 업데이트
  const handleDataSourceUpdate = useCallback((updates: Partial<ChartDataSource>) => {
    setDataSource((prev) => ({ ...prev, ...updates }));
  }, []);

  // 쿼리 실행 결과 처리
  const handleQueryTest = useCallback(
    (result: QueryResult) => {
      // console.log("🎯 TodoWidget - handleQueryTest 호출됨!");
      // console.log("📊 쿼리 결과:", result);
      // console.log("📝 rows 개수:", result.rows?.length);
      // console.log("❌ error:", result.error);
      setQueryResult(result);
      // console.log("✅ setQueryResult 호출 완료!");
      
      // 강제 리렌더링 확인
      // setTimeout(() => {
      //   console.log("🔄 1초 후 queryResult 상태:", result);
      // }, 1000);
    },
    [],
  );

  // 저장
  const handleSave = useCallback(() => {
    if (!dataSource.query || !queryResult || queryResult.error) {
      alert("쿼리를 입력하고 테스트를 먼저 실행해주세요.");
      return;
    }

    if (!queryResult.rows || queryResult.rows.length === 0) {
      alert("쿼리 결과가 없습니다. 데이터가 반환되는 쿼리를 입력해주세요.");
      return;
    }

    // 간편 모드에서 테이블명 필수 체크
    if (enableDbSync && dbSyncMode === "simple" && !tableName.trim()) {
      alert("데이터베이스 연동을 활성화하려면 테이블명을 입력해주세요.");
      return;
    }

    onSave({
      title,
      dataSource,
      chartConfig: {
        ...element.chartConfig,
        enableDbSync,
        dbSyncMode,
        tableName,
        columnMapping,
        insertQuery: element.chartConfig?.insertQuery,
        updateQuery: element.chartConfig?.updateQuery,
        deleteQuery: element.chartConfig?.deleteQuery,
      },
    });

    onClose();
  }, [title, dataSource, queryResult, enableDbSync, dbSyncMode, tableName, columnMapping, element.chartConfig, onSave, onClose]);

  // 다음 단계로
  const handleNext = useCallback(() => {
    if (currentStep === 1) {
      if (dataSource.type === "database") {
        if (!dataSource.connectionId && dataSource.connectionType === "external") {
          alert("외부 데이터베이스를 선택해주세요.");
          return;
        }
      } else if (dataSource.type === "api") {
        if (!dataSource.url) {
          alert("API URL을 입력해주세요.");
          return;
        }
      }
      setCurrentStep(2);
    }
  }, [currentStep, dataSource]);

  // 이전 단계로
  const handlePrev = useCallback(() => {
    if (currentStep === 2) {
      setCurrentStep(1);
    }
  }, [currentStep]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50">
      <div className="relative flex h-[90vh] w-[90vw] max-w-6xl flex-col rounded-lg bg-white shadow-xl">
        {/* 헤더 */}
        <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4">
          <div>
            <h2 className="text-xl font-bold text-gray-800">일정관리 위젯 설정</h2>
            <p className="mt-1 text-sm text-gray-500">
              데이터 소스와 쿼리를 설정하면 자동으로 일정 목록이 표시됩니다
            </p>
          </div>
          <button
            onClick={onClose}
            className="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* 진행 상태 */}
        <div className="border-b border-gray-200 bg-gray-50 px-6 py-3">
          <div className="flex items-center gap-4">
            <div className={`flex items-center gap-2 ${currentStep === 1 ? "text-primary" : "text-gray-400"}`}>
              <div
                className={`flex h-8 w-8 items-center justify-center rounded-full font-semibold ${
                  currentStep === 1 ? "bg-primary text-white" : "bg-gray-200"
                }`}
              >
                1
              </div>
              <span className="font-medium">데이터 소스 선택</span>
            </div>
            <ChevronRight className="h-4 w-4 text-gray-400" />
            <div className={`flex items-center gap-2 ${currentStep === 2 ? "text-primary" : "text-gray-400"}`}>
              <div
                className={`flex h-8 w-8 items-center justify-center rounded-full font-semibold ${
                  currentStep === 2 ? "bg-primary text-white" : "bg-gray-200"
                }`}
              >
                2
              </div>
              <span className="font-medium">쿼리 입력 및 테스트</span>
            </div>
          </div>
        </div>

        {/* 본문 */}
        <div className="flex-1 overflow-y-auto p-6">
          {/* Step 1: 데이터 소스 선택 */}
          {currentStep === 1 && (
            <div className="space-y-6">
              <div>
                <Label className="text-base font-semibold">제목</Label>
                <Input
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  placeholder="예: 오늘의 일정"
                  className="mt-2"
                />
              </div>

              <div>
                <Label className="text-base font-semibold">데이터 소스 타입</Label>
                <DataSourceSelector
                  dataSource={dataSource}
                  onTypeChange={handleDataSourceTypeChange}
                />
              </div>

              {dataSource.type === "database" && (
                <DatabaseConfig dataSource={dataSource} onUpdate={handleDataSourceUpdate} />
              )}

              {dataSource.type === "api" && <ApiConfig dataSource={dataSource} onUpdate={handleDataSourceUpdate} />}
            </div>
          )}

          {/* Step 2: 쿼리 입력 및 테스트 */}
          {currentStep === 2 && (
            <div className="space-y-6">
              <div>
                <div className="mb-4 rounded-lg bg-blue-50 p-4">
                  <h3 className="mb-2 font-semibold text-blue-900">💡 컬럼명 가이드</h3>
                  <p className="mb-2 text-sm text-blue-700">
                    쿼리 결과에 다음 컬럼명이 있으면 자동으로 일정 항목으로 변환됩니다:
                  </p>
                  <ul className="space-y-1 text-sm text-blue-600">
                    <li>
                      <code className="rounded bg-blue-100 px-1 py-0.5">id</code> - 고유 ID (없으면 자동 생성)
                    </li>
                    <li>
                      <code className="rounded bg-blue-100 px-1 py-0.5">title</code>,{" "}
                      <code className="rounded bg-blue-100 px-1 py-0.5">task</code>,{" "}
                      <code className="rounded bg-blue-100 px-1 py-0.5">name</code> - 제목 (필수)
                    </li>
                    <li>
                      <code className="rounded bg-blue-100 px-1 py-0.5">description</code>,{" "}
                      <code className="rounded bg-blue-100 px-1 py-0.5">desc</code>,{" "}
                      <code className="rounded bg-blue-100 px-1 py-0.5">content</code> - 상세 설명
                    </li>
                    <li>
                      <code className="rounded bg-blue-100 px-1 py-0.5">priority</code> - 우선순위 (urgent, high,
                      normal, low)
                    </li>
                    <li>
                      <code className="rounded bg-blue-100 px-1 py-0.5">status</code> - 상태 (pending, in_progress,
                      completed)
                    </li>
                    <li>
                      <code className="rounded bg-blue-100 px-1 py-0.5">assigned_to</code>,{" "}
                      <code className="rounded bg-blue-100 px-1 py-0.5">assignedTo</code>,{" "}
                      <code className="rounded bg-blue-100 px-1 py-0.5">user</code> - 담당자
                    </li>
                    <li>
                      <code className="rounded bg-blue-100 px-1 py-0.5">due_date</code>,{" "}
                      <code className="rounded bg-blue-100 px-1 py-0.5">dueDate</code>,{" "}
                      <code className="rounded bg-blue-100 px-1 py-0.5">deadline</code> - 마감일
                    </li>
                    <li>
                      <code className="rounded bg-blue-100 px-1 py-0.5">is_urgent</code>,{" "}
                      <code className="rounded bg-blue-100 px-1 py-0.5">isUrgent</code>,{" "}
                      <code className="rounded bg-blue-100 px-1 py-0.5">urgent</code> - 긴급 여부
                    </li>
                  </ul>
                </div>

                <QueryEditor
                  dataSource={dataSource}
                  onDataSourceChange={handleDataSourceUpdate}
                  onQueryTest={handleQueryTest}
                />
              </div>

              {/* 디버그: 항상 표시되는 테스트 메시지 */}
              <div className="mt-4 rounded-lg bg-yellow-50 border-2 border-yellow-500 p-4">
                <p className="text-sm font-bold text-yellow-900">
                  🔍 디버그: queryResult 상태 = {queryResult ? "있음" : "없음"}
                </p>
                {queryResult && (
                  <p className="text-xs text-yellow-700 mt-1">
                    rows: {queryResult.rows?.length}개, error: {queryResult.error || "없음"}
                  </p>
                )}
              </div>

              {queryResult && !queryResult.error && queryResult.rows && queryResult.rows.length > 0 && (
                <div className="mt-4 rounded-lg bg-green-50 border-2 border-green-500 p-4">
                  <h3 className="mb-2 font-semibold text-green-900">✅ 쿼리 테스트 성공!</h3>
                  <p className="text-sm text-green-700">
                    총 <strong>{queryResult.rows.length}개</strong>의 일정 항목을 찾았습니다.
                  </p>
                  <div className="mt-3 rounded bg-white p-3">
                    <p className="mb-2 text-xs font-semibold text-gray-600">첫 번째 데이터 미리보기:</p>
                    <pre className="overflow-x-auto text-xs text-gray-700">
                      {JSON.stringify(queryResult.rows[0], null, 2)}
                    </pre>
                  </div>
                </div>
              )}

              {/* 데이터베이스 연동 쿼리 (선택사항) */}
              <div className="mt-6 space-y-4 rounded-lg border-2 border-purple-200 bg-purple-50 p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="font-semibold text-purple-900">🔗 데이터베이스 연동 (선택사항)</h3>
                    <p className="text-sm text-purple-700">
                      위젯에서 추가/수정/삭제 시 데이터베이스에 직접 반영
                    </p>
                  </div>
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={enableDbSync}
                      onChange={(e) => setEnableDbSync(e.target.checked)}
                      className="h-4 w-4 rounded border-purple-300"
                    />
                    <span className="text-sm font-medium text-purple-900">활성화</span>
                  </label>
                </div>

                {enableDbSync && (
                  <>
                    {/* 모드 선택 */}
                    <div className="flex gap-2">
                      <button
                        onClick={() => setDbSyncMode("simple")}
                        className={`flex-1 rounded px-4 py-2 text-sm font-medium transition-colors ${
                          dbSyncMode === "simple"
                            ? "bg-purple-600 text-white"
                            : "bg-white text-purple-600 hover:bg-purple-100"
                        }`}
                      >
                        간편 모드
                      </button>
                      <button
                        onClick={() => setDbSyncMode("advanced")}
                        className={`flex-1 rounded px-4 py-2 text-sm font-medium transition-colors ${
                          dbSyncMode === "advanced"
                            ? "bg-purple-600 text-white"
                            : "bg-white text-purple-600 hover:bg-purple-100"
                        }`}
                      >
                        고급 모드
                      </button>
                    </div>

                    {/* 간편 모드 */}
                    {dbSyncMode === "simple" && (
                      <div className="space-y-4 rounded-lg border border-purple-300 bg-white p-4">
                        <p className="text-sm text-purple-700">
                          테이블명과 컬럼 매핑만 입력하면 자동으로 INSERT/UPDATE/DELETE 쿼리가 생성됩니다.
                        </p>

                        {/* 테이블명 */}
                        <div>
                          <Label className="text-sm font-semibold text-purple-900">테이블명 *</Label>
                          <Input
                            value={tableName}
                            onChange={(e) => setTableName(e.target.value)}
                            placeholder="예: tasks"
                            className="mt-2"
                          />
                        </div>

                        {/* 컬럼 매핑 */}
                        <div>
                          <Label className="text-sm font-semibold text-purple-900">컬럼 매핑</Label>
                          <div className="mt-2 grid grid-cols-2 gap-3">
                            <div>
                              <label className="text-xs text-gray-600">ID 컬럼</label>
                              <Input
                                value={columnMapping.id}
                                onChange={(e) => setColumnMapping({ ...columnMapping, id: e.target.value })}
                                placeholder="id"
                                className="mt-1 h-8 text-sm"
                              />
                            </div>
                            <div>
                              <label className="text-xs text-gray-600">제목 컬럼</label>
                              <Input
                                value={columnMapping.title}
                                onChange={(e) => setColumnMapping({ ...columnMapping, title: e.target.value })}
                                placeholder="title"
                                className="mt-1 h-8 text-sm"
                              />
                            </div>
                            <div>
                              <label className="text-xs text-gray-600">설명 컬럼</label>
                              <Input
                                value={columnMapping.description}
                                onChange={(e) => setColumnMapping({ ...columnMapping, description: e.target.value })}
                                placeholder="description"
                                className="mt-1 h-8 text-sm"
                              />
                            </div>
                            <div>
                              <label className="text-xs text-gray-600">우선순위 컬럼</label>
                              <Input
                                value={columnMapping.priority}
                                onChange={(e) => setColumnMapping({ ...columnMapping, priority: e.target.value })}
                                placeholder="priority"
                                className="mt-1 h-8 text-sm"
                              />
                            </div>
                            <div>
                              <label className="text-xs text-gray-600">상태 컬럼</label>
                              <Input
                                value={columnMapping.status}
                                onChange={(e) => setColumnMapping({ ...columnMapping, status: e.target.value })}
                                placeholder="status"
                                className="mt-1 h-8 text-sm"
                              />
                            </div>
                            <div>
                              <label className="text-xs text-gray-600">담당자 컬럼</label>
                              <Input
                                value={columnMapping.assignedTo}
                                onChange={(e) => setColumnMapping({ ...columnMapping, assignedTo: e.target.value })}
                                placeholder="assigned_to"
                                className="mt-1 h-8 text-sm"
                              />
                            </div>
                            <div>
                              <label className="text-xs text-gray-600">마감일 컬럼</label>
                              <Input
                                value={columnMapping.dueDate}
                                onChange={(e) => setColumnMapping({ ...columnMapping, dueDate: e.target.value })}
                                placeholder="due_date"
                                className="mt-1 h-8 text-sm"
                              />
                            </div>
                            <div>
                              <label className="text-xs text-gray-600">긴급 여부 컬럼</label>
                              <Input
                                value={columnMapping.isUrgent}
                                onChange={(e) => setColumnMapping({ ...columnMapping, isUrgent: e.target.value })}
                                placeholder="is_urgent"
                                className="mt-1 h-8 text-sm"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    )}

                    {/* 고급 모드 */}
                    {dbSyncMode === "advanced" && (
                      <div className="space-y-4">
                        <p className="text-sm text-purple-700">
                          복잡한 로직이 필요한 경우 직접 쿼리를 작성하세요.
                        </p>

                        {/* INSERT 쿼리 */}
                        <div>
                          <Label className="text-sm font-semibold text-purple-900">INSERT 쿼리 (추가)</Label>
                          <p className="mb-2 text-xs text-purple-600">
                            사용 가능한 변수: ${"{title}"}, ${"{description}"}, ${"{priority}"}, ${"{status}"}, ${"{assignedTo}"}, ${"{dueDate}"}, ${"{isUrgent}"}
                          </p>
                          <textarea
                            value={element.chartConfig?.insertQuery || ""}
                            onChange={(e) => {
                              const updates = {
                                ...element,
                                chartConfig: {
                                  ...element.chartConfig,
                                  insertQuery: e.target.value,
                                },
                              };
                              Object.assign(element, updates);
                            }}
                            placeholder="예: INSERT INTO tasks (title, description, status) VALUES ('${title}', '${description}', '${status}')"
                            className="h-20 w-full rounded border border-purple-300 bg-white px-3 py-2 text-sm font-mono focus:border-purple-500 focus:outline-none"
                          />
                        </div>

                        {/* UPDATE 쿼리 */}
                        <div>
                          <Label className="text-sm font-semibold text-purple-900">UPDATE 쿼리 (상태 변경)</Label>
                          <p className="mb-2 text-xs text-purple-600">
                            사용 가능한 변수: ${"{id}"}, ${"{status}"}
                          </p>
                          <textarea
                            value={element.chartConfig?.updateQuery || ""}
                            onChange={(e) => {
                              const updates = {
                                ...element,
                                chartConfig: {
                                  ...element.chartConfig,
                                  updateQuery: e.target.value,
                                },
                              };
                              Object.assign(element, updates);
                            }}
                            placeholder="예: UPDATE tasks SET status = '${status}' WHERE id = ${id}"
                            className="h-20 w-full rounded border border-purple-300 bg-white px-3 py-2 text-sm font-mono focus:border-purple-500 focus:outline-none"
                          />
                        </div>

                        {/* DELETE 쿼리 */}
                        <div>
                          <Label className="text-sm font-semibold text-purple-900">DELETE 쿼리 (삭제)</Label>
                          <p className="mb-2 text-xs text-purple-600">
                            사용 가능한 변수: ${"{id}"}
                          </p>
                          <textarea
                            value={element.chartConfig?.deleteQuery || ""}
                            onChange={(e) => {
                              const updates = {
                                ...element,
                                chartConfig: {
                                  ...element.chartConfig,
                                  deleteQuery: e.target.value,
                                },
                              };
                              Object.assign(element, updates);
                            }}
                            placeholder="예: DELETE FROM tasks WHERE id = ${id}"
                            className="h-20 w-full rounded border border-purple-300 bg-white px-3 py-2 text-sm font-mono focus:border-purple-500 focus:outline-none"
                          />
                        </div>
                      </div>
                    )}
                  </>
                )}
              </div>
            </div>
          )}
        </div>

        {/* 하단 버튼 */}
        <div className="flex items-center justify-between border-t border-gray-200 px-6 py-4">
          <div>
            {currentStep > 1 && (
              <Button onClick={handlePrev} variant="outline">
                <ChevronLeft className="mr-1 h-4 w-4" />
                이전
              </Button>
            )}
          </div>

          <div className="flex gap-2">
            <Button onClick={onClose} variant="outline">
              취소
            </Button>

            {currentStep < 2 ? (
              <Button onClick={handleNext}>
                다음
                <ChevronRight className="ml-1 h-4 w-4" />
              </Button>
            ) : (
              <Button 
                onClick={handleSave} 
                disabled={(() => {
                  const isDisabled = !queryResult || queryResult.error || !queryResult.rows || queryResult.rows.length === 0;
                  // console.log("💾 저장 버튼 disabled:", isDisabled);
                  // console.log("💾 queryResult:", queryResult);
                  return isDisabled;
                })()}
              >
                <Save className="mr-1 h-4 w-4" />
                저장
              </Button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}