'use client'

import { useState, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { Checkbox } from '@/components/ui/checkbox';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import { toast } from 'sonner';
import { Loader2, Trash2, FileText, AlertCircle, GripVertical } from 'lucide-react';
import { debugLog, debugError } from '@/lib/debug-utils'

// dnd-kit imports for drag and drop
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  type DragEndEvent,
} from '@dnd-kit/core';

// 드래그 이동을 수직 축으로 제한하고, 리스트 영역 밖으로 벗어나지 않도록 하는 modifier
import {
  restrictToVerticalAxis,
  restrictToParentElement,
} from '@dnd-kit/modifiers';
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
  useSortable,
} from '@dnd-kit/sortable';
import {
  CSS,
} from '@dnd-kit/utilities';

// API 함수 및 타입
import { submitApproval, submitSecurityApproval, createSubmitApprovalRequest, createApprovalLine } from '@/lib/knox-api/approval/approval';
import type { ApprovalLine, SubmitApprovalRequest } from '@/lib/knox-api/approval/approval';

// 역할 텍스트 매핑 (기존 mock util 대체)
const getRoleText = (role: string) => {
  const map: Record<string, string> = {
    '0': '기안',
    '1': '결재',
    '2': '합의',
    '3': '후결',
    '4': '병렬합의',
    '7': '병렬결재',
    '9': '통보',
  };
  return map[role] || role;
};

// TiptapEditor 컴포넌트
import RichTextEditor from '@/components/rich-text-editor/RichTextEditor';

// UserSelector 컴포넌트
import { UserSelector, type UserSelectItem } from '@/components/common/user/user-selector';
import { useSession } from 'next-auth/react';

// UserSelector에서 반환되는 사용자에 epId가 포함될 수 있으므로 확장 타입 정의
interface ExtendedUserSelectItem extends UserSelectItem {
  epId?: string;
}

// 역할 코드 타입 정의
type ApprovalRole = '0' | '1' | '2' | '3' | '4' | '7' | '9';

// 결재 라인 아이템 타입 정의 (고유 ID 포함)
interface ApprovalLineItem {
  id: string; // 내부 고유 식별자
  epId?: string; // Knox 고유 ID (전사 고유)
  userId?: string; // DB User PK
  emailAddress?: string;
  name?: string; // 사용자 이름
  deptName?: string; // 부서명
  role: ApprovalRole;
  seq: string;
  opinion?: string;
}

const formSchema = z.object({
  subject: z.string().min(1, '제목은 필수입니다'),
  contents: z.string().min(1, '내용은 필수입니다'),
  contentsType: z.literal('HTML'),
  docSecuType: z.enum(['PERSONAL', 'CONFIDENTIAL', 'CONFIDENTIAL_STRICT']),
  urgYn: z.boolean(),
  importantYn: z.boolean(),
  notifyOption: z.enum(['0', '1', '2', '3']),
  docMngSaveCode: z.enum(['0', '1']),
  sbmLang: z.enum(['ko', 'ja', 'zh', 'en']),
  timeZone: z.string().default('GMT+9'),
  aplns: z.array(z.object({
    id: z.string(), // 고유 식별자
    epId: z.string().optional(),
    userId: z.string().optional(),
    emailAddress: z.string().email('유효한 이메일 주소를 입력해주세요').optional(),
    name: z.string().optional(),
    deptName: z.string().optional(),
    role: z.enum(['0', '1', '2', '3', '4', '7', '9']),
    seq: z.string(),
    opinion: z.string().optional()
  })).min(1, '최소 1개의 결재 경로가 필요합니다'),
  // 첨부파일 (선택)
  attachments: z.any().optional()
});

type FormData = z.infer<typeof formSchema>;

interface ApprovalSubmitProps {
  onSubmitSuccess?: (apInfId: string) => void;
}

