'use client';

import { useState } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { toast } from 'sonner';

interface PathEditDialogProps {
  editingPathPageId: number | null;
  setEditingPathPageId: (id: number | null) => void;
  editingAbsolutePath: string;
  setEditingAbsolutePath: (path: string) => void;
  updateItemPage: (id: number, updates: any) => void;
  trackChange: (type: 'pages' | 'sections' | 'fields' | 'masterFields' | 'attributes' | 'sectionTemplates', id: string, action: 'add' | 'update', data: any, attributeType?: string) => void;
}

export function PathEditDialog({
  editingPathPageId,
  setEditingPathPageId,
  editingAbsolutePath,
  setEditingAbsolutePath,
  updateItemPage,
  trackChange,
}: PathEditDialogProps) {
  const [isSubmitted, setIsSubmitted] = useState(false);

  // 유효성 검사
  const isPathEmpty = !editingAbsolutePath.trim();
  const isPathInvalid = editingAbsolutePath.trim() && !editingAbsolutePath.startsWith('/');

  const handleClose = () => {
    setEditingPathPageId(null);
    setEditingAbsolutePath('');
    setIsSubmitted(false);
  };

  return (
    <Dialog open={editingPathPageId !== null} onOpenChange={(open) => {
      if (!open) handleClose();
    }}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>절대경로 수정</DialogTitle>
          <DialogDescription>페이지의 절대경로를 수정합니다 (예: /제품관리/제품등록)</DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div>
            <Label>절대경로 *</Label>
            <Input
              value={editingAbsolutePath}
              onChange={(e) => setEditingAbsolutePath(e.target.value)}
              placeholder="/제품관리/제품등록"
              className={isSubmitted && (isPathEmpty || isPathInvalid) ? 'border-red-500 focus-visible:ring-red-500' : ''}
            />
            {isSubmitted && isPathEmpty && (
              <p className="text-xs text-red-500 mt-1">절대경로를 입력해주세요</p>
            )}
            {isSubmitted && isPathInvalid && (
              <p className="text-xs text-red-500 mt-1">절대경로는 슬래시(/)로 시작해야 합니다</p>
            )}
            {!isSubmitted || (!isPathEmpty && !isPathInvalid) ? (
              <p className="text-xs text-gray-500 mt-1">슬래시(/)로 시작하며, 경로를 슬래시로 구분합니다</p>
            ) : null}
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={handleClose}>취소</Button>
          <Button onClick={() => {
            setIsSubmitted(true);
            if (isPathEmpty || isPathInvalid) {
              return;
            }
            if (editingPathPageId) {
              updateItemPage(editingPathPageId, { absolutePath: editingAbsolutePath });
              trackChange('pages', String(editingPathPageId), 'update', { absolutePath: editingAbsolutePath });
              handleClose();
              toast.success('절대경로가 수정되었습니다 (저장 필요)');
            }
          }}>저장</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}