import { useState, useEffect } from 'react';
import { X, Save, Calendar, Clock, MapPin, User, FileText, AlertCircle } from 'lucide-react';
import { comms } from '../../communication';
import { DevelopmentNotice } from "../DevelopmentNotice";
import { HolidayRequest, CommonCode } from '@/types';

interface HolidayRequestDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: () => void;
  initialData?: HolidayRequest | null;
  userLevel: number;
  currentUserId: string;
  currentUserName: string;
}

export function HolidayRequestDialog({
  isOpen,
  onClose,
  onSave,
  initialData,
  userLevel,
  currentUserId,
  // currentUserName
}: HolidayRequestDialogProps) {
  const [loading, setLoading] = useState(false);
  const [codes, setCodes] = useState<{
    cate: CommonCode[];
    reason: CommonCode[];
    location: CommonCode[];
    backup: CommonCode[];
  }>({
    cate: [],
    reason: [],
    location: [],
    backup: []
  });
  const [users, setUsers] = useState<Array<{ id: string; name: string }>>([]);


  // Form State
  const [formData, setFormData] = useState<HolidayRequest>({
    idx: 0,
    gcode: '',
    uid: currentUserId,
    cate: '',
    sdate: new Date().toISOString().split('T')[0],
    edate: new Date().toISOString().split('T')[0],
    Remark: '',
    wuid: currentUserId,
    wdate: '',
    Response: '',
    conf: 0,
    HolyReason: '',
    HolyBackup: '',
    HolyLocation: '',
    HolyDays: 0,
    HolyTimes: 0,
    stime: '09:00',
    etime: '18:00',
    sendmail: false
  });

  const [balanceMessage, setBalanceMessage] = useState('');
  const [requestType, setRequestType] = useState<'day' | 'time' | 'out'>('day'); // day: 휴가, time: 대체, out: 외출
  const isReadOnly = formData.conf === 1 && userLevel < 5;

  useEffect(() => {
    if (isOpen) {
      loadCodes();
      if (userLevel >= 5) {
        loadUsers();
      }

      if (initialData) {
        const confValue = initialData.conf;
        const convertedConf = Number(initialData.conf ?? 0);
        console.log('Dialog Debug:', {
          initialData,
          rawConf: confValue,
          typeOfConf: typeof confValue,
          convertedConf,
          finalFormDataConf: convertedConf
        });
        setFormData({
          idx: initialData.idx,
          gcode: initialData.gcode || '',
          uid: initialData.uid || currentUserId || '',
          cate: initialData.cate || '',
          sdate: initialData.sdate ? initialData.sdate.split('T')[0] : new Date().toISOString().split('T')[0],
          edate: initialData.edate ? initialData.edate.split('T')[0] : new Date().toISOString().split('T')[0],
          HolyDays: initialData.HolyDays || 0,
          HolyTimes: initialData.HolyTimes || 0,
          HolyReason: initialData.HolyReason || (initialData as any).holyReason || '',
          HolyLocation: initialData.HolyLocation || (initialData as any).holyLocation || '',
          HolyBackup: initialData.HolyBackup || (initialData as any).holyBackup || '',
          Remark: initialData.Remark || (initialData as any).remark || '',
          wuid: initialData.wuid || '',
          wdate: initialData.wdate || '',
          Response: initialData.Response || (initialData as any).response || '',
          conf: convertedConf,
          stime: initialData.stime || '09:00',
          etime: initialData.etime || '18:00',
          sendmail: initialData.sendmail || false,
          conf_id: initialData.conf_id || '',
          conf_time: initialData.conf_time || ''
        });
        // Determine request type based on data
        if (initialData.cate === '외출') {
          setRequestType('out');
        } else if (initialData.cate === '대체') {
          setRequestType('time');
        } else {
          setRequestType('day');
        }
      } else {
        // Reset form for new entry
        setFormData({
          idx: 0,
          gcode: '',
          uid: currentUserId,
          cate: '',
          sdate: new Date().toISOString().split('T')[0],
          edate: new Date().toISOString().split('T')[0],
          Remark: '',
          wuid: currentUserId,
          wdate: '',
          Response: '',
          conf: 0,
          HolyReason: '',
          HolyBackup: '',
          HolyLocation: '',
          HolyDays: 0,
          HolyTimes: 0,
          stime: '09:00',
          etime: '18:00',
          sendmail: false
        });
        setRequestType('day');
      }
    }
  }, [isOpen, initialData, currentUserId]);

  // Handle ESC key
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (isOpen && e.key === 'Escape') {
        onClose();
      }
    };
    window.addEventListener('keydown', handleEsc);
    return () => window.removeEventListener('keydown', handleEsc);
  }, [isOpen, onClose]);

  const loadCodes = async () => {
    try {
      // Execute sequentially to avoid WebSocket response race conditions
      const cateRes = await comms.getCommonList('50');
      const reasonRes = await comms.getCommonList('51');
      const locationRes = await comms.getCommonList('52');
      const backupRes = await comms.getCommonList('53');

      console.log('Fetched Common Codes:', {
        cate: cateRes,
        reason: reasonRes,
        location: locationRes,
        backup: backupRes
      });

      setCodes({
        cate: cateRes || [],
        reason: reasonRes || [],
        location: locationRes || [],
        backup: backupRes || []
      });

      // Set default category if new
      if (!initialData && cateRes && cateRes.length > 0) {
        setFormData(prev => ({ ...prev, cate: cateRes[0].svalue }));
      }
    } catch (error) {
      console.error('Failed to load codes:', error);
    }
  };

  const loadUsers = async () => {
    try {
      const userList = await comms.getUserList('');
      if (userList && userList.length > 0) {
        const mappedUsers = userList.map((u: any) => ({
          id: u.id || u.Id,
          name: u.name || u.NameK || u.id
        }));
        setUsers(mappedUsers);
      }
    } catch (error) {
      console.error('Failed to load users:', error);
    }
  };

  useEffect(() => {
    const fetchBalance = async () => {
      // Only for new requests
      if (formData.idx !== 0 || !isOpen || !formData.sdate || !formData.uid) return;

      try {
        const year = formData.sdate.substring(0, 4);
        const response = await comms.getHolydayBalance(year, formData.uid);

        // C# logic replication for message formatting
        // [기준:YYYY-MM-DD] => [분류] N일 남음(N%사용), ...
        const basedate = new Date(formData.sdate);
        basedate.setDate(basedate.getDate() - 1);
        const baseDateStr = basedate.toISOString().split('T')[0]; // Format manually if needed, but ISO YYYY-MM-DD ok

        if (!response.Success || !response.Data) {
          setBalanceMessage(`[기준:${baseDateStr}] => 등록된 근태자료가 없습니다`);
          return;
        }

        const items: string[] = [];
        response.Data.forEach(item => {
          // Days
          if (item.TotalGenDays !== 0 || item.TotalUseDays !== 0) { // Actually checks if Total != 0 or Remain != 0 in C#
            const remain = item.TotalGenDays - item.TotalUseDays;
            // C# checks: if (val[0] != "0" || val[2] != "0") (Total or Remain)
            // Here checking Total != 0 is usually sufficient.
            if (item.TotalGenDays > 0) {
              const perc = (item.TotalUseDays / item.TotalGenDays) * 100;
              items.push(`[${item.cate}] ${remain.toFixed(1)}일 남음(${perc.toFixed(1)}%사용)`);
            }
          }
          // Times
          if (item.TotalGenHours !== 0) {
            const remain = item.TotalGenHours - item.TotalUseHours;
            if (item.TotalGenHours > 0) {
              const perc = (item.TotalUseHours / item.TotalGenHours) * 100;
              items.push(`[${item.cate}] ${remain.toFixed(1)}시간 남음(${perc.toFixed(1)}%사용)`);
            }
          }
        });

        if (items.length === 0) {
          setBalanceMessage(`[기준:${baseDateStr}] => 등록된 근태자료가 없습니다`);
        } else {
          setBalanceMessage(`[기준:${baseDateStr}] => ${items.join(',')}`);
        }

      } catch (error) {
        console.error('Failed to fetch balance:', error);
      }
    };

    fetchBalance();
  }, [formData.sdate, formData.uid, formData.idx, isOpen]);


  const handleTypeChange = (type: 'day' | 'time' | 'out') => {
    setRequestType(type);
    setFormData(prev => {
      let newCate = prev.cate;
      if (type === 'time') newCate = '대체';
      else if (type === 'out') newCate = '외출';
      // If switching back to 'day', we might want to reset cate if it was fixed to '대체' or '외출',
      // or just leave it and let the user change it via Select.
      // But typically '대체'/'외출' are not valid options for 'day' (general holiday).
      // So let's reset to empty or first option if we have codes.
      else if (prev.cate === '대체' || prev.cate === '외출') newCate = codes.cate[0]?.svalue || '';

      return { ...prev, cate: newCate };
    });
  };

  const handleSave = async () => {
    // Validation
    if (!formData.cate && requestType === 'day') {
      alert('구분을 선택하세요.');
      return;
    }
    if (requestType === 'day' && (!formData.HolyDays || formData.HolyDays <= 0)) {
      alert('일수를 입력하세요.');
      return;
    }
    if ((requestType === 'time' || requestType === 'out') && (!formData.HolyTimes || formData.HolyTimes <= 0)) {
      alert('시간을 입력하세요.');
      return;
    }
    if (requestType === 'out') {
      if (!formData.stime) {
        alert('시작 시간을 입력하세요.');
        return;
      }
      if (!formData.etime) {
        alert('종료 시간을 입력하세요.');
        return;
      }
    }

    if (formData.sdate > formData.edate) {
      alert('종료일이 시작일보다 빠를 수 없습니다.');
      return;
    }

    // Prepare data based on type
    const dataToSave = { ...formData };
    if (requestType === 'out') {
      dataToSave.cate = '외출';
      dataToSave.HolyDays = 0;
      // Calculate times if needed
    } else if (requestType === 'time') {
      dataToSave.cate = '대체';
      dataToSave.HolyDays = 0;
    } else {
      // Day
      dataToSave.HolyTimes = 0;
      dataToSave.stime = '';
      dataToSave.etime = '';
      // dataToSave.HolyDays is already set from formData (manual input)
    }

    // New request specific handling
    if (formData.idx === 0) {
      // Validate Remark is not empty (as per user request)
      if (!dataToSave.Remark || dataToSave.Remark.trim() === '') {
        alert('비고를 입력해주세요');
        return; // Needs to focus textarea but we can just return
      }

      // Append balance message if not already present (simplified check)
      if (balanceMessage && !dataToSave.Remark.includes(balanceMessage)) {
        dataToSave.Remark = dataToSave.Remark.trim() + '\r\n' + balanceMessage;
      }
    }


    setLoading(true);
    try {
      const response = await comms.saveHolidayRequest(dataToSave);
      if (response.Success) {
        onSave();
        onClose();
      } else {
        alert('저장 실패: ' + response.Message);
      }
    } catch (error) {
      console.error('Save error:', error);
      alert('저장 중 오류가 발생했습니다.');
    } finally {
      setLoading(false);
    }
  };

  if (!isOpen) return null;

  const title = formData.idx === 0 ? '휴가/외출 신청' : '신청 내역 수정';

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-fade-in">
      <div className="bg-paper rounded-2xl shadow-[0_0_40px_rgba(var(--color-primary),0.4)] w-full max-w-4xl max-h-[90vh] overflow-y-auto border-2 border-primary">
        {/* Header - Lively Gradient */}
        <div className="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-primary-500 via-primary-400 to-primary-600">
          <h2 className="text-xl font-bold text-white flex items-center drop-shadow-md">
            <Calendar className="w-6 h-6 mr-2 text-white animate-pulse" />
            {title}
          </h2>
          <button onClick={onClose} className="text-white/80 hover:text-white transition-colors bg-white/10 hover:bg-white/20 rounded-full p-1">
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* 개발중 알림 */}
        <div className="px-6 pt-6">
          <DevelopmentNotice />
        </div>

        {/* Body */}
        <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Left Column: Inputs */}
          <div className="space-y-6">
            {/* Request Type */}
            <div className="flex gap-4 p-4 bg-primary-500/10 rounded-lg border-2 border-primary-500/30">
              <label className={`flex items-center gap-2 ${(isReadOnly || (formData.idx > 0 && initialData?.cate !== '대체' && initialData?.cate !== '외출')) ? 'cursor-not-allowed' : 'cursor-pointer'}`}>
                <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${requestType === 'day' ? 'border-primary-500' : 'border-primary-500/30'}`}>
                  {requestType === 'day' && <div className="w-2 h-2 rounded-full bg-primary-500" />}
                </div>
                <input
                  type="radio"
                  name="type"
                  checked={requestType === 'day'}
                  onChange={() => handleTypeChange('day')}
                  className="hidden"
                  disabled={isReadOnly || (formData.idx > 0 && initialData?.cate !== '대체' && initialData?.cate !== '외출')}
                />
                <span className="font-bold text-primary-400">일반휴가</span>
              </label>
              <label className={`flex items-center gap-2 ${(isReadOnly || (formData.idx > 0 && initialData?.cate !== '대체')) ? 'cursor-not-allowed' : 'cursor-pointer'}`}>
                <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${requestType === 'time' ? 'border-primary-500' : 'border-primary-500/30'}`}>
                  {requestType === 'time' && <div className="w-2 h-2 rounded-full bg-primary-500" />}
                </div>
                <input
                  type="radio"
                  name="type"
                  checked={requestType === 'time'}
                  onChange={() => handleTypeChange('time')}
                  className="hidden"
                  disabled={isReadOnly || (formData.idx > 0 && initialData?.cate !== '대체')}
                />
                <span className="font-bold text-primary-400">대체휴가</span>
              </label>
              <label className={`flex items-center gap-2 ${isReadOnly ? 'cursor-not-allowed' : 'cursor-pointer'}`}>
                <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${requestType === 'out' ? 'border-primary-500' : 'border-primary-500/30'}`}>
                  {requestType === 'out' && <div className="w-2 h-2 rounded-full bg-primary-500" />}
                </div>
                <input
                  type="radio"
                  name="type"
                  checked={requestType === 'out'}
                  onChange={() => handleTypeChange('out')}
                  className="hidden"
                  disabled={isReadOnly}
                />
                <span className="font-bold text-primary-400">외출</span>
              </label>
            </div>

            {/* User Selection (Admin only) */}
            {userLevel >= 5 && (
              <div className="grid grid-cols-1 gap-2">
                <label className="text-sm font-bold text-primary-400 flex items-center gap-2">
                  <User className="w-4 h-4" /> 신청자
                </label>
                <select
                  value={formData.uid}
                  onChange={(e) => setFormData({ ...formData, uid: e.target.value })}
                  className="w-full px-3 py-2 bg-primary-500/10 border-2 border-primary-500/30 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-500"
                  disabled={isReadOnly || formData.idx > 0}
                >
                  {users.map(user => (
                    <option key={user.id} value={user.id} className="bg-bg-paper">{user.name} ({user.id})</option>
                  ))}
                </select>
              </div>
            )}

            {/* Date & Time */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-bold text-primary-400 flex items-center gap-2">
                  <Calendar className="w-4 h-4" /> 시작일
                </label>
                <input
                  type="date"
                  value={formData.sdate}
                  onChange={(e) => setFormData({ ...formData, sdate: e.target.value })}
                  className="w-full px-3 py-2 bg-primary-500/10 border-2 border-primary-500/30 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:bg-primary-500/5"
                  disabled={isReadOnly}
                />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-bold text-primary-400 flex items-center gap-2">
                  <Calendar className="w-4 h-4" /> 종료일
                </label>
                <input
                  type="date"
                  value={formData.edate}
                  onChange={(e) => setFormData({ ...formData, edate: e.target.value })}
                  className="w-full px-3 py-2 bg-primary-500/10 border-2 border-primary-500/30 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:bg-primary-500/5"
                  disabled={isReadOnly}
                />
              </div>
            </div>



            {/* Category & Reason */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-bold text-primary-400 flex items-center gap-2">
                  <FileText className="w-4 h-4" /> 구분
                </label>
                {requestType === 'day' ? (
                  <select
                    value={formData.cate}
                    onChange={(e) => setFormData({ ...formData, cate: e.target.value })}
                    className="w-full px-3 py-2 bg-primary-500/10 border-2 border-primary-500/30 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:bg-primary-500/5"
                    disabled={isReadOnly}
                  >
                    {codes.cate.map(code => {
                      const val = code.memo || (code as any).Memo || code.svalue || (code as any).SValue || (code as any).value || (code as any).Value || (code as any).name || (code as any).Name;
                      const key = code.code || (code as any).Code || (code as any).key || (code as any).Key || val;
                      return (
                        <option key={key} value={val} className="bg-bg-paper">
                          {val}
                        </option>
                      );
                    })}
                  </select>
                ) : (
                  <input
                    type="text"
                    value={formData.cate}
                    readOnly
                    className="w-full px-3 py-2 bg-primary-500/10 border-2 border-primary-500/30 rounded-lg text-white/50 cursor-not-allowed"
                  />
                )}
              </div>
              <div className="space-y-2">
                <label className="text-sm font-bold text-primary-400 flex items-center gap-2">
                  <AlertCircle className="w-4 h-4" /> 사유
                </label>
                <input
                  type="text"
                  list="reason-list"
                  value={formData.HolyReason || ''}
                  onChange={(e) => setFormData({ ...formData, HolyReason: e.target.value })}
                  className="w-full px-3 py-2 bg-primary-500/10 border-2 border-primary-500/30 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:bg-primary-500/5"
                  placeholder="입력 또는 선택"
                  disabled={isReadOnly}
                />
                <datalist id="reason-list">
                  {codes.reason.map(code => {
                    const val = code.memo || (code as any).Memo || code.svalue || (code as any).SValue || (code as any).value || (code as any).Value || (code as any).name || (code as any).Name;
                    const key = code.code || (code as any).Code || (code as any).key || (code as any).Key || val;
                    return (
                      <option key={key} value={val} />
                    );
                  })}
                </datalist>
              </div>
            </div>

            {/* Location & Backup */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-bold text-primary-400 flex items-center gap-2">
                  <MapPin className="w-4 h-4" /> 행선지
                </label>
                <input
                  type="text"
                  list="location-list"
                  value={formData.HolyLocation || ''}
                  onChange={(e) => setFormData({ ...formData, HolyLocation: e.target.value })}
                  className="w-full px-3 py-2 bg-primary-500/10 border-2 border-primary-500/30 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:bg-primary-500/5"
                  placeholder="입력 또는 선택"
                  disabled={isReadOnly}
                />
                <datalist id="location-list">
                  {codes.location.map(code => {
                    const val = code.memo || (code as any).Memo || code.svalue || (code as any).SValue || (code as any).value || (code as any).Value || (code as any).name || (code as any).Name;
                    const key = code.code || (code as any).Code || (code as any).key || (code as any).Key || val;
                    return (
                      <option key={key} value={val} />
                    );
                  })}
                </datalist>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-bold text-primary-400 flex items-center gap-2">
                  <User className="w-4 h-4" /> 업무대행
                </label>
                <input
                  type="text"
                  list="backup-list"
                  value={formData.HolyBackup || ''}
                  onChange={(e) => setFormData({ ...formData, HolyBackup: e.target.value })}
                  className="w-full px-3 py-2 bg-primary-500/10 border-2 border-primary-500/30 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:bg-primary-500/5"
                  placeholder="입력 또는 선택"
                  disabled={isReadOnly}
                />
                <datalist id="backup-list">
                  {codes.backup.map(code => {
                    const val = code.memo || (code as any).Memo || code.svalue || (code as any).SValue || (code as any).value || (code as any).Value || (code as any).name || (code as any).Name;
                    const key = code.code || (code as any).Code || (code as any).key || (code as any).Key || val;
                    return (
                      <option key={key} value={val} />
                    );
                  })}
                </datalist>
              </div>
            </div>

            {/* Days & Times (Manual Override) */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-bold text-primary-400">일수</label>
                <input
                  type="number"
                  step="0.5"
                  value={formData.HolyDays}
                  onChange={(e) => setFormData({ ...formData, HolyDays: parseFloat(e.target.value) })}
                  className="w-full px-3 py-2 bg-primary-500/10 border-2 border-primary-500/30 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:bg-primary-500/5 disabled:text-primary-200/30 disabled:cursor-not-allowed"
                  disabled={isReadOnly || requestType !== 'day'}
                />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-bold text-primary-400">시간</label>
                <input
                  type="number"
                  step="0.5"
                  value={formData.HolyTimes}
                  onChange={(e) => setFormData({ ...formData, HolyTimes: parseFloat(e.target.value) })}
                  className="w-full px-3 py-2 bg-primary-500/10 border-2 border-primary-500/30 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:bg-primary-500/5 disabled:text-primary-200/30 disabled:cursor-not-allowed"
                  disabled={isReadOnly || requestType === 'day'}
                />
              </div>
            </div>

            {/* Outing Time (Only for 'out') */}
            {requestType === 'out' && (
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <label className="text-sm font-bold text-primary-400 flex items-center gap-2">
                    <Clock className="w-4 h-4" /> 시작 시간
                  </label>
                  <input
                    type="time"
                    value={formData.stime}
                    onChange={(e) => setFormData({ ...formData, stime: e.target.value })}
                    className="w-full px-3 py-2 bg-primary-500/10 border-2 border-primary-500/30 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:bg-primary-500/5"
                    disabled={isReadOnly}
                  />
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-bold text-primary-400 flex items-center gap-2">
                    <Clock className="w-4 h-4" /> 종료 시간
                  </label>
                  <input
                    type="time"
                    value={formData.etime}
                    onChange={(e) => setFormData({ ...formData, etime: e.target.value })}
                    className="w-full px-3 py-2 bg-primary-500/10 border-2 border-primary-500/30 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:bg-primary-500/5"
                    disabled={isReadOnly}
                  />
                </div>
              </div>
            )}
          </div>

          {/* Right Column: Remark */}
          <div className="md:col-span-1 h-full">
            <div className="flex flex-col h-full space-y-2">
              <label className="text-sm font-medium text-primary-200">비고</label>
              <textarea
                value={formData.Remark}
                onChange={(e) => setFormData({ ...formData, Remark: e.target.value })}
                className="w-full flex-1 px-3 py-2 bg-primary-500/10 border border-primary-500/30 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400 resize-none min-h-[200px] disabled:bg-primary-500/5"
                placeholder="비고 사항을 입력하세요..."
                disabled={isReadOnly}
              />

              {/* Admin Response & Confirmation (Moved to Right) */}
              <div className="p-4 bg-primary-500/10 rounded-lg space-y-4 border border-primary-500/30 mt-4">
                <h3 className="font-semibold text-primary-400">관리자 승인</h3>
                <div className="flex gap-4">
                  <label className={`flex items-center gap-2 ${userLevel < 5 ? 'cursor-not-allowed' : 'cursor-pointer'}`}>
                    <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${formData.conf === 0 ? 'border-primary-400' : 'border-primary-500/30'}`}>
                      {formData.conf === 0 && <div className="w-2 h-2 rounded-full bg-primary-400" />}
                    </div>
                    <input
                      type="radio"
                      name="conf"
                      checked={formData.conf === 0}
                      onChange={() => setFormData({ ...formData, conf: 0 })}
                      className="hidden"
                      disabled={userLevel < 5}
                    />
                    <span className="text-primary-200">미승인</span>
                  </label>
                  <label className={`flex items-center gap-2 ${userLevel < 5 ? 'cursor-not-allowed' : 'cursor-pointer'}`}>
                    <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${formData.conf === 1 ? 'border-green-400' : 'border-primary-500/30'}`}>
                      {formData.conf === 1 && <div className="w-2 h-2 rounded-full bg-green-400" />}
                    </div>
                    <input
                      type="radio"
                      name="conf"
                      checked={formData.conf === 1}
                      onChange={() => setFormData({ ...formData, conf: 1 })}
                      className="hidden"
                      disabled={userLevel < 5}
                    />
                    <span className="text-primary-200">승인</span>
                  </label>
                  <label className={`flex items-center gap-2 ${userLevel < 5 ? 'cursor-not-allowed' : 'cursor-pointer'}`}>
                    <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${formData.conf === 2 ? 'border-red-400' : 'border-primary-500/30'}`}>
                      {formData.conf === 2 && <div className="w-2 h-2 rounded-full bg-red-400" />}
                    </div>
                    <input
                      type="radio"
                      name="conf"
                      checked={formData.conf === 2}
                      onChange={() => setFormData({ ...formData, conf: 2 })}
                      className="hidden"
                      disabled={userLevel < 5}
                    />
                    <span className="text-primary-200">반려</span>
                  </label>
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-primary-200">관리자 메모</label>
                  <input
                    type="text"
                    value={formData.Response}
                    onChange={(e) => setFormData({ ...formData, Response: e.target.value })}
                    className="w-full px-3 py-2 bg-primary-500/10 border border-primary-500/30 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary-400 disabled:bg-primary-500/5"
                    disabled={userLevel < 5}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-primary-500/30 bg-primary-500/10">
          <button
            onClick={onClose}
            className="px-4 py-2 text-primary-200 hover:text-white hover:bg-primary-500/20 rounded-lg transition-colors font-medium"
          >
            취소
          </button>
          <button
            onClick={handleSave}
            disabled={loading || isReadOnly}
            className="flex items-center gap-2 px-6 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg shadow-lg shadow-primary-500/30 transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Save className="w-4 h-4" />
            {loading ? '저장 중...' : '저장'}
          </button>
        </div>
      </div>
    </div>
  );
}
