"use client";

import React, { useState, useEffect, useMemo } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Plus, Trash2, GripVertical, Database, Table2, ChevronsUpDown, Check } from "lucide-react";
import { cn } from "@/lib/utils";
import { AggregationWidgetConfig, AggregationItem, AggregationType } from "./types";
import { tableManagementApi } from "@/lib/api/tableManagement";
import { tableTypeApi } from "@/lib/api/screen";

interface AggregationWidgetConfigPanelProps {
  config: AggregationWidgetConfig;
  onChange: (config: Partial<AggregationWidgetConfig>) => void;
  screenTableName?: string;
}

/**
 * 집계 위젯 설정 패널
 */
export function AggregationWidgetConfigPanel({
  config,
  onChange,
  screenTableName,
}: AggregationWidgetConfigPanelProps) {
  const [columns, setColumns] = useState<Array<{ columnName: string; label?: string; dataType?: string; inputType?: string; webType?: string }>>([]);
  const [loadingColumns, setLoadingColumns] = useState(false);
  const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName?: string }>>([]);
  const [loadingTables, setLoadingTables] = useState(false);
  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);

  // 실제 사용할 테이블 이름 계산
  const targetTableName = useMemo(() => {
    if (config.useCustomTable && config.customTableName) {
      return config.customTableName;
    }
    return config.tableName || screenTableName;
  }, [config.useCustomTable, config.customTableName, config.tableName, screenTableName]);

  // 화면 테이블명 자동 설정 (초기 한 번만)
  useEffect(() => {
    if (screenTableName && !config.tableName && !config.customTableName) {
      onChange({ tableName: screenTableName });
    }
  }, [screenTableName, config.tableName, config.customTableName, onChange]);

  // 전체 테이블 목록 로드
  useEffect(() => {
    const fetchTables = async () => {
      setLoadingTables(true);
      try {
        const response = await tableTypeApi.getTables();
        setAvailableTables(
          response.map((table: any) => ({
            tableName: table.tableName,
            displayName: table.displayName || table.tableName,
          }))
        );
      } catch (error) {
        console.error("테이블 목록 가져오기 실패:", error);
      } finally {
        setLoadingTables(false);
      }
    };
    fetchTables();
  }, []);

  // 테이블 컬럼 로드
  useEffect(() => {
    const loadColumns = async () => {
      if (!targetTableName) {
        setColumns([]);
        return;
      }

      setLoadingColumns(true);
      try {
        const result = await tableManagementApi.getColumnList(targetTableName);
        if (result.success && result.data?.columns) {
          setColumns(
            result.data.columns.map((col: any) => ({
              columnName: col.columnName || col.column_name,
              label: col.displayName || col.columnLabel || col.column_label || col.label || col.columnName || col.column_name,
              dataType: col.dataType || col.data_type,
              inputType: col.inputType || col.input_type,
              webType: col.webType || col.web_type,
            }))
          );
        } else {
          setColumns([]);
        }
      } catch (error) {
        console.error("컬럼 로드 실패:", error);
        setColumns([]);
      } finally {
        setLoadingColumns(false);
      }
    };

    loadColumns();
  }, [targetTableName]);

  // 집계 항목 추가
  const addItem = () => {
    const newItem: AggregationItem = {
      id: `agg-${Date.now()}`,
      columnName: "",
      columnLabel: "",
      type: "sum",
      format: "number",
      decimalPlaces: 0,
    };
    onChange({
      items: [...(config.items || []), newItem],
    });
  };

  // 집계 항목 삭제
  const removeItem = (id: string) => {
    onChange({
      items: (config.items || []).filter((item) => item.id !== id),
    });
  };

  // 집계 항목 업데이트
  const updateItem = (id: string, updates: Partial<AggregationItem>) => {
    onChange({
      items: (config.items || []).map((item) =>
        item.id === id ? { ...item, ...updates } : item
      ),
    });
  };

  // 숫자형 컬럼만 필터링 (count 제외) - 입력 타입(inputType/webType)으로만 확인
  const numericColumns = columns.filter((col) => {
    const inputType = (col.inputType || col.webType || "")?.toLowerCase();
    
    return (
      inputType === "number" ||
      inputType === "decimal" ||
      inputType === "integer" ||
      inputType === "float" ||
      inputType === "currency" ||
      inputType === "percent"
    );
  });

  return (
    <div className="space-y-4">
      <div className="text-sm font-medium">집계 위젯 설정</div>

      {/* 테이블 설정 (컴포넌트 개발 가이드 준수) */}
      <div className="space-y-3">
        <div>
          <h3 className="text-sm font-semibold">데이터 소스 테이블</h3>
          <p className="text-muted-foreground text-[10px]">집계할 데이터의 테이블을 선택합니다</p>
        </div>
        <hr className="border-border" />

        {/* 현재 선택된 테이블 표시 (카드 형태) */}
        <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
          <Database className="h-4 w-4 text-blue-500" />
          <div className="flex-1">
            <div className="text-xs font-medium">
              {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
            </div>
            <div className="text-[10px] text-muted-foreground">
              {config.useCustomTable ? "커스텀 테이블" : "화면 기본 테이블"}
            </div>
          </div>
        </div>

        {/* 테이블 선택 Combobox */}
        <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              role="combobox"
              aria-expanded={tableComboboxOpen}
              className="h-8 w-full justify-between text-xs"
              disabled={loadingTables}
            >
              테이블 변경...
              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-full p-0" align="start">
            <Command>
              <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
              <CommandList>
                <CommandEmpty className="py-2 text-xs">테이블을 찾을 수 없습니다</CommandEmpty>

                {/* 그룹 1: 화면 기본 테이블 */}
                {screenTableName && (
                  <CommandGroup heading="기본 (화면 테이블)">
                    <CommandItem
                      key={`default-${screenTableName}`}
                      value={screenTableName}
                      onSelect={() => {
                        onChange({
                          useCustomTable: false,
                          customTableName: undefined,
                          tableName: screenTableName,
                          items: [], // 테이블 변경 시 집계 항목 초기화
                        });
                        setTableComboboxOpen(false);
                      }}
                      className="text-xs cursor-pointer"
                    >
                      <Check
                        className={cn(
                          "mr-2 h-3 w-3",
                          !config.useCustomTable ? "opacity-100" : "opacity-0"
                        )}
                      />
                      <Database className="mr-2 h-3 w-3 text-blue-500" />
                      {screenTableName}
                    </CommandItem>
                  </CommandGroup>
                )}

                {/* 그룹 2: 전체 테이블 */}
                <CommandGroup heading="전체 테이블">
                  {availableTables
                    .filter((table) => table.tableName !== screenTableName)
                    .map((table) => (
                      <CommandItem
                        key={table.tableName}
                        value={`${table.tableName} ${table.displayName || ""}`}
                        onSelect={() => {
                          onChange({
                            useCustomTable: true,
                            customTableName: table.tableName,
                            tableName: table.tableName,
                            items: [], // 테이블 변경 시 집계 항목 초기화
                          });
                          setTableComboboxOpen(false);
                        }}
                        className="text-xs cursor-pointer"
                      >
                        <Check
                          className={cn(
                            "mr-2 h-3 w-3",
                            config.customTableName === table.tableName ? "opacity-100" : "opacity-0"
                          )}
                        />
                        <Table2 className="mr-2 h-3 w-3 text-slate-400" />
                        {table.displayName || table.tableName}
                      </CommandItem>
                    ))}
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>
      </div>

      {/* 레이아웃 설정 */}
      <div className="space-y-3">
        <div>
          <h3 className="text-sm font-semibold">레이아웃</h3>
        </div>
        <hr className="border-border" />

        <div className="grid grid-cols-2 gap-3">
          <div className="space-y-1">
            <Label className="text-xs">배치 방향</Label>
            <Select
              value={config.layout || "horizontal"}
              onValueChange={(value) => onChange({ layout: value as "horizontal" | "vertical" })}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="horizontal">가로 배치</SelectItem>
                <SelectItem value="vertical">세로 배치</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1">
            <Label className="text-xs">항목 간격</Label>
            <Input
              value={config.gap || "16px"}
              onChange={(e) => onChange({ gap: e.target.value })}
              placeholder="16px"
              className="h-8 text-xs"
            />
          </div>
        </div>

        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <Checkbox
              id="showLabels"
              checked={config.showLabels ?? true}
              onCheckedChange={(checked) => onChange({ showLabels: checked as boolean })}
            />
            <Label htmlFor="showLabels" className="text-xs">
              라벨 표시
            </Label>
          </div>

          <div className="flex items-center gap-2">
            <Checkbox
              id="showIcons"
              checked={config.showIcons ?? true}
              onCheckedChange={(checked) => onChange({ showIcons: checked as boolean })}
            />
            <Label htmlFor="showIcons" className="text-xs">
              아이콘 표시
            </Label>
          </div>
        </div>
      </div>

      {/* 집계 항목 설정 */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-semibold">집계 항목</h3>
          <Button variant="outline" size="sm" onClick={addItem} className="h-7 text-xs">
            <Plus className="mr-1 h-3 w-3" />
            항목 추가
          </Button>
        </div>
        <hr className="border-border" />

        {(config.items || []).length === 0 ? (
          <div className="rounded-md border border-dashed p-4 text-center text-xs text-muted-foreground">
            집계 항목을 추가해주세요
          </div>
        ) : (
          <div className="space-y-3">
            {(config.items || []).map((item, index) => (
              <div
                key={item.id}
                className="rounded-md border bg-slate-50 p-3 space-y-2"
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab" />
                    <span className="text-xs font-medium">항목 {index + 1}</span>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => removeItem(item.id)}
                    className="h-6 w-6 p-0 text-destructive"
                  >
                    <Trash2 className="h-3 w-3" />
                  </Button>
                </div>

                <div className="grid grid-cols-2 gap-2">
                  {/* 컬럼 선택 */}
                  <div className="space-y-1">
                    <Label className="text-[10px]">컬럼</Label>
                    <Select
                      value={item.columnName}
                      onValueChange={(value) => {
                        const col = columns.find((c) => c.columnName === value);
                        updateItem(item.id, {
                          columnName: value,
                          columnLabel: col?.label || value,
                        });
                      }}
                      disabled={loadingColumns || columns.length === 0}
                    >
                      <SelectTrigger className="h-7 text-xs">
                        <SelectValue placeholder={
                          loadingColumns 
                            ? "로딩 중..." 
                            : columns.length === 0 
                              ? "테이블을 선택하세요" 
                              : "컬럼 선택"
                        } />
                      </SelectTrigger>
                      <SelectContent>
                        {(item.type === "count" ? columns : numericColumns).length === 0 ? (
                          <div className="p-2 text-xs text-muted-foreground text-center">
                            {item.type === "count" 
                              ? "컬럼이 없습니다" 
                              : "숫자형 컬럼이 없습니다"}
                          </div>
                        ) : (
                          (item.type === "count" ? columns : numericColumns).map((col) => (
                            <SelectItem key={col.columnName} value={col.columnName}>
                              {col.label || col.columnName}
                            </SelectItem>
                          ))
                        )}
                      </SelectContent>
                    </Select>
                  </div>

                  {/* 집계 타입 */}
                  <div className="space-y-1">
                    <Label className="text-[10px]">집계 타입</Label>
                    <Select
                      value={item.type}
                      onValueChange={(value) => updateItem(item.id, { type: value as AggregationType })}
                    >
                      <SelectTrigger className="h-7 text-xs">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="sum">합계 (SUM)</SelectItem>
                        <SelectItem value="avg">평균 (AVG)</SelectItem>
                        <SelectItem value="count">개수 (COUNT)</SelectItem>
                        <SelectItem value="max">최대 (MAX)</SelectItem>
                        <SelectItem value="min">최소 (MIN)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  {/* 표시 라벨 */}
                  <div className="space-y-1">
                    <Label className="text-[10px]">표시 라벨</Label>
                    <Input
                      value={item.columnLabel || ""}
                      onChange={(e) => updateItem(item.id, { columnLabel: e.target.value })}
                      placeholder="표시될 라벨"
                      className="h-7 text-xs"
                    />
                  </div>

                  {/* 표시 형식 */}
                  <div className="space-y-1">
                    <Label className="text-[10px]">표시 형식</Label>
                    <Select
                      value={item.format || "number"}
                      onValueChange={(value) =>
                        updateItem(item.id, { format: value as "number" | "currency" | "percent" })
                      }
                    >
                      <SelectTrigger className="h-7 text-xs">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="number">숫자</SelectItem>
                        <SelectItem value="currency">통화</SelectItem>
                        <SelectItem value="percent">퍼센트</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  {/* 접두사 */}
                  <div className="space-y-1">
                    <Label className="text-[10px]">접두사</Label>
                    <Input
                      value={item.prefix || ""}
                      onChange={(e) => updateItem(item.id, { prefix: e.target.value })}
                      placeholder="예: ₩"
                      className="h-7 text-xs"
                    />
                  </div>

                  {/* 접미사 */}
                  <div className="space-y-1">
                    <Label className="text-[10px]">접미사</Label>
                    <Input
                      value={item.suffix || ""}
                      onChange={(e) => updateItem(item.id, { suffix: e.target.value })}
                      placeholder="예: 원, 개"
                      className="h-7 text-xs"
                    />
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* 스타일 설정 */}
      <div className="space-y-3">
        <div>
          <h3 className="text-sm font-semibold">스타일</h3>
        </div>
        <hr className="border-border" />

        <div className="grid grid-cols-2 gap-2">
          <div className="space-y-1">
            <Label className="text-xs">배경색</Label>
            <Input
              type="color"
              value={config.backgroundColor || "#f8fafc"}
              onChange={(e) => onChange({ backgroundColor: e.target.value })}
              className="h-8"
            />
          </div>

          <div className="space-y-1">
            <Label className="text-xs">모서리 둥글기</Label>
            <Input
              value={config.borderRadius || "6px"}
              onChange={(e) => onChange({ borderRadius: e.target.value })}
              placeholder="6px"
              className="h-8 text-xs"
            />
          </div>

          <div className="space-y-1">
            <Label className="text-xs">라벨 색상</Label>
            <Input
              type="color"
              value={config.labelColor || "#64748b"}
              onChange={(e) => onChange({ labelColor: e.target.value })}
              className="h-8"
            />
          </div>

          <div className="space-y-1">
            <Label className="text-xs">값 색상</Label>
            <Input
              type="color"
              value={config.valueColor || "#0f172a"}
              onChange={(e) => onChange({ valueColor: e.target.value })}
              className="h-8"
            />
          </div>
        </div>
      </div>
    </div>
  );
}