"use client";

import React, { useState, useEffect, useCallback } from "react";
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 { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import {
  Plus,
  Trash2,
  GripVertical,
  ChevronUp,
  ChevronDown,
  Settings,
  Database,
  Layout,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";
import { getNumberingRules } from "@/lib/api/numberingRule";
import {
  UniversalFormModalConfig,
  UniversalFormModalConfigPanelProps,
  FormSectionConfig,
  FormFieldConfig,
  MODAL_SIZE_OPTIONS,
} from "./types";
import {
  defaultSectionConfig,
  generateSectionId,
} from "./config";

// 모달 import
import { FieldDetailSettingsModal } from "./modals/FieldDetailSettingsModal";
import { SaveSettingsModal } from "./modals/SaveSettingsModal";
import { SectionLayoutModal } from "./modals/SectionLayoutModal";

// 도움말 텍스트 컴포넌트
const HelpText = ({ children }: { children: React.ReactNode }) => (
  <p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
);

export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFormModalConfigPanelProps) {
  // 테이블 목록
  const [tables, setTables] = useState<{ name: string; label: string }[]>([]);
  const [tableColumns, setTableColumns] = useState<{
    [tableName: string]: { name: string; type: string; label: string }[];
  }>({});

  // 채번규칙 목록
  const [numberingRules, setNumberingRules] = useState<{ id: string; name: string }[]>([]);

  // 모달 상태
  const [saveSettingsModalOpen, setSaveSettingsModalOpen] = useState(false);
  const [sectionLayoutModalOpen, setSectionLayoutModalOpen] = useState(false);
  const [fieldDetailModalOpen, setFieldDetailModalOpen] = useState(false);
  const [selectedSection, setSelectedSection] = useState<FormSectionConfig | null>(null);
  const [selectedField, setSelectedField] = useState<FormFieldConfig | null>(null);

  // 테이블 목록 로드
  useEffect(() => {
    loadTables();
    loadNumberingRules();
  }, []);

  // 저장 테이블 변경 시 컬럼 로드
  useEffect(() => {
    if (config.saveConfig.tableName) {
      loadTableColumns(config.saveConfig.tableName);
    }
  }, [config.saveConfig.tableName]);

  const loadTables = async () => {
    try {
      const response = await apiClient.get("/table-management/tables");
      const data = response.data?.data;
      if (response.data?.success && Array.isArray(data)) {
        setTables(
          data.map((t: { tableName?: string; table_name?: string; tableLabel?: string; table_label?: string }) => ({
            name: t.tableName || t.table_name || "",
            label: t.tableLabel || t.table_label || t.tableName || t.table_name || "",
          })),
        );
      }
    } catch (error) {
      console.error("테이블 목록 로드 실패:", error);
    }
  };

  const loadTableColumns = async (tableName: string) => {
    if (!tableName || (tableColumns[tableName] && tableColumns[tableName].length > 0)) return;

    try {
      const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
      const data = response.data?.data;

      if (response.data?.success && Array.isArray(data)) {
        setTableColumns((prev) => ({
          ...prev,
          [tableName]: data.map(
            (c: {
              columnName?: string;
              column_name?: string;
              dataType?: string;
              data_type?: string;
              columnComment?: string;
              column_comment?: string;
            }) => ({
              name: c.columnName || c.column_name || "",
              type: c.dataType || c.data_type || "text",
              label: c.columnComment || c.column_comment || c.columnName || c.column_name || "",
            }),
          ),
        }));
      }
    } catch (error) {
      console.error(`테이블 컬럼 로드 실패 (${tableName}):`, error);
    }
  };

  const loadNumberingRules = async () => {
    try {
      const response = await getNumberingRules();
      const data = response?.data;

      if (response?.success && Array.isArray(data)) {
        const rules = data.map(
          (r: {
            id?: string | number;
            ruleId?: string;
            rule_id?: string;
            name?: string;
            ruleName?: string;
            rule_name?: string;
          }) => ({
            id: String(r.id || r.ruleId || r.rule_id || ""),
            name: r.name || r.ruleName || r.rule_name || "",
          }),
        );
        setNumberingRules(rules);
      }
    } catch (error) {
      console.error("채번규칙 목록 로드 실패:", error);
    }
  };

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

  // 섹션 관리
  const addSection = useCallback(() => {
    const newSection: FormSectionConfig = {
      ...defaultSectionConfig,
      id: generateSectionId(),
      title: `섹션 ${config.sections.length + 1}`,
    };
    onChange({
      ...config,
      sections: [...config.sections, newSection],
    });
  }, [config, onChange]);

  const updateSection = useCallback(
    (sectionId: string, updates: Partial<FormSectionConfig>) => {
      onChange({
        ...config,
        sections: config.sections.map((s) => (s.id === sectionId ? { ...s, ...updates } : s)),
      });
    },
    [config, onChange],
  );

  const removeSection = useCallback(
    (sectionId: string) => {
      onChange({
        ...config,
        sections: config.sections.filter((s) => s.id !== sectionId),
      });
    },
    [config, onChange],
  );

  const moveSectionUp = useCallback(
    (index: number) => {
      if (index <= 0) return;
      const newSections = [...config.sections];
      [newSections[index - 1], newSections[index]] = [newSections[index], newSections[index - 1]];
      onChange({ ...config, sections: newSections });
    },
    [config, onChange],
  );

  const moveSectionDown = useCallback(
    (index: number) => {
      if (index >= config.sections.length - 1) return;
      const newSections = [...config.sections];
      [newSections[index], newSections[index + 1]] = [newSections[index + 1], newSections[index]];
      onChange({ ...config, sections: newSections });
    },
    [config, onChange],
  );

  // 필드 타입별 색상
  const getFieldTypeColor = (fieldType: FormFieldConfig["fieldType"]): string => {
    switch (fieldType) {
      case "text":
      case "email":
      case "password":
      case "tel":
        return "text-blue-600 bg-blue-50 border-blue-200";
      case "number":
        return "text-cyan-600 bg-cyan-50 border-cyan-200";
      case "date":
      case "datetime":
        return "text-purple-600 bg-purple-50 border-purple-200";
      case "select":
        return "text-green-600 bg-green-50 border-green-200";
      case "checkbox":
        return "text-pink-600 bg-pink-50 border-pink-200";
      case "textarea":
        return "text-orange-600 bg-orange-50 border-orange-200";
      default:
        return "text-gray-600 bg-gray-50 border-gray-200";
    }
  };

  // 섹션 레이아웃 모달 열기
  const handleOpenSectionLayout = (section: FormSectionConfig) => {
    setSelectedSection(section);
    setSectionLayoutModalOpen(true);
  };

  // 필드 상세 설정 모달 열기
  const handleOpenFieldDetail = (section: FormSectionConfig, field: FormFieldConfig) => {
    setSelectedSection(section);
    setSelectedField(field);
    setFieldDetailModalOpen(true);
  };

  return (
    <div className="h-full flex flex-col overflow-hidden w-full min-w-0">
      <div className="flex-1 overflow-y-auto overflow-x-hidden w-full min-w-0">
        <div className="space-y-4 p-4 w-full min-w-0 max-w-full">
        {/* 모달 기본 설정 */}
        <Accordion type="single" collapsible defaultValue="modal-settings" className="w-full min-w-0">
          <AccordionItem value="modal-settings" className="border rounded-lg w-full min-w-0">
            <AccordionTrigger className="px-4 py-3 text-sm font-medium hover:no-underline w-full min-w-0">
              <div className="flex items-center gap-2 w-full min-w-0">
                <Settings className="h-4 w-4 shrink-0" />
                <span className="truncate">모달 기본 설정</span>
              </div>
            </AccordionTrigger>
            <AccordionContent className="px-4 pb-4 space-y-4 w-full min-w-0">
              <div className="w-full min-w-0">
                <Label className="text-xs font-medium mb-1.5 block">모달 제목</Label>
                <Input
                  value={config.modal.title}
                  onChange={(e) => updateModalConfig({ title: e.target.value })}
                  className="h-9 text-sm w-full max-w-full"
                />
                <HelpText>모달 상단에 표시될 제목입니다</HelpText>
              </div>

              <div className="w-full min-w-0">
                <Label className="text-xs font-medium mb-1.5 block">모달 크기</Label>
                <Select value={config.modal.size} onValueChange={(value: any) => updateModalConfig({ size: value })}>
                  <SelectTrigger className="h-9 text-sm w-full max-w-full">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {MODAL_SIZE_OPTIONS.map((opt) => (
                      <SelectItem key={opt.value} value={opt.value}>
                        {opt.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <HelpText>모달 창의 크기를 선택하세요</HelpText>
              </div>

              <div className="space-y-3 w-full min-w-0">
                <div className="w-full min-w-0">
                  <Label className="text-xs font-medium mb-1.5 block">저장 버튼 텍스트</Label>
                  <Input
                    value={config.modal.saveButtonText || "저장"}
                    onChange={(e) => updateModalConfig({ saveButtonText: e.target.value })}
                    className="h-9 text-sm w-full max-w-full"
                  />
                </div>
                <div className="w-full min-w-0">
                  <Label className="text-xs font-medium mb-1.5 block">취소 버튼 텍스트</Label>
                  <Input
                    value={config.modal.cancelButtonText || "취소"}
                    onChange={(e) => updateModalConfig({ cancelButtonText: e.target.value })}
                    className="h-9 text-sm w-full max-w-full"
                  />
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>

        {/* 저장 설정 */}
        <Accordion type="single" collapsible defaultValue="save-settings" className="w-full min-w-0">
          <AccordionItem value="save-settings" className="border rounded-lg w-full min-w-0">
            <AccordionTrigger className="px-4 py-3 text-sm font-medium hover:no-underline w-full min-w-0">
              <div className="flex items-center gap-2 w-full min-w-0">
                <Database className="h-4 w-4 shrink-0" />
                <span className="truncate">저장 설정</span>
              </div>
            </AccordionTrigger>
            <AccordionContent className="px-4 pb-4 space-y-4 w-full min-w-0">
              <div className="space-y-3 w-full min-w-0">
                <div className="flex-1 min-w-0">
                  <Label className="text-xs font-medium mb-1.5 block">저장 테이블</Label>
                  <p className="text-sm text-muted-foreground">
                    {config.saveConfig.tableName || "(미설정)"}
                  </p>
                  {config.saveConfig.customApiSave?.enabled && config.saveConfig.customApiSave?.multiTable?.enabled && (
                    <Badge variant="secondary" className="text-xs px-2 py-0.5 mt-2">
                      다중 테이블 모드
                    </Badge>
                  )}
                </div>
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => setSaveSettingsModalOpen(true)}
                  className="h-9 text-xs w-full"
                >
                  <Settings className="h-4 w-4 mr-2" />
                  저장 설정 열기
                </Button>
              </div>
              <HelpText>
                데이터를 저장할 테이블과 방식을 설정합니다.
                <br />
                "저장 설정 열기"를 클릭하여 상세 설정을 변경하세요.
              </HelpText>
            </AccordionContent>
          </AccordionItem>
        </Accordion>

        {/* 섹션 구성 */}
        <Accordion type="single" collapsible defaultValue="sections" className="w-full min-w-0">
          <AccordionItem value="sections" className="border rounded-lg w-full min-w-0">
            <AccordionTrigger className="px-4 py-3 text-sm font-medium hover:no-underline w-full min-w-0">
              <div className="flex items-center gap-2 w-full min-w-0">
                <Layout className="h-4 w-4 shrink-0" />
                <span className="truncate">섹션 구성</span>
                <Badge variant="secondary" className="text-xs px-2 py-0.5 shrink-0">
                  {config.sections.length}개
                </Badge>
              </div>
            </AccordionTrigger>
            <AccordionContent className="px-4 pb-4 space-y-4 w-full min-w-0">
              <Button size="sm" variant="outline" onClick={addSection} className="h-9 text-xs w-full max-w-full">
                <Plus className="h-4 w-4 mr-2" />
                섹션 추가
              </Button>
              <HelpText>
                폼을 여러 섹션으로 나누어 구성할 수 있습니다.
                <br />
                예: 기본 정보, 배송 정보, 결제 정보
              </HelpText>

              {config.sections.length === 0 ? (
                <div className="text-center py-12 border border-dashed rounded-lg w-full bg-muted/20">
                  <p className="text-sm text-muted-foreground mb-2 font-medium">섹션이 없습니다</p>
                  <p className="text-xs text-muted-foreground">"섹션 추가" 버튼으로 폼 섹션을 만드세요</p>
                </div>
              ) : (
                <div className="space-y-3 w-full min-w-0">
                  {config.sections.map((section, index) => (
                    <div key={section.id} className="border rounded-lg p-3 bg-card w-full min-w-0 overflow-hidden space-y-3">
                      {/* 헤더: 제목 + 삭제 */}
                      <div className="flex items-start justify-between gap-3 w-full min-w-0">
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2 mb-1.5">
                            <span className="text-sm font-medium truncate">{section.title}</span>
                            {section.repeatable && (
                              <Badge variant="outline" className="text-xs px-1.5 py-0.5">
                                반복
                              </Badge>
                            )}
                          </div>
                          <Badge variant="secondary" className="text-xs px-2 py-0.5">
                            {section.fields.length}개 필드
                          </Badge>
                        </div>
                        
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={() => removeSection(section.id)}
                          className="h-7 w-7 p-0 text-destructive hover:text-destructive shrink-0"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>

                      {/* 순서 조정 버튼 */}
                      <div className="flex items-center gap-2">
                        <GripVertical className="h-4 w-4 text-muted-foreground shrink-0" />
                        <div className="flex gap-1">
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => moveSectionUp(index)}
                            disabled={index === 0}
                            className="h-7 px-2 text-xs"
                          >
                            <ChevronUp className="h-3.5 w-3.5" />
                          </Button>
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => moveSectionDown(index)}
                            disabled={index === config.sections.length - 1}
                            className="h-7 px-2 text-xs"
                          >
                            <ChevronDown className="h-3.5 w-3.5" />
                          </Button>
                        </div>
                      </div>

                      {/* 필드 목록 */}
                      {section.fields.length > 0 && (
                        <div className="flex flex-wrap gap-1.5 max-w-full overflow-hidden pt-1">
                          {section.fields.slice(0, 4).map((field) => (
                            <Badge
                              key={field.id}
                              variant="outline"
                              className={cn("text-xs px-2 py-0.5 shrink-0", getFieldTypeColor(field.fieldType))}
                            >
                              {field.label}
                            </Badge>
                          ))}
                          {section.fields.length > 4 && (
                            <Badge variant="outline" className="text-xs px-2 py-0.5 shrink-0">
                              +{section.fields.length - 4}
                            </Badge>
                          )}
                        </div>
                      )}

                      {/* 레이아웃 설정 버튼 */}
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleOpenSectionLayout(section)}
                        className="h-9 text-xs w-full"
                      >
                        <Layout className="h-4 w-4 mr-2" />
                        레이아웃 설정
                      </Button>
                    </div>
                  ))}
                </div>
              )}
            </AccordionContent>
          </AccordionItem>
        </Accordion>
        </div>
      </div>

      {/* 저장 설정 모달 */}
      <SaveSettingsModal
        open={saveSettingsModalOpen}
        onOpenChange={setSaveSettingsModalOpen}
        saveConfig={config.saveConfig}
        sections={config.sections}
        onSave={(updates) => {
          onChange({
            ...config,
            saveConfig: updates,
          });
        }}
        tables={tables}
        tableColumns={tableColumns}
        onLoadTableColumns={loadTableColumns}
      />

      {/* 섹션 레이아웃 모달 */}
      {selectedSection && (
        <SectionLayoutModal
          open={sectionLayoutModalOpen}
          onOpenChange={setSectionLayoutModalOpen}
          section={selectedSection}
          onSave={(updates) => {
            updateSection(selectedSection.id, updates);
            setSectionLayoutModalOpen(false);
          }}
          onOpenFieldDetail={(field) => {
            setSectionLayoutModalOpen(false);
            setSelectedField(field);
            setFieldDetailModalOpen(true);
          }}
        />
      )}

      {/* 필드 상세 설정 모달 */}
      {selectedSection && selectedField && (
        <FieldDetailSettingsModal
          open={fieldDetailModalOpen}
          onOpenChange={(open) => {
            setFieldDetailModalOpen(open);
            if (!open) {
              // 필드 상세 모달을 닫으면 섹션 레이아웃 모달을 다시 엽니다
              setSectionLayoutModalOpen(true);
            }
          }}
          field={selectedField}
          onSave={(updates) => {
            onChange({
              ...config,
              sections: config.sections.map((s) =>
                s.id === selectedSection.id
                  ? {
                      ...s,
                      fields: s.fields.map((f) => (f.id === selectedField.id ? { ...f, ...updates } : f)),
                    }
                  : s,
              ),
            });
            setFieldDetailModalOpen(false);
            setSectionLayoutModalOpen(true);
          }}
          tables={tables}
          tableColumns={tableColumns}
          numberingRules={numberingRules}
          onLoadTableColumns={loadTableColumns}
        />
      )}
    </div>
  );
}