"use client";

import React, { useState, useEffect } from "react";
import { DashboardElement } from "@/components/admin/dashboard/types";

interface CustomMetricWidgetProps {
  element?: DashboardElement;
}

// 집계 함수 실행
const calculateMetric = (rows: any[], field: string, aggregation: string): number => {
  if (rows.length === 0) return 0;

  switch (aggregation) {
    case "count":
      return rows.length;
    case "sum": {
      return rows.reduce((sum, row) => sum + (parseFloat(row[field]) || 0), 0);
    }
    case "avg": {
      const sum = rows.reduce((s, row) => s + (parseFloat(row[field]) || 0), 0);
      return rows.length > 0 ? sum / rows.length : 0;
    }
    case "min": {
      return Math.min(...rows.map((row) => parseFloat(row[field]) || 0));
    }
    case "max": {
      return Math.max(...rows.map((row) => parseFloat(row[field]) || 0));
    }
    default:
      return 0;
  }
};

// 색상 스타일 매핑
const colorMap = {
  indigo: { bg: "bg-indigo-50", text: "text-indigo-600", border: "border-indigo-200" },
  green: { bg: "bg-green-50", text: "text-green-600", border: "border-green-200" },
  blue: { bg: "bg-blue-50", text: "text-blue-600", border: "border-blue-200" },
  purple: { bg: "bg-purple-50", text: "text-purple-600", border: "border-purple-200" },
  orange: { bg: "bg-orange-50", text: "text-orange-600", border: "border-orange-200" },
  gray: { bg: "bg-gray-50", text: "text-gray-600", border: "border-gray-200" },
};

export default function CustomMetricWidget({ element }: CustomMetricWidgetProps) {
  const [metrics, setMetrics] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    console.log("🎯 CustomMetricWidget mounted, element:", element);
    console.log("📊 dataSource:", element?.dataSource);
    console.log("📈 customMetricConfig:", element?.customMetricConfig);
    loadData();

    // 자동 새로고침 (30초마다)
    const interval = setInterval(loadData, 30000);
    return () => clearInterval(interval);
  }, [element]);

  const loadData = async () => {
    try {
      setLoading(true);
      setError(null);

      // 쿼리나 설정이 없으면 초기 상태로 반환
      if (!element?.dataSource?.query || !element?.customMetricConfig?.metrics) {
        console.log("⚠️ 쿼리 또는 지표 설정이 없습니다");
        console.log("- dataSource.query:", element?.dataSource?.query);
        console.log("- customMetricConfig.metrics:", element?.customMetricConfig?.metrics);
        setMetrics([]);
        setLoading(false);
        return;
      }

      console.log("✅ 쿼리 실행 시작:", element.dataSource.query);

      const token = localStorage.getItem("authToken");
      const response = await fetch("/api/dashboards/execute-query", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          query: element.dataSource.query,
          connectionType: element.dataSource.connectionType || "current",
          connectionId: element.dataSource.connectionId,
        }),
      });

      if (!response.ok) throw new Error("데이터 로딩 실패");

      const result = await response.json();

      if (result.success && result.data?.rows) {
        const rows = result.data.rows;

        // 각 메트릭 계산
        const calculatedMetrics = element.customMetricConfig.metrics.map((metric) => {
          const value = calculateMetric(rows, metric.field, metric.aggregation);
          return {
            ...metric,
            calculatedValue: value,
          };
        });

        setMetrics(calculatedMetrics);
      } else {
        throw new Error(result.message || "데이터 로드 실패");
      }
    } catch (err) {
      console.error("메트릭 로드 실패:", err);
      setError(err instanceof Error ? err.message : "데이터를 불러올 수 없습니다");
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="flex h-full items-center justify-center bg-white">
        <div className="text-center">
          <div className="border-primary mx-auto h-8 w-8 animate-spin rounded-full border-2 border-t-transparent" />
          <p className="mt-2 text-sm text-gray-500">데이터 로딩 중...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex h-full items-center justify-center bg-white p-4">
        <div className="text-center">
          <p className="text-sm text-red-600">⚠️ {error}</p>
          <button
            onClick={loadData}
            className="mt-2 rounded bg-red-100 px-3 py-1 text-xs text-red-700 hover:bg-red-200"
          >
            다시 시도
          </button>
        </div>
      </div>
    );
  }

  if (!element?.dataSource?.query || !element?.customMetricConfig?.metrics || metrics.length === 0) {
    return (
      <div className="flex h-full items-center justify-center bg-white p-4">
        <div className="max-w-xs space-y-2 text-center">
          <h3 className="text-sm font-bold text-gray-900">사용자 커스텀 카드</h3>
          <div className="space-y-1.5 text-xs text-gray-600">
            <p className="font-medium">📊 맞춤형 지표 위젯</p>
            <ul className="space-y-0.5 text-left">
              <li>• SQL 쿼리로 데이터를 불러옵니다</li>
              <li>• 선택한 컬럼의 데이터로 지표를 계산합니다</li>
              <li>• COUNT, SUM, AVG, MIN, MAX 등 집계 함수 지원</li>
              <li>• 사용자 정의 단위 설정 가능</li>
            </ul>
          </div>
          <div className="mt-2 rounded-lg bg-blue-50 p-2 text-[10px] text-blue-700">
            <p className="font-medium">⚙️ 설정 방법</p>
            <p>SQL 쿼리를 입력하고 지표를 추가하세요</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-full w-full flex-col overflow-hidden bg-white p-4">
      {/* 스크롤 가능한 콘텐츠 영역 */}
      <div className="flex-1 overflow-y-auto">
        <div className="grid w-full gap-4" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))" }}>
          {metrics.map((metric) => {
            const colors = colorMap[metric.color as keyof typeof colorMap] || colorMap.gray;
            const formattedValue = metric.calculatedValue.toFixed(metric.decimals);

            return (
              <div key={metric.id} className={`rounded-lg border ${colors.bg} ${colors.border} p-4 text-center`}>
                <div className="text-sm text-gray-600">{metric.label}</div>
                <div className={`mt-2 text-3xl font-bold ${colors.text}`}>
                  {formattedValue}
                  <span className="ml-1 text-lg">{metric.unit}</span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}