"use client";

/**
 * PivotGrid 설정 패널
 * 화면 관리에서 PivotGrid 컴포넌트를 설정하는 UI
 */

import React, { useState, useEffect, useCallback } from "react";
import { cn } from "@/lib/utils";
import {
  PivotGridComponentConfig,
  PivotFieldConfig,
  PivotAreaType,
  AggregationType,
  DateGroupInterval,
  FieldDataType,
} from "./types";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  Plus,
  Trash2,
  GripVertical,
  Settings2,
  Rows,
  Columns,
  Database,
  Filter,
  ChevronUp,
  ChevronDown,
} from "lucide-react";
import { apiClient } from "@/lib/api/client";

// ==================== 타입 ====================

interface TableInfo {
  table_name: string;
  table_comment?: string;
}

interface ColumnInfo {
  column_name: string;
  data_type: string;
  column_comment?: string;
  is_nullable: string;
}

interface PivotGridConfigPanelProps {
  config: PivotGridComponentConfig;
  onChange: (config: PivotGridComponentConfig) => void;
}

// ==================== 유틸리티 ====================

const AREA_LABELS: Record<PivotAreaType, { label: string; icon: React.ReactNode }> = {
  row: { label: "행 영역", icon: <Rows className="h-4 w-4" /> },
  column: { label: "열 영역", icon: <Columns className="h-4 w-4" /> },
  data: { label: "데이터 영역", icon: <Database className="h-4 w-4" /> },
  filter: { label: "필터 영역", icon: <Filter className="h-4 w-4" /> },
};

const AGGREGATION_OPTIONS: { value: AggregationType; label: string }[] = [
  { value: "sum", label: "합계" },
  { value: "count", label: "개수" },
  { value: "avg", label: "평균" },
  { value: "min", label: "최소" },
  { value: "max", label: "최대" },
  { value: "countDistinct", label: "고유값 개수" },
];

const DATE_GROUP_OPTIONS: { value: DateGroupInterval; label: string }[] = [
  { value: "year", label: "연도" },
  { value: "quarter", label: "분기" },
  { value: "month", label: "월" },
  { value: "week", label: "주" },
  { value: "day", label: "일" },
];

const DATA_TYPE_OPTIONS: { value: FieldDataType; label: string }[] = [
  { value: "string", label: "문자열" },
  { value: "number", label: "숫자" },
  { value: "date", label: "날짜" },
  { value: "boolean", label: "부울" },
];

// DB 타입을 FieldDataType으로 변환
function mapDbTypeToFieldType(dbType: string): FieldDataType {
  const type = dbType.toLowerCase();
  if (
    type.includes("int") ||
    type.includes("numeric") ||
    type.includes("decimal") ||
    type.includes("float") ||
    type.includes("double") ||
    type.includes("real")
  ) {
    return "number";
  }
  if (
    type.includes("date") ||
    type.includes("time") ||
    type.includes("timestamp")
  ) {
    return "date";
  }
  if (type.includes("bool")) {
    return "boolean";
  }
  return "string";
}

// ==================== 필드 설정 컴포넌트 ====================

interface FieldConfigItemProps {
  field: PivotFieldConfig;
  index: number;
  onChange: (field: PivotFieldConfig) => void;
  onRemove: () => void;
  onMoveUp: () => void;
  onMoveDown: () => void;
  isFirst: boolean;
  isLast: boolean;
}