// Sortable한 결재 라인 컴포넌트
interface SortableApprovalLineProps {
  apln: ApprovalLineItem;
  index: number;
  form: ReturnType<typeof useForm<FormData>>;
  onRemove: () => void;
  canRemove: boolean;
  selected: boolean;
  onSelect: () => void;
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
function SortableApprovalLine({ apln, index, form, onRemove, canRemove, selected, onSelect }: SortableApprovalLineProps) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: apln.id }); // 고유 ID 사용

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1, // 드래그 중일 때 투명도 조절
  };


  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`flex items-center gap-3 p-3 border rounded-lg bg-white shadow-sm ${selected ? 'ring-2 ring-primary' : ''}`}
    >
      {/* 드래그 핸들 */}
      <div
        {...attributes}
        {...listeners}
        className="cursor-grab hover:cursor-grabbing text-gray-400 hover:text-gray-600"
      >
        <GripVertical className="w-5 h-5" />
      </div>

      {/* 선택 체크박스 (상신자는 제외하지만 공간은 확보) */}
      {index !== 0 ? (
        <Checkbox
          checked={selected}
          onCheckedChange={() => onSelect()}
          onClick={(e) => e.stopPropagation()}
        />
      ) : (
        <div className="w-4 h-4" /> // 기안자용 빈 공간 (체크박스가 없으므로)
      )}

      {/* 실제 seq 기준 표시 */}
      <Badge variant="outline">{parseInt(apln.seq) + 1}</Badge>

      <div className="flex-1 grid grid-cols-4 gap-3">
        {/* 사용자 정보 표시 */}
        <div className="flex items-center space-x-2">
          <div>
            <div className="font-medium text-sm">
              {(apln.name || 'Knox 이름 없음')}{apln.deptName ? ` / ${apln.deptName}` : ''}
            </div>
          </div>
          <FormField
            control={form.control}
            name={`aplns.${index}.id`}
            render={() => (
              <FormItem className="hidden">
                <FormControl>
                  <Input type="hidden" />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name={`aplns.${index}.epId`}
            render={() => (
              <FormItem className="hidden">
                <FormControl>
                  <Input type="hidden" />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name={`aplns.${index}.userId`}
            render={() => (
              <FormItem className="hidden">
                <FormControl>
                  <Input type="hidden" />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name={`aplns.${index}.emailAddress`}
            render={() => (
              <FormItem className="hidden">
                <FormControl>
                  <Input type="hidden" />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

        {/* 역할 선택 */}
        {index === 0 ? (
          // 상신자는 역할 선택 대신 고정 표시
          <div className="flex items-center">
            <Badge variant="secondary">기안</Badge>
          </div>
        ) : (
          <FormField
            control={form.control}
            name={`aplns.${index}.role`}
            render={({ field }) => {
              // 병렬 여부 판단
              const isParallel = field.value === '4' || field.value === '7';

              // 병렬, 후결 값을 제외한 기본 역할
              const baseRole: ApprovalRole = field.value === '7' ? '1' : field.value === '4' ? '2' : field.value === '3' ? '1' : field.value as ApprovalRole;

              // 기본 역할 변경 핸들러
              const handleBaseRoleChange = (val: string) => {
                if (!val) return;
                let newRole = val;
                if (isParallel) {
                  if (val === '1') newRole = '7';
                  else if (val === '2') newRole = '4';
                }
                field.onChange(newRole);
              };

              // 병렬인 경우 한 개 버튼으로 표시
              if (isParallel) {
                return (
                  <FormItem className="w-full">
                    <Badge className="w-full justify-center" variant="secondary">
                      {getRoleText(field.value)}
                    </Badge>
                  </FormItem>
                );
              }

              return (
                <FormItem>
                  <div className="flex flex-col gap-2">
                    <ToggleGroup
                      type="single"
                      value={baseRole}
                      onValueChange={handleBaseRoleChange}
                    >
                      <ToggleGroupItem value="1">결재</ToggleGroupItem>
                      <ToggleGroupItem value="2">합의</ToggleGroupItem>
                      <ToggleGroupItem value="9">통보</ToggleGroupItem>
                    </ToggleGroup>
                  </div>
                  <FormMessage />
                </FormItem>
              );
            }}
          />
        )}
        
        {/* 의견 입력란 제거됨 */}

        {/* 역할 표시 */}
        <div className="flex items-center justify-between">
          <Badge variant="secondary">
            {getRoleText(apln.role)}
          </Badge>
          
          {canRemove && (
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={onRemove}
            >
              <Trash2 className="w-4 h-4" />
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}

// Sortable Approval Group (seq 단위 카드)
interface SortableApprovalGroupProps {
  group: ApprovalLineItem[]; // 동일 seq 항목들
  index: number;
  form: ReturnType<typeof useForm<FormData>>;
  onRemoveGroup: () => void;
  canRemove: boolean;
  selected: boolean;
  onSelect: () => void;
}

function SortableApprovalGroup({ group, index, form, onRemoveGroup, canRemove, selected, onSelect }: SortableApprovalGroupProps) {
  const seq = group[0].seq;
  const role = group[0].role;
  // 그룹을 식별할 안정적인 고유 키(첫 구성원의 id 활용)
  const groupKey = group[0].id;

  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: groupKey });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`flex items-center gap-3 p-3 border rounded-lg bg-white shadow-sm ${selected ? 'ring-2 ring-primary' : ''}`}
    >
      {/* 드래그 핸들 */}
      <div
        {...attributes}
        {...listeners}
        className="cursor-grab hover:cursor-grabbing text-gray-400 hover:text-gray-600"
      >
        <GripVertical className="w-5 h-5" />
      </div>

      {/* 그룹 선택 체크박스 (상신자 제외하지만 공간은 확보) */}
      {index !== 0 ? (
        <Checkbox
          checked={selected}
          onCheckedChange={onSelect}
          onClick={(e) => e.stopPropagation()}
        />
      ) : (
        <div className="w-4 h-4" /> // 기안자용 빈 공간
      )}

      {/* seq 표시 */}
      <Badge variant="outline">{parseInt(seq) + 1}</Badge>

      {/* 그룹 상세 정보 */}
      <div className="flex-1 grid grid-cols-3 gap-3">
        {/* 사용자 목록 */}
        <div className="flex flex-col justify-center gap-1">
          {group.map((u) => (
            <div key={u.id} className="text-sm">
              {(u.name || 'Knox 이름 없음')}{u.deptName ? ` / ${u.deptName}` : ''}
            </div>
          ))}
        </div>

        {/* 역할 */}
        <div className="flex items-center">
          {seq === '0' ? (
            <Badge variant="secondary" className="w-full justify-center">
              기안
            </Badge>
          ) : role === '7' || role === '4' ? (
            <Badge variant="secondary" className="w-full justify-center">
              {getRoleText(role)}
            </Badge>
          ) : (
            // 단일일 때는 기존 토글 재사용 (첫 항목 기준)
            <FormField
              control={form.control}
              name={`aplns.${form.getValues('aplns').findIndex((a) => a.id === group[0].id)}.role`}
              render={({ field }) => (
                <ToggleGroup
                  type="single"
                  value={field.value}
                  onValueChange={field.onChange}
                >
                  <ToggleGroupItem value="1">결재</ToggleGroupItem>
                  <ToggleGroupItem value="2">합의</ToggleGroupItem>
                  <ToggleGroupItem value="9">통보</ToggleGroupItem>
                </ToggleGroup>
              )}
            />
          )}
        </div>

        {/* 삭제 버튼 */}
        <div className="flex items-center justify-end">
          {canRemove && (
            <Button type="button" variant="ghost" size="sm" onClick={onRemoveGroup}>
              <Trash2 className="w-4 h-4" />
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}

export default function ApprovalSubmit({ onSubmitSuccess }: ApprovalSubmitProps) {
  const { data: session } = useSession();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitResult, setSubmitResult] = useState<{ apInfId: string } | null>(null);

  const [selectedSeqs, setSelectedSeqs] = useState<string[]>([]);

  // 그룹 단위 선택/해제
  const toggleSelectGroup = (seq: string) => {
    setSelectedSeqs((prev) =>
      prev.includes(seq) ? prev.filter((s) => s !== seq) : [...prev, seq]
    );
  };
  const clearSelection = () => setSelectedSeqs([]);

  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      subject: '',
      contents: '',
      contentsType: 'HTML',
      docSecuType: 'PERSONAL',
      urgYn: false,
      importantYn: false,
      notifyOption: '0',
      docMngSaveCode: '0',
      sbmLang: 'ko',
      timeZone: 'GMT+9',
      aplns: [],
      attachments: undefined
    }
  });

  const aplns = form.watch('aplns');

  // 병렬 전환 핸들러
  const applyParallel = () => {
    if (selectedSeqs.length < 2) {
      toast.error('두 명 이상 선택해야 병렬 지정이 가능합니다.');
      return;
    }

    const current = form.getValues('aplns');
    const selectedAplns = current.filter((a) => selectedSeqs.includes(a.seq));

    const roles = Array.from(new Set(selectedAplns.map((a) => a.role)));
    if (roles.length !== 1) {
      toast.error('선택된 항목의 역할이 동일해야 합니다.');
      return;
    }

    const role = roles[0];
    let newRole: ApprovalRole;
    if (role === '1') {
      newRole = '7'; // 병렬 결재
    } else if (role === '2') {
      newRole = '4'; // 병렬 합의
    } else if (role === '9') {
      newRole = '9'; // 병렬 통보(역할 코드 유지)
    } else {
      toast.error('결재, 합의 또는 통보만 병렬 지정 가능합니다.');
      return;
    }

    const minSeq = Math.min(...selectedAplns.map((a) => parseInt(a.seq)));

    const updated = current.map((a) => {
      if (selectedSeqs.includes(a.seq)) {
        return { ...a, role: newRole as ApprovalRole, seq: minSeq.toString() };
      }
      return a;
    });

    form.setValue('aplns', reorderBySeq(updated), { shouldDirty: true });
    clearSelection();
  };

  // 후결 전환 핸들러
  const applyAfter = () => {
    if (selectedSeqs.length !== 1) {
      toast.error('후결은 한 명만 지정할 수 있습니다.');
      return;
    }

    const targetSeq = selectedSeqs[0];

    // 병렬 그룹(결재:7, 합의:4)은 후결 전환 불가
    const targetRole = form.getValues('aplns').find((a) => a.seq === targetSeq)?.role;
    if (targetRole === '7' || targetRole === '4') {
      toast.error('병렬 그룹은 후결로 전환할 수 없습니다.');
      return;
    }

    const updated = form.getValues('aplns').map((a) => {
      if (a.seq === targetSeq) {
        return { ...a, role: (a.role === '3' ? '1' : '3') as ApprovalRole };
      }
      return a;
    });

    form.setValue('aplns', reorderBySeq(updated), { shouldDirty: true });
    clearSelection();
  };

  // 병렬 해제 핸들러
  const ungroupParallel = () => {
    if (selectedSeqs.length === 0) {
      toast.error('해제할 결재선을 선택하세요.');
      return;
    }

    let newSeqCounter = 1; // 0은 상신자 유지
    const updated = form.getValues('aplns').map((a) => {
      if (selectedSeqs.includes(a.seq)) {
        let newRole: ApprovalRole = a.role;
        if (a.role === '7') newRole = '1';
        if (a.role === '4') newRole = '2';

        return { ...a, role: newRole, seq: '' }; // seq 임시 비움
      }
      return { ...a };
    });

    // seq 재할당 (상신자 제외하고 순차)
    const reassigned = updated
      .sort((x, y) => parseInt(x.seq || '0') - parseInt(y.seq || '0'))
      .map((a) => {
        if (a.seq === '0') return a; // 상신자
        const newItem = { ...a, seq: newSeqCounter.toString() };
        newSeqCounter += 1;
        return newItem;
      });

    form.setValue('aplns', reassigned as FormData['aplns'], { shouldDirty: true });
    clearSelection();
  };

  // seq 기준 정렬 및 재번호 부여 (병렬 그룹은 동일 seq 유지)
  const reorderBySeq = (list: FormData['aplns']): FormData['aplns'] => {
    const sorted = [...list].sort((a, b) => parseInt(a.seq) - parseInt(b.seq));

    // 기존 seq -> 새 seq 매핑. 병렬 그룹(동일 seq)은 동일한 새 seq 를 갖도록 처리
    const seqMap = new Map<string, string>();
    let nextSeq = 0;

    return sorted.map((apln) => {
      if (!seqMap.has(apln.seq)) {
        seqMap.set(apln.seq, nextSeq.toString());
        nextSeq += 1;
      }
      return { ...apln, seq: seqMap.get(apln.seq)! };
    });
  };

  // 로그인 사용자를 첫 번째 결재자로 보장하는 effect
  useEffect(() => {
    if (!session?.user) return;

    const currentEmail = session.user.email ?? '';
    const currentEpId = (session.user as { epId?: string }).epId;
    const currentUserId = session.user.id ?? undefined;

    let currentAplns = form.getValues('aplns');

    // 이미 포함되어 있는지 확인 (epId 또는 email 기준)
    const selfIndex = currentAplns.findIndex(
      (a) => (currentEpId && a.epId === currentEpId) || a.emailAddress === currentEmail
    );

    if (selfIndex === -1) {
      // 맨 앞에 상신자 추가
      const newSelf: FormData['aplns'][number] = {
        id: generateUniqueId(),
        epId: currentEpId,
        userId: currentUserId ? currentUserId.toString() : undefined,
        emailAddress: currentEmail,
        name: session.user.name ?? undefined,
        role: '0', // 기안
        seq: '0',
        opinion: ''
      };

      currentAplns = [newSelf, ...currentAplns];
    }

    // seq 재정렬 보장
    currentAplns = currentAplns.map((apln, idx) => ({ ...apln, seq: idx.toString() }));

    form.setValue('aplns', currentAplns, { shouldValidate: false, shouldDirty: true });
  }, [session, form]);

  // dnd-kit sensors
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8,
      },
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );

  // 고유 ID 생성 함수
  const generateUniqueId = () => {
    return `apln-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
  };

  // 결재자 추가 (UserSelector를 통해)
  const addApprovalUsers = (users: UserSelectItem[]) => {
    const newAplns = [...aplns];
    
    users.forEach((user) => {
      // 이미 추가된 사용자인지 확인
      const existingIndex = newAplns.findIndex(apln => apln.userId === user.id.toString());
      if (existingIndex === -1) {
        // 새 사용자 추가
        const newSeq = (newAplns.length).toString(); // 0은 상신자
        const newApln: FormData['aplns'][number] = {
          id: generateUniqueId(), // 고유 ID 생성
          epId: (user as ExtendedUserSelectItem).epId, // epId가 전달되면 사용
          userId: user.id.toString(),
          emailAddress: user.email,
          name: user.name,
          deptName: (user as ExtendedUserSelectItem).deptName ?? undefined,
          role: '1', // 기본값: 결재
          seq: newSeq,
          opinion: ''
        };
        newAplns.push(newApln);
      }
    });
    
    form.setValue('aplns', newAplns);
  };

  // 그룹 삭제 (seq 기반)
  const removeApprovalGroup = (seq: string) => {
    if (seq === '0') return; // 상신자 삭제 불가

    const remaining = aplns.filter((a) => a.seq !== seq);

    // seq 재정렬 (병렬 그룹 유지)
    const reordered = reorderBySeq(remaining);
    form.setValue('aplns', reordered);
  };

  // 기존 단일 삭제 로직은 더 이상 사용하지 않음 (호환 위해 남겨둠)
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const removeApprovalLine = (index: number) => {
    // 첫 번째(상신자)는 삭제 불가
    if (index === 0) return;

    if (aplns.length > 1) {
      const newAplns = aplns.filter((_: FormData['aplns'][number], i: number) => i !== index);
      // 순서 재정렬 (ID는 유지)
      const reorderedAplns = newAplns.map((apln: FormData['aplns'][number], i: number) => ({
        ...apln,
        seq: (i).toString()
      }));
      form.setValue('aplns', reorderedAplns);
    }
  };

  // 드래그앤드롭 핸들러 (그룹 이동 지원)
  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;

    if (!over || active.id === over.id) return;

    // 현재 id는 그룹의 고유 key(첫 라인 id)
    const activeKey = active.id as string;
    const overKey = over.id as string;

    // key → seq 매핑 생성
    const idToSeq = new Map<string, string>();
    aplns.forEach((a) => {
      // 같은 seq 내 첫 번째 id만 매핑하면 충분하지만, 안전하게 모두 매핑
      idToSeq.set(a.id, a.seq);
    });

    const activeSeq = idToSeq.get(activeKey);
    const overSeq = idToSeq.get(overKey);

    if (!activeSeq || !overSeq) return;

    if (activeSeq === '0' || overSeq === '0') return; // 상신자는 이동 불가

    // 현재 그룹 순서를 key 기반으로 계산
    const seqOrder = Array.from(new Set(aplns.map((a) => a.seq)));
    const keyOrder = seqOrder.map((seq) => {
      return aplns.find((a) => a.seq === seq)!.id;
    });

    const oldIndex = keyOrder.indexOf(activeKey);
    const newIndex = keyOrder.indexOf(overKey);

    const newKeyOrder = arrayMove(keyOrder, oldIndex, newIndex);

    // key → 새 seq 매핑
    const keyToNewSeq = new Map<string, string>();
    newKeyOrder.forEach((k, idx) => {
      keyToNewSeq.set(k, idx.toString());
    });

    // aplns 재구성 + seq 재할당
    const updatedAplns: FormData['aplns'] = [];
    newKeyOrder.forEach((k) => {
      const oldSeq = idToSeq.get(k)!;
      const groupItems = aplns.filter((a) => a.seq === oldSeq);
      groupItems.forEach((item) => {
        updatedAplns.push({ ...item, seq: keyToNewSeq.get(k)! });
      });
    });

    form.setValue('aplns', updatedAplns, { shouldValidate: false, shouldDirty: true });
  };

  const onSubmit = async (data: FormData) => {
    setIsSubmitting(true);
    setSubmitResult(null);

    try {
      // 세션 정보 확인
      if (!session?.user) {
        toast.error('로그인이 필요합니다.');
        return;
      }

      const currentEmail = session.user.email ?? '';
      const currentEpId = (session.user as { epId?: string }).epId;
      const currentUserId = session.user.id ?? '';

      debugLog('Current User', session.user);

      if (!currentEpId) {
        toast.error('사용자 정보가 올바르지 않습니다.');
        return;
      }

      // 결재 경로 생성 (ID 제거하고 API 호출)
      const approvalLines: ApprovalLine[] = await Promise.all(
        data.aplns.map((apln) =>
          createApprovalLine(
            { epId: apln.epId },
            apln.role,
            apln.seq,
            { opinion: apln.opinion }
          )
        )
      );

      debugLog('Approval Lines', approvalLines);

      // 상신 요청 생성
      const attachmentsArray = data.attachments ? Array.from(data.attachments as FileList) : undefined;

      const submitRequest: SubmitApprovalRequest = await createSubmitApprovalRequest(
        data.contents,
        data.subject,
        approvalLines,
        {
          contentsType: data.contentsType,
          docSecuType: data.docSecuType,
          urgYn: data.urgYn ? 'Y' : 'N',
          importantYn: data.importantYn ? 'Y' : 'N',
          notifyOption: data.notifyOption,
          docMngSaveCode: data.docMngSaveCode,
          sbmLang: data.sbmLang,
          timeZone: data.timeZone,
          attachments: attachmentsArray
        }
      );

      // API 호출 (보안 등급에 따라 분기)
      const isSecure = data.docSecuType === 'CONFIDENTIAL' || data.docSecuType === 'CONFIDENTIAL_STRICT';

      debugLog('Submit Request', submitRequest);

      const response = isSecure
        ? await submitSecurityApproval(submitRequest)
        : await submitApproval(submitRequest, {
            userId: currentUserId,
            epId: currentEpId,
            emailAddress: currentEmail
          });

      debugLog('Submit Response', response);

      if (response.result === 'SUCCESS') {
        setSubmitResult({ apInfId: response.data.apInfId });
        toast.success('결재가 성공적으로 상신되었습니다.');
        onSubmitSuccess?.(response.data.apInfId);
        form.reset();
      } else {
        toast.error(`결재 상신에 실패했습니다: ${response.result}`);
      }
    } catch (error) {
      debugError('결재 상신 오류', error);
      toast.error('결재 상신 중 오류가 발생했습니다.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Card className="w-full max-w-5xl">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <FileText className="w-5 h-5" />
          결재 상신
        </CardTitle>
        <CardDescription>
          새로운 결재를 상신합니다.
        </CardDescription>
      </CardHeader>

      <CardContent className="space-y-6">
        {submitResult && (
          <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
            <div className="flex items-center gap-2 text-green-700">
              <AlertCircle className="w-4 h-4" />
              <span className="font-medium">상신 완료</span>
            </div>
            <p className="text-sm text-green-600 mt-1">
              결재 ID: {submitResult.apInfId}
            </p>
          </div>
        )}

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            {/* 기본 정보 */}
            <div className="space-y-4">

              <Separator />

              {/* 결재 경로 */}
              <div className="space-y-4">
                <h3 className="text-lg font-semibold">결재 경로</h3>

                {/* 상단 제어 버튼 */}
                <div className="flex justify-end gap-2 mb-2">
                  <Button variant="outline" size="sm" onClick={applyParallel}>병렬</Button>
                  <Button variant="outline" size="sm" onClick={applyAfter}>후결</Button>
                  <Button variant="outline" size="sm" onClick={ungroupParallel}>해제</Button>
                </div>

                {/* 결재자 추가 섹션 */}
                <div className="p-4 border border-dashed border-gray-300 rounded-lg">
                  <div className="mb-2">
                    <label className="text-sm font-medium text-gray-700">결재자 추가</label>
                    <p className="text-xs text-gray-500">사용자를 검색하여 결재 라인에 추가하세요</p>
                  </div>
                  <UserSelector
                    selectedUsers={[]}
                    onUsersChange={addApprovalUsers}
                    placeholder="결재자를 검색하세요..."
                    domainFilter={{ type: "exclude", domains: ["partners"] }}
                    maxSelections={10} // 최대 10명까지 추가 가능
                  />
                </div>

                {/* 그룹 기반 렌더링 */}
                {aplns.length > 0 && (
                  (() => {
                    const groups = Object.values(
                      aplns.reduce<Record<string, ApprovalLineItem[]>>((acc, apln) => {
                        acc[apln.seq] = acc[apln.seq] ? [...acc[apln.seq], apln] : [apln];
                        return acc;
                      }, {})
                    ).sort((a, b) => parseInt(a[0].seq) - parseInt(b[0].seq));

                    return (
                      <DndContext
                        sensors={sensors}
                        collisionDetection={closestCenter}
                        modifiers={[restrictToVerticalAxis, restrictToParentElement]}
                        onDragEnd={handleDragEnd}
                      >
                        <SortableContext items={groups.map(g => g[0].id)} strategy={verticalListSortingStrategy}>
                          <div className="space-y-3">
                            {groups.map((group, idx) => (
                              <SortableApprovalGroup
                                key={group[0].id}
                                group={group}
                                index={idx}
                                form={form}
                                onRemoveGroup={() => removeApprovalGroup(group[0].seq)}
                                canRemove={idx !== 0 && aplns.length > 1}
                                selected={selectedSeqs.includes(group[0].seq)}
                                onSelect={() => toggleSelectGroup(group[0].seq)}
                              />
                            ))}
                          </div>
                        </SortableContext>
                      </DndContext>
                    );
                  })()
                )}

                {aplns.length === 0 && (
                  <div className="text-center py-8 text-gray-500">
                    <FileText className="w-12 h-12 mx-auto mb-2 opacity-50" />
                    <p>결재자를 추가해주세요</p>
                  </div>
                )}
              </div>
              
              <FormField
                control={form.control}
                name="subject"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>제목 *</FormLabel>
                    <FormControl>
                      <Input placeholder="결재 제목을 입력하세요" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="contents"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>내용 *</FormLabel>
                    <FormControl>
                      <RichTextEditor
                        value={field.value}
                        onChange={field.onChange}
                        height="400px"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/*  1 x 3 옵션 그리드 (보안 / 긴급 / 중요) */}
              <div className="grid grid-cols-3 gap-4">
                {/* 보안 등급 */}
                <FormField
                  control={form.control}
                  name="docSecuType"
                  render={({ field }) => (
                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                      <FormLabel>보안</FormLabel>
                      <FormControl>
                        <Select onValueChange={field.onChange} defaultValue={field.value}>
                          <SelectTrigger className="w-24">
                            <SelectValue placeholder="등급" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="PERSONAL">개인</SelectItem>
                            <SelectItem value="CONFIDENTIAL">기밀</SelectItem>
                            <SelectItem value="CONFIDENTIAL_STRICT">극기밀</SelectItem>
                          </SelectContent>
                        </Select>
                      </FormControl>
                    </FormItem>
                  )}
                />

                {/* 긴급 여부 */}
                <FormField
                  control={form.control}
                  name="urgYn"
                  render={({ field }) => (
                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                      <FormLabel>긴급</FormLabel>
                      <FormControl>
                        <Switch
                          checked={field.value}
                          onCheckedChange={field.onChange}
                        />
                      </FormControl>
                    </FormItem>
                  )}
                />

                {/* 중요 여부 */}
                <FormField
                  control={form.control}
                  name="importantYn"
                  render={({ field }) => (
                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                      <FormLabel>중요</FormLabel>
                      <FormControl>
                        <Switch
                          checked={field.value}
                          onCheckedChange={field.onChange}
                        />
                      </FormControl>
                    </FormItem>
                  )}
                />
              </div>

              {/* 첨부 파일 */}
              <FormField
                control={form.control}
                name="attachments"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>첨부 파일</FormLabel>
                    <FormControl>
                      <Input
                        type="file"
                        multiple
                        onChange={(e) => field.onChange(e.target.files)}
                      />
                    </FormControl>
                    <FormDescription>필요 시 파일을 선택하세요. (다중 선택 가능)</FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

            </div>

            <Separator />

            {/* 제출 버튼 */}
            <div className="flex justify-end space-x-3">
              <Button
                type="button"
                variant="outline"
                onClick={() => form.reset()}
                disabled={isSubmitting}
              >
                초기화
              </Button>
              <Button type="submit" disabled={isSubmitting}>
                {isSubmitting ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    상신 중...
                  </>
                ) : (
                  '결재 상신'
                )}
              </Button>
            </div>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}