"use client";

import React, { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";
import { Plus, Trash2, GripVertical, ChevronUp, ChevronDown, Settings as SettingsIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { FormSectionConfig, FormFieldConfig, FIELD_TYPE_OPTIONS } from "../types";
import { defaultFieldConfig, generateFieldId } from "../config";

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

interface SectionLayoutModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  section: FormSectionConfig;
  onSave: (updates: Partial<FormSectionConfig>) => void;
  onOpenFieldDetail: (field: FormFieldConfig) => void;
}

export function SectionLayoutModal({
  open,
  onOpenChange,
  section,
  onSave,
  onOpenFieldDetail,
}: SectionLayoutModalProps) {
  // 로컬 상태로 섹션 관리
  const [localSection, setLocalSection] = useState<FormSectionConfig>(section);

  // open이 변경될 때마다 데이터 동기화
  useEffect(() => {
    if (open) {
      setLocalSection(section);
    }
  }, [open, section]);

  // 섹션 업데이트 함수
  const updateSection = (updates: Partial<FormSectionConfig>) => {
    setLocalSection((prev) => ({ ...prev, ...updates }));
  };

  // 저장 함수
  const handleSave = () => {
    onSave(localSection);
    onOpenChange(false);
  };

  // 필드 추가
  const addField = () => {
    const newField: FormFieldConfig = {
      ...defaultFieldConfig,
      id: generateFieldId(),
      label: `새 필드 ${localSection.fields.length + 1}`,
      columnName: `field_${localSection.fields.length + 1}`,
    };
    updateSection({
      fields: [...localSection.fields, newField],
    });
  };

  // 필드 삭제
  const removeField = (fieldId: string) => {
    updateSection({
      fields: localSection.fields.filter((f) => f.id !== fieldId),
    });
  };

  // 필드 업데이트
  const updateField = (fieldId: string, updates: Partial<FormFieldConfig>) => {
    updateSection({
      fields: localSection.fields.map((f) => (f.id === fieldId ? { ...f, ...updates } : f)),
    });
  };

  // 필드 이동
  const moveField = (fieldId: string, direction: "up" | "down") => {
    const index = localSection.fields.findIndex((f) => f.id === fieldId);
    if (index === -1) return;

    if (direction === "up" && index === 0) return;
    if (direction === "down" && index === localSection.fields.length - 1) return;

    const newFields = [...localSection.fields];
    const targetIndex = direction === "up" ? index - 1 : index + 1;
    [newFields[index], newFields[targetIndex]] = [newFields[targetIndex], newFields[index]];

    updateSection({ fields: newFields });
  };

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

  // 필드 타입 라벨
  const getFieldTypeLabel = (fieldType: FormFieldConfig["fieldType"]): string => {
    const option = FIELD_TYPE_OPTIONS.find((opt) => opt.value === fieldType);
    return option?.label || fieldType;
  };

  // 그리드 너비 라벨
  const getGridSpanLabel = (span: number): string => {
    switch (span) {
      case 3:
        return "1/4";
      case 4:
        return "1/3";
      case 6:
        return "1/2";
      case 8:
        return "2/3";
      case 12:
        return "전체";
      default:
        return `${span}/12`;
    }
  };

  // 필드 상세 설정 열기
  const handleOpenFieldDetail = (field: FormFieldConfig) => {
    // 먼저 현재 변경사항 저장
    onSave(localSection);
    // 그 다음 필드 상세 모달 열기
    onOpenFieldDetail(field);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[95vw] sm:max-w-[900px] max-h-[90vh] flex flex-col p-0">
        <DialogHeader className="px-4 pt-4 pb-2 border-b shrink-0">
          <DialogTitle className="text-base">섹션 레이아웃: {localSection.title}</DialogTitle>
          <DialogDescription className="text-xs">
            섹션의 필드 구성과 배치를 관리합니다. 필드를 추가하거나 순서를 변경할 수 있습니다.
          </DialogDescription>
        </DialogHeader>

        <div className="flex-1 overflow-hidden px-4">
          <ScrollArea className="h-[calc(90vh-180px)]">
            <div className="space-y-4 py-3 pr-3">
              {/* 섹션 기본 정보 */}
              <div className="space-y-3 border rounded-lg p-3 bg-card">
                <h3 className="text-xs font-semibold">섹션 기본 정보</h3>

                <div>
                  <Label className="text-[10px]">섹션 제목</Label>
                  <Input
                    value={localSection.title}
                    onChange={(e) => updateSection({ title: e.target.value })}
                    className="h-7 text-xs mt-1"
                  />
                  <HelpText>섹션의 제목을 입력하세요 (예: 기본 정보, 배송 정보)</HelpText>
                </div>

                <div>
                  <Label className="text-[10px]">섹션 설명</Label>
                  <Textarea
                    value={localSection.description || ""}
                    onChange={(e) => updateSection({ description: e.target.value })}
                    className="text-xs mt-1 min-h-[50px]"
                    placeholder="섹션에 대한 설명 (선택사항)"
                  />
                  <HelpText>사용자에게 표시될 섹션 설명입니다</HelpText>
                </div>

                <div>
                  <Label className="text-[10px]">열 수 (레이아웃)</Label>
                  <Select
                    value={String(localSection.columns || 2)}
                    onValueChange={(value) => updateSection({ columns: parseInt(value) })}
                  >
                    <SelectTrigger className="h-7 text-xs mt-1">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="1">1열 (세로 배치)</SelectItem>
                      <SelectItem value="2">2열 (기본)</SelectItem>
                      <SelectItem value="3">3열</SelectItem>
                      <SelectItem value="4">4열</SelectItem>
                    </SelectContent>
                  </Select>
                  <HelpText>필드들을 몇 열로 배치할지 설정합니다</HelpText>
                </div>

                <Separator />

                <div className="flex items-center justify-between">
                  <span className="text-[10px]">접을 수 있음</span>
                  <Switch
                    checked={localSection.collapsible || false}
                    onCheckedChange={(checked) => updateSection({ collapsible: checked })}
                  />
                </div>
                <HelpText>섹션을 접었다 펼 수 있게 만듭니다</HelpText>

                {localSection.collapsible && (
                  <>
                    <Separator className="my-2" />
                    <div className="flex items-center justify-between">
                      <span className="text-[10px]">기본으로 접힌 상태</span>
                      <Switch
                        checked={localSection.defaultCollapsed || false}
                        onCheckedChange={(checked) => updateSection({ defaultCollapsed: checked })}
                      />
                    </div>
                    <HelpText>처음 열릴 때 섹션이 접힌 상태로 표시됩니다</HelpText>
                  </>
                )}
              </div>

              {/* 반복 섹션 설정 */}
              <div className="space-y-3 border rounded-lg p-3 bg-card">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-semibold">반복 섹션</span>
                  <Switch
                    checked={localSection.repeatable || false}
                    onCheckedChange={(checked) => updateSection({ repeatable: checked })}
                  />
                </div>
                <HelpText>
                  겸직처럼 동일한 필드 그룹을 여러 개 추가할 수 있습니다
                  <br />
                  예: 경력사항, 학력사항, 자격증
                </HelpText>

                {localSection.repeatable && (
                  <div className="space-y-2 pt-2 border-t">
                    <div className="grid grid-cols-2 gap-2">
                      <div>
                        <Label className="text-[10px]">최소 개수</Label>
                        <Input
                          type="number"
                          value={localSection.repeatConfig?.minItems || 0}
                          onChange={(e) =>
                            updateSection({
                              repeatConfig: {
                                ...localSection.repeatConfig,
                                minItems: parseInt(e.target.value) || 0,
                              },
                            })
                          }
                          className="h-6 text-[10px] mt-1"
                        />
                      </div>
                      <div>
                        <Label className="text-[10px]">최대 개수</Label>
                        <Input
                          type="number"
                          value={localSection.repeatConfig?.maxItems || 10}
                          onChange={(e) =>
                            updateSection({
                              repeatConfig: {
                                ...localSection.repeatConfig,
                                maxItems: parseInt(e.target.value) || 10,
                              },
                            })
                          }
                          className="h-6 text-[10px] mt-1"
                        />
                      </div>
                    </div>

                    <div>
                      <Label className="text-[10px]">추가 버튼 텍스트</Label>
                      <Input
                        value={localSection.repeatConfig?.addButtonText || "+ 추가"}
                        onChange={(e) =>
                          updateSection({
                            repeatConfig: {
                              ...localSection.repeatConfig,
                              addButtonText: e.target.value,
                            },
                          })
                        }
                        className="h-6 text-[10px] mt-1"
                      />
                    </div>
                  </div>
                )}
              </div>

              {/* 필드 목록 */}
              <div className="space-y-3 border rounded-lg p-3 bg-card">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <h3 className="text-xs font-semibold">필드 목록</h3>
                    <Badge variant="secondary" className="text-[9px] px-1.5 py-0">
                      {localSection.fields.length}개
                    </Badge>
                  </div>
                  <Button size="sm" variant="outline" onClick={addField} className="h-7 text-[10px] px-2">
                    <Plus className="h-3 w-3 mr-1" />
                    필드 추가
                  </Button>
                </div>

                <HelpText>
                  필드를 추가하고 순서를 변경할 수 있습니다. "상세 설정"에서 필드 타입과 옵션을 설정하세요.
                </HelpText>

                {localSection.fields.length === 0 ? (
                  <div className="text-center py-8 border border-dashed rounded-lg">
                    <p className="text-sm text-muted-foreground mb-2">필드가 없습니다</p>
                    <p className="text-xs text-muted-foreground">위의 "필드 추가" 버튼으로 필드를 추가하세요</p>
                  </div>
                ) : (
                  <div className="space-y-2">
                    {localSection.fields.map((field, index) => (
                      <div
                        key={field.id}
                        className={cn(
                          "border rounded-lg overflow-hidden",
                          getFieldTypeColor(field.fieldType)
                        )}
                      >
                        {/* 필드 헤더 */}
                        <div className="flex items-center justify-between p-2 bg-white/50">
                          <div className="flex items-center gap-2 flex-1">
                            {/* 순서 변경 버튼 */}
                            <div className="flex flex-col">
                              <Button
                                size="sm"
                                variant="ghost"
                                onClick={() => moveField(field.id, "up")}
                                disabled={index === 0}
                                className="h-3 w-5 p-0"
                              >
                                <ChevronUp className="h-2.5 w-2.5" />
                              </Button>
                              <Button
                                size="sm"
                                variant="ghost"
                                onClick={() => moveField(field.id, "down")}
                                disabled={index === localSection.fields.length - 1}
                                className="h-3 w-5 p-0"
                              >
                                <ChevronDown className="h-2.5 w-2.5" />
                              </Button>
                            </div>

                            <GripVertical className="h-3.5 w-3.5 text-muted-foreground" />

                            {/* 필드 정보 */}
                            <div className="flex-1">
                              <div className="flex items-center gap-2">
                                <span className="text-[11px] font-medium">{field.label}</span>
                                <Badge
                                  variant="outline"
                                  className={cn("text-[8px] px-1 py-0", getFieldTypeColor(field.fieldType))}
                                >
                                  {getFieldTypeLabel(field.fieldType)}
                                </Badge>
                                {field.required && (
                                  <Badge variant="destructive" className="text-[8px] px-1 py-0">
                                    필수
                                  </Badge>
                                )}
                                {field.hidden && (
                                  <Badge variant="secondary" className="text-[8px] px-1 py-0">
                                    숨김
                                  </Badge>
                                )}
                              </div>
                              <p className="text-[9px] text-muted-foreground mt-0.5">
                                컬럼: {field.columnName} | 너비: {getGridSpanLabel(field.gridSpan || 6)}
                              </p>
                            </div>
                          </div>

                          {/* 액션 버튼 */}
                          <div className="flex items-center gap-1">
                            <Button
                              size="sm"
                              variant="ghost"
                              onClick={() => handleOpenFieldDetail(field)}
                              className="h-6 px-2 text-[9px]"
                            >
                              <SettingsIcon className="h-3 w-3 mr-1" />
                              상세 설정
                            </Button>
                            <Button
                              size="sm"
                              variant="ghost"
                              onClick={() => removeField(field.id)}
                              className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                            >
                              <Trash2 className="h-3 w-3" />
                            </Button>
                          </div>
                        </div>

                        {/* 간단한 인라인 설정 */}
                        <div className="px-2 pb-2 space-y-2 bg-white/30">
                          <div className="grid grid-cols-2 gap-2">
                            <div>
                              <Label className="text-[9px]">라벨</Label>
                              <Input
                                value={field.label}
                                onChange={(e) => updateField(field.id, { label: e.target.value })}
                                className="h-6 text-[9px] mt-0.5"
                              />
                            </div>
                            <div>
                              <Label className="text-[9px]">컬럼명</Label>
                              <Input
                                value={field.columnName}
                                onChange={(e) => updateField(field.id, { columnName: e.target.value })}
                                className="h-6 text-[9px] mt-0.5"
                              />
                            </div>
                          </div>

                          <div className="grid grid-cols-2 gap-2">
                            <div>
                              <Label className="text-[9px]">필드 타입</Label>
                              <Select
                                value={field.fieldType}
                                onValueChange={(value) =>
                                  updateField(field.id, {
                                    fieldType: value as FormFieldConfig["fieldType"],
                                  })
                                }
                              >
                                <SelectTrigger className="h-6 text-[9px] mt-0.5">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  {FIELD_TYPE_OPTIONS.map((opt) => (
                                    <SelectItem key={opt.value} value={opt.value}>
                                      {opt.label}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            </div>
                            <div>
                              <Label className="text-[9px]">너비</Label>
                              <Select
                                value={String(field.gridSpan || 6)}
                                onValueChange={(value) => updateField(field.id, { gridSpan: parseInt(value) })}
                              >
                                <SelectTrigger className="h-6 text-[9px] mt-0.5">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="3">1/4</SelectItem>
                                  <SelectItem value="4">1/3</SelectItem>
                                  <SelectItem value="6">1/2</SelectItem>
                                  <SelectItem value="8">2/3</SelectItem>
                                  <SelectItem value="12">전체</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                          </div>

                          <div className="flex items-center justify-between pt-1">
                            <span className="text-[9px]">필수</span>
                            <Switch
                              checked={field.required || false}
                              onCheckedChange={(checked) => updateField(field.id, { required: checked })}
                              className="scale-75"
                            />
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </ScrollArea>
        </div>

        <DialogFooter className="px-4 py-3 border-t shrink-0">
          <Button variant="outline" onClick={() => onOpenChange(false)} className="h-9 text-sm">
            취소
          </Button>
          <Button onClick={handleSave} className="h-9 text-sm">
            저장 ({localSection.fields.length}개 필드)
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}