const FieldConfigItem: React.FC<FieldConfigItemProps> = ({
  field,
  index,
  onChange,
  onRemove,
  onMoveUp,
  onMoveDown,
  isFirst,
  isLast,
}) => {
  return (
    <div className="flex items-start gap-2 p-2 rounded border border-border bg-background">
      {/* 드래그 핸들 & 순서 버튼 */}
      <div className="flex flex-col items-center gap-0.5 pt-1">
        <Button
          variant="ghost"
          size="icon"
          className="h-5 w-5"
          onClick={onMoveUp}
          disabled={isFirst}
        >
          <ChevronUp className="h-3 w-3" />
        </Button>
        <GripVertical className="h-4 w-4 text-muted-foreground" />
        <Button
          variant="ghost"
          size="icon"
          className="h-5 w-5"
          onClick={onMoveDown}
          disabled={isLast}
        >
          <ChevronDown className="h-3 w-3" />
        </Button>
      </div>

      {/* 필드 설정 */}
      <div className="flex-1 space-y-2">
        {/* 필드명 & 라벨 */}
        <div className="flex gap-2">
          <div className="flex-1">
            <Label className="text-xs">필드명</Label>
            <Input
              value={field.field}
              onChange={(e) => onChange({ ...field, field: e.target.value })}
              placeholder="column_name"
              className="h-8 text-xs"
            />
          </div>
          <div className="flex-1">
            <Label className="text-xs">표시 라벨</Label>
            <Input
              value={field.caption}
              onChange={(e) => onChange({ ...field, caption: e.target.value })}
              placeholder="표시명"
              className="h-8 text-xs"
            />
          </div>
        </div>

        {/* 데이터 타입 & 집계 함수 */}
        <div className="flex gap-2">
          <div className="flex-1">
            <Label className="text-xs">데이터 타입</Label>
            <Select
              value={field.dataType || "string"}
              onValueChange={(v) =>
                onChange({ ...field, dataType: v as FieldDataType })
              }
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {DATA_TYPE_OPTIONS.map((opt) => (
                  <SelectItem key={opt.value} value={opt.value}>
                    {opt.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {field.area === "data" && (
            <div className="flex-1">
              <Label className="text-xs">집계 함수</Label>
              <Select
                value={field.summaryType || "sum"}
                onValueChange={(v) =>
                  onChange({ ...field, summaryType: v as AggregationType })
                }
              >
                <SelectTrigger className="h-8 text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {AGGREGATION_OPTIONS.map((opt) => (
                    <SelectItem key={opt.value} value={opt.value}>
                      {opt.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          )}

          {field.dataType === "date" &&
            (field.area === "row" || field.area === "column") && (
              <div className="flex-1">
                <Label className="text-xs">그룹 단위</Label>
                <Select
                  value={field.groupInterval || "__none__"}
                  onValueChange={(v) =>
                    onChange({
                      ...field,
                      groupInterval:
                        v === "__none__" ? undefined : (v as DateGroupInterval),
                    })
                  }
                >
                  <SelectTrigger className="h-8 text-xs">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="__none__">원본값</SelectItem>
                    {DATE_GROUP_OPTIONS.map((opt) => (
                      <SelectItem key={opt.value} value={opt.value}>
                        {opt.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}
        </div>
      </div>

      {/* 삭제 버튼 */}
      <Button
        variant="ghost"
        size="icon"
        className="h-8 w-8 text-destructive hover:text-destructive"
        onClick={onRemove}
      >
        <Trash2 className="h-4 w-4" />
      </Button>
    </div>
  );
};

// ==================== 영역별 필드 목록 ====================

interface AreaFieldListProps {
  area: PivotAreaType;
  fields: PivotFieldConfig[];
  allColumns: ColumnInfo[];
  onFieldsChange: (fields: PivotFieldConfig[]) => void;
}

const AreaFieldList: React.FC<AreaFieldListProps> = ({
  area,
  fields,
  allColumns,
  onFieldsChange,
}) => {
  const areaFields = fields.filter((f) => f.area === area);
  const { label, icon } = AREA_LABELS[area];

  const handleAddField = () => {
    const newField: PivotFieldConfig = {
      field: "",
      caption: "",
      area,
      areaIndex: areaFields.length,
      dataType: "string",
      visible: true,
    };
    if (area === "data") {
      newField.summaryType = "sum";
    }
    onFieldsChange([...fields, newField]);
  };

  const handleAddFromColumn = (column: ColumnInfo) => {
    const dataType = mapDbTypeToFieldType(column.data_type);
    const newField: PivotFieldConfig = {
      field: column.column_name,
      caption: column.column_comment || column.column_name,
      area,
      areaIndex: areaFields.length,
      dataType,
      visible: true,
    };
    if (area === "data") {
      newField.summaryType = "sum";
    }
    onFieldsChange([...fields, newField]);
  };

  const handleFieldChange = (index: number, updatedField: PivotFieldConfig) => {
    const newFields = [...fields];
    const globalIndex = fields.findIndex(
      (f) => f.area === area && f.areaIndex === index
    );
    if (globalIndex >= 0) {
      newFields[globalIndex] = updatedField;
      onFieldsChange(newFields);
    }
  };

  const handleRemoveField = (index: number) => {
    const newFields = fields.filter(
      (f) => !(f.area === area && f.areaIndex === index)
    );
    // 인덱스 재정렬
    let idx = 0;
    newFields.forEach((f) => {
      if (f.area === area) {
        f.areaIndex = idx++;
      }
    });
    onFieldsChange(newFields);
  };

  const handleMoveField = (fromIndex: number, direction: "up" | "down") => {
    const toIndex = direction === "up" ? fromIndex - 1 : fromIndex + 1;
    if (toIndex < 0 || toIndex >= areaFields.length) return;

    const newAreaFields = [...areaFields];
    const [moved] = newAreaFields.splice(fromIndex, 1);
    newAreaFields.splice(toIndex, 0, moved);

    // 인덱스 재정렬
    newAreaFields.forEach((f, idx) => {
      f.areaIndex = idx;
    });

    // 전체 필드 업데이트
    const newFields = fields.filter((f) => f.area !== area);
    onFieldsChange([...newFields, ...newAreaFields]);
  };

  // 이미 추가된 컬럼 제외
  const availableColumns = allColumns.filter(
    (col) => !fields.some((f) => f.field === col.column_name)
  );

  return (
    <AccordionItem value={area}>
      <AccordionTrigger className="py-2">
        <div className="flex items-center gap-2">
          {icon}
          <span>{label}</span>
          <Badge variant="secondary" className="ml-2">
            {areaFields.length}
          </Badge>
        </div>
      </AccordionTrigger>
      <AccordionContent className="space-y-2 pt-2">
        {/* 필드 목록 */}
        {areaFields
          .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0))
          .map((field, idx) => (
            <FieldConfigItem
              key={`${field.field}-${idx}`}
              field={field}
              index={field.areaIndex || idx}
              onChange={(f) => handleFieldChange(field.areaIndex || idx, f)}
              onRemove={() => handleRemoveField(field.areaIndex || idx)}
              onMoveUp={() => handleMoveField(idx, "up")}
              onMoveDown={() => handleMoveField(idx, "down")}
              isFirst={idx === 0}
              isLast={idx === areaFields.length - 1}
            />
          ))}

        {/* 필드 추가 */}
        <div className="flex gap-2">
          <Select onValueChange={(v) => {
            const col = allColumns.find(c => c.column_name === v);
            if (col) handleAddFromColumn(col);
          }}>
            <SelectTrigger className="h-8 text-xs flex-1">
              <SelectValue placeholder="컬럼 선택" />
            </SelectTrigger>
            <SelectContent>
              {availableColumns.length === 0 ? (
                <SelectItem value="__none__" disabled>
                  추가 가능한 컬럼이 없습니다
                </SelectItem>
              ) : (
                availableColumns.map((col) => (
                  <SelectItem key={col.column_name} value={col.column_name}>
                    <div className="flex items-center gap-2">
                      <span>{col.column_name}</span>
                      {col.column_comment && (
                        <span className="text-muted-foreground">
                          ({col.column_comment})
                        </span>
                      )}
                    </div>
                  </SelectItem>
                ))
              )}
            </SelectContent>
          </Select>

          <Button
            variant="outline"
            size="sm"
            className="h-8"
            onClick={handleAddField}
          >
            <Plus className="h-4 w-4 mr-1" />
            직접 추가
          </Button>
        </div>
      </AccordionContent>
    </AccordionItem>
  );
};

// ==================== 메인 컴포넌트 ====================

export const PivotGridConfigPanel: React.FC<PivotGridConfigPanelProps> = ({
  config,
  onChange,
}) => {
  const [tables, setTables] = useState<TableInfo[]>([]);
  const [columns, setColumns] = useState<ColumnInfo[]>([]);
  const [loadingTables, setLoadingTables] = useState(false);
  const [loadingColumns, setLoadingColumns] = useState(false);

  // 테이블 목록 로드
  useEffect(() => {
    const loadTables = async () => {
      setLoadingTables(true);
      try {
        const response = await apiClient.get("/api/table-management/list");
        if (response.data.success) {
          setTables(response.data.data || []);
        }
      } catch (error) {
        console.error("테이블 목록 로드 실패:", error);
      } finally {
        setLoadingTables(false);
      }
    };
    loadTables();
  }, []);

  // 테이블 선택 시 컬럼 로드
  useEffect(() => {
    const loadColumns = async () => {
      if (!config.dataSource?.tableName) {
        setColumns([]);
        return;
      }

      setLoadingColumns(true);
      try {
        const response = await apiClient.get(
          `/api/table-management/columns/${config.dataSource.tableName}`
        );
        if (response.data.success) {
          setColumns(response.data.data || []);
        }
      } catch (error) {
        console.error("컬럼 목록 로드 실패:", error);
      } finally {
        setLoadingColumns(false);
      }
    };
    loadColumns();
  }, [config.dataSource?.tableName]);

  // 설정 업데이트 헬퍼
  const updateConfig = useCallback(
    (updates: Partial<PivotGridComponentConfig>) => {
      onChange({ ...config, ...updates });
    },
    [config, onChange]
  );

  return (
    <div className="space-y-4">
      {/* 데이터 소스 설정 */}
      <div className="space-y-3">
        <Label className="text-sm font-medium">데이터 소스</Label>

        <div className="space-y-2">
          <Label className="text-xs">테이블 선택</Label>
          <Select
            value={config.dataSource?.tableName || "__none__"}
            onValueChange={(v) =>
              updateConfig({
                dataSource: {
                  ...config.dataSource,
                  type: "table",
                  tableName: v === "__none__" ? undefined : v,
                },
                fields: [], // 테이블 변경 시 필드 초기화
              })
            }
          >
            <SelectTrigger className="h-9">
              <SelectValue placeholder="테이블 선택" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="__none__">선택 안 함</SelectItem>
              {tables.map((table) => (
                <SelectItem key={table.table_name} value={table.table_name}>
                  <div className="flex items-center gap-2">
                    <span>{table.table_name}</span>
                    {table.table_comment && (
                      <span className="text-muted-foreground">
                        ({table.table_comment})
                      </span>
                    )}
                  </div>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      <Separator />

      {/* 필드 설정 */}
      {config.dataSource?.tableName && (
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <Label className="text-sm font-medium">필드 설정</Label>
            <Badge variant="outline">
              {columns.length}개 컬럼
            </Badge>
          </div>

          {loadingColumns ? (
            <div className="text-sm text-muted-foreground">
              컬럼 로딩 중...
            </div>
          ) : (
            <Accordion
              type="multiple"
              defaultValue={["row", "column", "data"]}
              className="w-full"
            >
              {(["row", "column", "data", "filter"] as PivotAreaType[]).map(
                (area) => (
                  <AreaFieldList
                    key={area}
                    area={area}
                    fields={config.fields || []}
                    allColumns={columns}
                    onFieldsChange={(fields) => updateConfig({ fields })}
                  />
                )
              )}
            </Accordion>
          )}
        </div>
      )}

      <Separator />

      {/* 표시 설정 */}
      <div className="space-y-3">
        <Label className="text-sm font-medium">표시 설정</Label>

        <div className="grid grid-cols-2 gap-3">
          <div className="flex items-center justify-between">
            <Label className="text-xs">행 총계</Label>
            <Switch
              checked={config.totals?.showRowGrandTotals !== false}
              onCheckedChange={(v) =>
                updateConfig({
                  totals: { ...config.totals, showRowGrandTotals: v },
                })
              }
            />
          </div>

          <div className="flex items-center justify-between">
            <Label className="text-xs">열 총계</Label>
            <Switch
              checked={config.totals?.showColumnGrandTotals !== false}
              onCheckedChange={(v) =>
                updateConfig({
                  totals: { ...config.totals, showColumnGrandTotals: v },
                })
              }
            />
          </div>

          <div className="flex items-center justify-between">
            <Label className="text-xs">행 소계</Label>
            <Switch
              checked={config.totals?.showRowTotals !== false}
              onCheckedChange={(v) =>
                updateConfig({
                  totals: { ...config.totals, showRowTotals: v },
                })
              }
            />
          </div>

          <div className="flex items-center justify-between">
            <Label className="text-xs">열 소계</Label>
            <Switch
              checked={config.totals?.showColumnTotals !== false}
              onCheckedChange={(v) =>
                updateConfig({
                  totals: { ...config.totals, showColumnTotals: v },
                })
              }
            />
          </div>
        </div>

        <div className="flex items-center justify-between">
          <Label className="text-xs">줄 교차 색상</Label>
          <Switch
            checked={config.style?.alternateRowColors !== false}
            onCheckedChange={(v) =>
              updateConfig({
                style: { ...config.style, alternateRowColors: v },
              })
            }
          />
        </div>

        <div className="flex items-center justify-between">
          <Label className="text-xs">총계 강조</Label>
          <Switch
            checked={config.style?.highlightTotals !== false}
            onCheckedChange={(v) =>
              updateConfig({
                style: { ...config.style, highlightTotals: v },
              })
            }
          />
        </div>
      </div>

      <Separator />

      {/* 기능 설정 */}
      <div className="space-y-3">
        <Label className="text-sm font-medium">기능 설정</Label>

        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label className="text-xs">전체 확장/축소 버튼</Label>
            <Switch
              checked={config.allowExpandAll !== false}
              onCheckedChange={(v) =>
                updateConfig({ allowExpandAll: v })
              }
            />
          </div>

          <div className="flex items-center justify-between">
            <Label className="text-xs">CSV 내보내기</Label>
            <Switch
              checked={config.exportConfig?.excel === true}
              onCheckedChange={(v) =>
                updateConfig({
                  exportConfig: { ...config.exportConfig, excel: v },
                })
              }
            />
          </div>
        </div>
      </div>

      <Separator />

      {/* 크기 설정 */}
      <div className="space-y-3">
        <Label className="text-sm font-medium">크기 설정</Label>

        <div className="grid grid-cols-2 gap-3">
          <div>
            <Label className="text-xs">높이</Label>
            <Input
              value={config.height || ""}
              onChange={(e) => updateConfig({ height: e.target.value })}
              placeholder="auto 또는 400px"
              className="h-8 text-xs"
            />
          </div>

          <div>
            <Label className="text-xs">최대 높이</Label>
            <Input
              value={config.maxHeight || ""}
              onChange={(e) => updateConfig({ maxHeight: e.target.value })}
              placeholder="600px"
              className="h-8 text-xs"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default PivotGridConfigPanel;