import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp, getApps } from 'firebase/app';
import { 
  getAuth, 
  signInWithCustomToken, 
  signInAnonymously, 
  onAuthStateChanged 
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  doc, 
  setDoc, 
  addDoc, 
  deleteDoc, 
  onSnapshot,
  Timestamp
} from 'firebase/firestore';
import { 
  Calendar as CalendarIcon, 
  Users,
  MapPin,
  FileText,
  Plus,
  X,
  ChevronLeft,
  ChevronRight,
  Check,
  Home as HomeIcon,
  Save,
  FileSpreadsheet,
  CalendarDays,
  Landmark,
  Coins,
  Cloud,
  CircleX,
  ArrowDownCircle,
  AlertCircle,
  Info,
  Sparkles,
  Brain,
  TrendingUp,
  MessageSquare,
  Search,
  LayoutDashboard,
  ClipboardList,
  Calculator,
  Percent,
  Wallet,
  Truck,
  UserPlus,
  Phone,
  Trash2,
  AlertTriangle
} from 'lucide-react';

// --- Firebase 초기화 ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = !getApps().length ? initializeApp(firebaseConfig) : getApps()[0];
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'field-management-pro-v1';

// --- Gemini API 설정 ---
const apiKey = ""; 

const App = () => {
  // --- 유틸리티 함수 ---
  const getLocalDateString = (date) => {
    if (!date) return "";
    const offset = date.getTimezoneOffset() * 60000;
    return (new Date(date.getTime() - offset)).toISOString().slice(0, 10);
  };

  // --- 상태 관리 ---
  const [user, setUser] = useState(null);
  const [activeTab, setActiveTab] = useState('home'); 
  const [viewDate, setViewDate] = useState(new Date()); 
  const [reports, setReports] = useState([]); 
  const [isInputModalOpen, setIsInputModalOpen] = useState(false);
  const [editingId, setEditingId] = useState(null);
  const [toast, setToast] = useState({ open: false, message: '', type: 'info' });
  const [showExpDetail, setShowExpDetail] = useState(false);
  const [isSyncing, setIsSyncing] = useState(false);
  
  // 삭제 확인용 상태
  const [deleteConfirmId, setDeleteConfirmId] = useState(null);

  const [aiResult, setAiResult] = useState(null);
  const [isAIAnalyzing, setIsAIAnalyzing] = useState(false);
  const [isAIModalOpen, setIsAIModalOpen] = useState(false);

  // Firestore 데이터 상태
  const [userMeta, setUserMeta] = useState({}); 
  const [receivedAmounts, setReceivedAmounts] = useState({}); 
  const [vatOverrides, setVatOverrides] = useState({}); 

  const now = new Date();
  const [startDate, setStartDate] = useState(new Date(now.getFullYear(), now.getMonth() - 1, 1).toISOString().split('T')[0]);
  const [endDate, setEndDate] = useState(new Date(now.getFullYear(), now.getMonth() + 1, 0).toISOString().split('T')[0]);

  // 상세 지출 항목 12개 슬롯 구성
  const initialForm = {
    date: getLocalDateString(new Date()),
    company: '', site: '', names: '',
    totalAmount: '0', vat: '0', totalSum: '0',
    materialCost: '0', laborCost: '0', expense: '0', profit: '0',
    ...Object.fromEntries(Array.from({ length: 12 }, (_, i) => [`expName${i+1}`, ''])),
    ...Object.fromEntries(Array.from({ length: 12 }, (_, i) => [`expAmt${i+1}`, '0']))
  };
  const [formData, setFormData] = useState(initialForm);

  // --- 헬퍼 함수 ---
  const showToastMessage = (msg, type = 'info') => {
    setToast({ open: true, message: msg, type });
    setTimeout(() => setToast(prev => ({ ...prev, open: false })), 3000);
  };

  const formatNumber = (num) => {
    if (!num && num !== 0) return '0';
    const n = typeof num === 'string' ? parseInt(num.replace(/,/g, '')) || 0 : num;
    return Math.floor(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };

  const parseNumber = (str) => {
    if (!str) return '0';
    const val = str.toString().replace(/,/g, '').replace(/[^0-9-]/g, '');
    return val === '' ? '0' : val;
  };

  const calculateFinancials = (data) => {
    const amt = parseInt(parseNumber(data.totalAmount)) || 0;
    const vat = parseInt(parseNumber(data.vat)) || 0;
    const mat = parseInt(parseNumber(data.materialCost)) || 0;
    const lab = parseInt(parseNumber(data.laborCost)) || 0;
    const expTotal = Array.from({ length: 12 }, (_, i) => i + 1).reduce((sum, num) => {
      return sum + (parseInt(parseNumber(data[`expAmt${num}`])) || 0);
    }, 0);
    return {
      totalSum: (amt + vat).toString(),
      expense: expTotal.toString(),
      profit: (amt - mat - lab - expTotal).toString()
    };
  };

  // --- 엑셀(CSV) 전환 ---
  const handleExportExcel = () => {
    if (reports.length === 0) {
      showToastMessage("전환할 데이터가 없습니다.", "error");
      return;
    }
    const headers = ["날짜", "거래처", "현장", "공급가액", "부가세", "합계", "인건비", "자재비", "경비", "이익"];
    const rows = reports.map(r => [
      r.date, r.company, r.site, r.totalAmount, r.vat, r.totalSum, r.laborCost, r.materialCost, r.expense, r.profit
    ]);
    const csvContent = "\uFEFF" + headers.join(",") + "\n" + rows.map(e => e.join(",")).join("\n");
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = `현장관리리포트_${getLocalDateString(new Date())}.csv`;
    link.click();
    showToastMessage("엑셀 파일이 다운로드되었습니다.", "success");
  };

  // --- Firebase 인증 및 데이터 동기화 ---
  useEffect(() => {
    const initAuth = async () => {
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
        await signInWithCustomToken(auth, __initial_auth_token);
      } else {
        await signInAnonymously(auth);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (!user) return;
    const unsubReports = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'reports'), (snap) => {
      setReports(snap.docs.map(d => ({ id: d.id, ...d.data() })).sort((a, b) => b.date.localeCompare(a.date)));
    });
    
    const unsubMeta = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'personnelMeta'), (snap) => {
      const meta = {}; snap.docs.forEach(d => { meta[d.id] = d.data(); }); setUserMeta(meta);
    });

    const unsubFinance = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'receivedAmounts'), (snap) => {
      const fin = {}; snap.docs.forEach(d => { fin[d.id] = d.data().history; }); setReceivedAmounts(fin);
    });

    const unsubVat = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'vatOverrides'), (snap) => {
      const vats = {}; snap.docs.forEach(d => { vats[d.id] = d.data().amount; }); setVatOverrides(vats);
    });

    return () => { unsubReports(); unsubMeta(); unsubFinance(); unsubVat(); };
  }, [user]);

  // --- 핸들러 ---
  const handleSaveReport = async (e) => {
    e.preventDefault();
    if (!user) return;
    setIsSyncing(true);
    try {
      if (editingId) {
        await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'reports', editingId), formData);
      } else {
        await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'reports'), formData);
      }
      setIsInputModalOpen(false);
      setFormData(initialForm);
      setEditingId(null);
      showToastMessage("데이터 저장 완료", "success");
    } catch (err) { showToastMessage("저장 실패", "info"); }
    finally { setIsSyncing(false); }
  };

  // [수정] 윈도우 confirm 대신 커스텀 모달을 트리거하는 방식으로 변경
  const triggerDelete = (id, e) => {
    if (e) e.stopPropagation();
    setDeleteConfirmId(id);
  };

  const confirmDeleteReport = async () => {
    if (!user || !deleteConfirmId) return;
    try {
      await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'reports', deleteConfirmId));
      showToastMessage("데이터 삭제 완료", "success");
    } catch (err) {
      showToastMessage("삭제 중 오류 발생", "info");
    } finally {
      setDeleteConfirmId(null);
    }
  };

  const handleUpdateMeta = async (name, field, val) => {
    if (!user) return;
    const current = userMeta[name] || {};
    const cleanVal = (field === 'unitCost' || field === 'deduction') ? parseNumber(val) : val;
    await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'personnelMeta', name), { ...current, [field]: cleanVal });
  };

  const handleUpdateFinance = async (key, idx, field, val) => {
    if (!user) return;
    const history = receivedAmounts[key] ? [...receivedAmounts[key]] : Array.from({ length: 5 }, () => ({ amt: 0, date: '' }));
    history[idx] = { ...history[idx], [field]: field === 'amt' ? parseNumber(val) : val };
    await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'receivedAmounts', key), { history });
  };

  const handleUpdateVatOverride = async (key, val) => {
    if (!user) return;
    const amount = parseNumber(val);
    await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'vatOverrides', key), { amount });
  };

  const callGeminiAI = async (promptText) => {
    setIsAIAnalyzing(true);
    setIsAIModalOpen(true);
    setAiResult("데이터 분석 중...");
    const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
    try {
      const response = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ contents: [{ parts: [{ text: promptText }] }] })
      });
      const result = await response.json();
      setAiResult(result.candidates?.[0]?.content?.parts?.[0]?.text || "분석 실패");
    } catch (err) { setAiResult("AI 연결 오류"); }
    finally { setIsAIAnalyzing(false); }
  };

  // --- 데이터 집계 ---
  const totals = useMemo(() => {
    return reports.reduce((acc, r) => {
      const key = `${r.company.trim()}|${r.site.trim()}`;
      const sumReceived = (receivedAmounts[key] || []).reduce((s, v) => s + (parseInt(v.amt) || 0), 0);
      acc.pure += parseInt(r.totalAmount || 0);
      acc.vat += parseInt(r.vat || 0);
      acc.total += parseInt(r.totalSum || 0);
      acc.received += sumReceived;
      acc.balance += (parseInt(r.totalSum || 0) - sumReceived);
      acc.mat += parseInt(r.materialCost || 0);
      acc.lab += parseInt(r.laborCost || 0);
      acc.exp += parseInt(r.expense || 0);
      acc.profit += parseInt(r.profit || 0);
      return acc;
    }, { pure: 0, vat: 0, total: 0, received: 0, balance: 0, mat: 0, lab: 0, exp: 0, profit: 0 });
  }, [reports, receivedAmounts]);

  const groupedProjectData = useMemo(() => {
    const groups = {};
    reports.forEach(r => {
      const key = `${r.company.trim()}|${r.site.trim()}`;
      if (!groups[key]) {
        groups[key] = {
          id: key, company: r.company, site: r.site, date: r.date,
          totalAmount: 0, vat: 0, totalSum: 0, materialCost: 0, laborCost: 0, expense: 0, profit: 0, count: 0
        };
      }
      groups[key].totalAmount += parseInt(r.totalAmount || 0);
      groups[key].vat += parseInt(r.vat || 0);
      groups[key].totalSum += parseInt(r.totalSum || 0);
      groups[key].materialCost += parseInt(r.materialCost || 0);
      groups[key].laborCost += parseInt(r.laborCost || 0);
      groups[key].expense += parseInt(r.expense || 0);
      groups[key].profit += parseInt(r.profit || 0);
      groups[key].count += 1;
      if (r.date > groups[key].date) groups[key].date = r.date;
    });
    return Object.values(groups).sort((a, b) => b.date.localeCompare(a.date));
  }, [reports]);

  const personStats = useMemo(() => {
    const stats = {};
    const filtered = reports.filter(r => r.date >= startDate && r.date <= endDate);
    filtered.forEach(r => {
      const names = (r.names || '').split(':').map(n => n.trim()).filter(n => n !== "");
      names.forEach(name => {
        if (!stats[name]) stats[name] = { name, dates: [], sites: [], days: 0 };
        if (!stats[name].dates.includes(r.date)) {
          stats[name].dates.push(r.date);
          stats[name].days += 1;
        }
        if (!stats[name].sites.includes(r.site)) stats[name].sites.push(r.site);
      });
    });
    return Object.values(stats).sort((a, b) => b.days - a.days);
  }, [reports, startDate, endDate]);

  const calendarDays = useMemo(() => {
    const y = viewDate.getFullYear();
    const m = viewDate.getMonth();
    const start = new Date(y, m, 1).getDay();
    const end = new Date(y, m + 1, 0).getDate();
    const days = [];
    for (let i = 0; i < start; i++) days.push(null);
    for (let i = 1; i <= end; i++) days.push(new Date(y, m, i));
    return days;
  }, [viewDate]);

  const renderExpDetailRow = (num) => (
    <div key={num} className="flex items-center bg-white border-2 border-emerald-100 rounded-xl overflow-hidden shadow-sm h-11 hover:border-emerald-400 focus-within:border-emerald-500 transition-all group">
      <div className="w-10 h-full bg-emerald-50 flex items-center justify-center text-[10px] font-black text-emerald-600 border-r-2 border-emerald-100 shrink-0">{num}</div>
      <div className="flex-1 h-full min-w-0">
        <input 
          type="text" 
          value={formData[`expName${num}`] || ''} 
          onChange={(e) => setFormData({...formData, [`expName${num}`]: e.target.value})}
          className="w-full h-full bg-transparent border-none text-[12px] font-black text-slate-800 px-1 outline-none placeholder:text-slate-300 text-center focus:ring-0 leading-tight" 
          placeholder="항목명"
        />
      </div>
      <div className="w-[1.5px] h-5 bg-emerald-100/60 shrink-0"></div>
      <div className="flex-1 h-full min-w-0 bg-emerald-50/15">
        <input 
          type="text" 
          value={formatNumber(formData[`expAmt${num}`])} 
          onChange={(e) => {
            const nextData = { ...formData, [`expAmt${num}`]: parseNumber(e.target.value) };
            setFormData({ ...nextData, ...calculateFinancials(nextData) });
          }}
          className="w-full h-full bg-transparent border-none text-[12px] font-black text-emerald-900 px-1 outline-none text-center focus:ring-0 leading-tight" 
          placeholder="0"
        />
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-[#F5F7F9] text-slate-900 font-sans p-2 flex flex-col items-center overflow-x-hidden">
      
      <style>{`
        @keyframes urgent-pulse {
          0% { background-color: rgba(255, 241, 242, 0.6); transform: scale(1); }
          50% { background-color: rgba(254, 226, 226, 1); transform: scale(1.02); }
          100% { background-color: rgba(255, 241, 242, 0.6); transform: scale(1); }
        }
        .animate-urgent { animation: urgent-pulse 2s infinite ease-in-out; }
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
      `}</style>

      <div className="max-w-full w-full flex-1">
        
        {/* --- 헤더 --- */}
        <div className="flex flex-row items-center gap-4 mb-4 px-4 bg-white p-2.5 rounded-[24px] border border-slate-200 shadow-md h-18 w-full overflow-hidden">
          <div className="flex items-center gap-3 shrink-0">
            <div className="w-10 h-10 bg-indigo-600 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-indigo-100">
              <LayoutDashboard size={20} strokeWidth={2.5} />
            </div>
            <div className="flex flex-col text-left">
              <span className="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1">Office Hub Pro</span>
              <h1 className="text-base font-black text-slate-900 leading-none">{viewDate.getFullYear()}년 <span className="text-indigo-600">{viewDate.getMonth() + 1}월</span></h1>
            </div>
          </div>

          <div className="flex items-center gap-2.5 ml-2">
            <button onClick={() => { setEditingId(null); setFormData(initialForm); setIsInputModalOpen(true); }} className="flex items-center gap-1.5 px-4 py-2.5 bg-indigo-600 text-white rounded-xl text-[12px] font-black shadow-md hover:bg-indigo-700 active:scale-95 transition-all">
              <Plus size={16} strokeWidth={3} /><span>신규 등록</span>
            </button>
            <button onClick={handleExportExcel} className="flex items-center gap-1.5 px-4 py-2.5 bg-emerald-600 text-white rounded-xl text-[12px] font-black shadow-md hover:bg-emerald-700 active:scale-95 transition-all">
              <FileSpreadsheet size={16} strokeWidth={2.5} /><span>엑셀전환</span>
            </button>
            <button onClick={() => showToastMessage("클라우드 데이터 동기화 완료", "success")} className="flex items-center gap-1.5 px-4 py-2.5 bg-slate-800 text-white rounded-xl text-[12px] font-black shadow-md hover:bg-black active:scale-95 transition-all">
              <Save size={16} strokeWidth={2.5} /><span>저장</span>
            </button>
          </div>

          <nav className="ml-auto flex items-center gap-1 bg-slate-100/50 p-1 rounded-2xl border border-slate-200">
            {[
              { id: 'home', icon: HomeIcon, label: '홈' }, 
              { id: 'statement', icon: FileText, label: '정산' }, 
              { id: 'attendance', icon: Users, label: '출력' }, 
              { id: 'finance', icon: Landmark, label: '입금/정산' }
            ].map(tab => (
              <button key={tab.id} onClick={() => setActiveTab(tab.id)} className={`flex items-center gap-2 px-3.5 py-1.5 rounded-xl text-[11px] font-black transition-all ${activeTab === tab.id ? `bg-slate-900 text-white shadow-lg` : 'text-slate-500 hover:bg-white'}`}>
                <tab.icon size={14} strokeWidth={2.5}/> <span className="hidden md:inline">{tab.label}</span>
              </button>
            ))}
          </nav>
        </div>

        {/* --- 메인 컨텐츠 --- */}
        <main className="w-full space-y-4">
          {activeTab === 'home' && (
            <div className="grid grid-cols-7 gap-2 animate-in fade-in duration-500">
              {['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map((d, i) => (
                <div key={d} className={`text-center py-1 text-[10px] font-black tracking-widest ${i === 0 ? 'text-rose-500' : i === 6 ? 'text-indigo-500' : 'text-slate-400'}`}>{d}</div>
              ))}
              {calendarDays.map((date, idx) => {
                const ds = date ? getLocalDateString(date) : null;
                const daily = reports.filter(r => r.date === ds);
                return (
                  <div key={idx} className={`min-h-[100px] p-2 rounded-[20px] border-2 transition-all flex flex-col group relative ${!date ? 'opacity-0 cursor-default' : 'bg-white border-slate-100 hover:border-indigo-300 cursor-pointer shadow-sm'}`} onClick={() => date && (setFormData({ ...initialForm, date: ds }), setEditingId(null), setIsInputModalOpen(true))}>
                    {date && (
                      <>
                        <div className="flex justify-between items-center mb-1"><span className={`text-[11px] font-black w-5 h-5 flex items-center justify-center rounded-lg ${date.getDay() === 0 ? 'bg-rose-50 text-rose-600' : date.getDay() === 6 ? 'bg-indigo-50 text-indigo-600' : 'bg-slate-50 text-slate-700'}`}>{date.getDate()}</span></div>
                        <div className="flex-1 space-y-1 overflow-y-auto scrollbar-hide text-center">
                          {daily.map(r => (
                            <div key={r.id} className="group/badge relative text-[9px] bg-indigo-50/40 border border-indigo-100 p-1.5 rounded-lg hover:bg-white transition-all border-l-2 border-l-indigo-500 shadow-sm" onClick={(e) => { e.stopPropagation(); setFormData(r); setEditingId(r.id); setIsInputModalOpen(true); }}>
                              <div className="font-black text-slate-800 truncate pr-3">{r.company}</div>
                              <div className="text-[8px] text-slate-500 truncate">{r.site}</div>
                              {/* [개선] 즉시 삭제 버튼 로직 강화 */}
                              <button 
                                onClick={(e) => triggerDelete(r.id, e)}
                                className="absolute top-1 right-1 hidden group-hover/badge:flex bg-rose-500 text-white rounded-full p-0.5 shadow-sm hover:bg-rose-600 transition-all z-10"
                                title="즉시 삭제"
                              >
                                <X size={10} strokeWidth={4} />
                              </button>
                            </div>
                          ))}
                        </div>
                      </>
                    )}
                  </div>
                );
              })}
            </div>
          )}

          {activeTab === 'statement' && (
            <div className="bg-white rounded-[32px] border border-slate-200 shadow-xl overflow-hidden animate-in fade-in duration-500">
              <div className="p-6 border-b border-slate-100 flex flex-col gap-6 text-center">
                 <div className="flex justify-between items-center">
                    <div className="flex items-center gap-3 text-left">
                      <div className="w-10 h-10 bg-indigo-600 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-indigo-100"><FileText size={20} /></div>
                      <div><h2 className="text-xl font-black text-slate-900">통합 정산 내역 (현장별 합계)</h2><p className="text-xs font-bold text-slate-400">현장별 자동 합산 데이터입니다.</p></div>
                    </div>
                    <button onClick={() => callGeminiAI(`합산 정산 데이터 분석: ${JSON.stringify(groupedProjectData)}`)} className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-br from-indigo-600 to-violet-600 text-white rounded-2xl text-[13px] font-black shadow-lg transition-all active:scale-95"><Sparkles size={18} /> <span>AI 경영 분석</span></button>
                 </div>
                 <div className="grid grid-cols-2 lg:grid-cols-6 gap-4">
                   {[
                     { label: '총 공사액', val: totals.pure, color: 'text-indigo-600', bg: 'bg-indigo-50/50' },
                     { label: '자재비', val: totals.mat, color: 'text-orange-600', bg: 'bg-orange-50/50' },
                     { label: '총 인건비', val: totals.lab, color: 'text-violet-600', bg: 'bg-violet-50/50' },
                     { label: '총 경비', val: totals.exp, color: 'text-amber-600', bg: 'bg-amber-50/50' },
                     { label: '최종 이익', val: totals.profit, color: 'text-emerald-600', bg: 'bg-emerald-50/50' },
                     { label: '수익률', val: totals.pure > 0 ? ((totals.profit / totals.pure) * 100).toFixed(1) + '%' : '0%', color: 'text-slate-800', bg: 'bg-slate-50' }
                   ].map(s => (
                     <div key={s.label} className={`${s.bg} p-4 rounded-2xl border border-slate-100 shadow-sm text-center`}>
                       <span className="text-[11px] font-black text-slate-400 mb-1 uppercase tracking-wider">{s.label}</span>
                       <span className={`text-[18px] font-black ${s.color}`}>{s.label === '수익률' ? s.val : formatNumber(s.val)}</span>
                     </div>
                   ))}
                 </div>
              </div>
              <div className="overflow-x-auto text-center text-center">
                <table className="w-full text-[11px] border-collapse">
                  <thead className="bg-slate-900 text-white font-black h-12 uppercase tracking-widest border-b-2 border-slate-800">
                    <tr><th className="px-4 w-16 text-slate-500 border-r border-slate-800">No.</th><th className="px-4 w-28 border-r border-slate-800">최근작업일</th><th className="px-4 text-left border-r border-slate-800">거래처 / 현장</th><th className="px-4 text-right border-r border-slate-800">총 공사금액</th><th className="px-4 text-right border-r border-slate-800 text-orange-400">자재비</th><th className="px-4 text-right border-r border-slate-800">인건비</th><th className="px-4 text-right border-r border-slate-800 text-amber-500">경비</th><th className="px-4 text-right border-r border-slate-800 text-emerald-400">누적 이익금</th><th className="px-4 text-center">마진율</th></tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {groupedProjectData.map((r, i) => {
                      const margin = r.totalAmount > 0 ? ((r.profit / r.totalAmount) * 100).toFixed(0) : 0;
                      return (
                        <tr key={r.id} className="hover:bg-slate-50 h-16 transition-all text-center">
                          <td className="font-bold text-slate-400">{i + 1}</td>
                          <td className="text-slate-500 font-bold">{r.date.slice(5)}</td>
                          <td className="text-left font-black text-slate-800 px-4 leading-tight">{r.company} <span className="inline-block px-1.5 py-0.5 bg-indigo-50 text-indigo-600 rounded text-[9px] font-black ml-1">x{r.count}</span><br/><span className="text-[10px] text-slate-400 font-bold">{r.site}</span></td>
                          <td className="text-right font-black text-indigo-700 px-4">{formatNumber(r.totalAmount)}</td>
                          <td className="text-right font-black text-orange-700 px-4">{formatNumber(r.materialCost)}</td>
                          <td className="text-right font-black text-violet-700 px-4">{formatNumber(r.laborCost)}</td>
                          <td className="text-right font-black text-amber-700 px-4">{formatNumber(r.expense)}</td>
                          <td className={`text-right font-black px-4 ${r.profit >= 0 ? 'text-emerald-700' : 'text-rose-600'}`}>{formatNumber(r.profit)}</td>
                          <td className="px-4 text-center"><span className={`inline-flex px-2.5 py-1 rounded-full text-[10px] font-black ${parseInt(margin) >= 0 ? 'bg-emerald-50 text-emerald-700 border-emerald-200' : 'bg-rose-50 text-rose-700 border border-rose-200'} border-2`}>{margin}%</span></td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {activeTab === 'attendance' && (
            <div className="bg-white rounded-[32px] border border-slate-200 shadow-xl overflow-hidden animate-in fade-in duration-500">
              <div className="p-4 border-b border-slate-200 bg-slate-50/50 flex items-center justify-between">
                <div className="flex items-center gap-3 px-2 text-left">
                  <div className="w-10 h-10 bg-violet-600 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-violet-100"><Users size={20} /></div>
                  <div><h2 className="text-xl font-black text-slate-900">노무 출력 관리</h2><p className="text-xs font-bold text-slate-400">인원별 주민번호, 연락처, 정산 관리</p></div>
                </div>
                <div className="flex items-center gap-3 bg-white border-2 border-slate-200 rounded-2xl px-4 py-2 shadow-sm">
                  <CalendarDays size={16} className="text-violet-500" />
                  <input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} className="text-[12px] bg-transparent border-none p-0 focus:ring-0 font-black text-slate-700" />
                  <span className="text-slate-300">~</span>
                  <input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} className="text-[12px] bg-transparent border-none p-0 focus:ring-0 font-black text-slate-700" />
                </div>
              </div>
              <div className="overflow-x-auto text-center">
                <table className="w-full text-[11px] border-collapse">
                  <thead>
                    <tr className="bg-slate-900 text-white font-black h-12 uppercase tracking-widest border-b-2 border-slate-800">
                      <th className="px-4 w-12 text-slate-500 border-r border-slate-800">No.</th>
                      <th className="px-4 w-20 border-r border-slate-800">성명</th>
                      <th className="px-4 w-32 border-r border-slate-800">주민번호</th>
                      <th className="px-4 w-32 border-r border-slate-800 text-indigo-300">연락처</th>
                      <th className="px-4 w-16 border-r border-slate-800">일수</th>
                      <th className="px-4 w-28 border-r border-slate-800 text-emerald-400">단가</th>
                      <th className="px-4 w-24 border-r border-slate-800 text-rose-300 font-bold">공제(3.3%)</th>
                      <th className="bg-slate-800 text-emerald-400 font-black">지급액</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 font-bold">
                    {personStats.map((p, i) => {
                      const m = userMeta[p.name] || {};
                      const uCost = parseInt(m.unitCost || 0);
                      const base = p.days * uCost;
                      const autoDed = Math.floor(base * 0.033);
                      const ded = m.deduction !== undefined ? parseInt(m.deduction) : autoDed;
                      return (
                        <tr key={p.name} className="hover:bg-violet-50/30 h-14 transition-all">
                          <td className="font-bold text-slate-400">{i + 1}</td>
                          <td className="font-black px-2"><div className="bg-white ring-1 ring-slate-200 rounded-lg py-1 shadow-sm">{p.name}</div></td>
                          <td><input type="text" value={m.ssn || ''} onChange={e => handleUpdateMeta(p.name, 'ssn', e.target.value)} className="w-full text-center bg-transparent border-none outline-none font-bold text-slate-600" placeholder="입력" /></td>
                          <td><input type="text" value={m.phone || ''} onChange={e => handleUpdateMeta(p.name, 'phone', e.target.value)} className="w-full text-center bg-indigo-50/30 border-none outline-none font-black text-indigo-700 rounded py-1" placeholder="010-..." /></td>
                          <td className="font-black text-blue-600 bg-blue-50/20">{p.days}일</td>
                          <td><input type="text" value={formatNumber(uCost)} onChange={e => handleUpdateMeta(p.name, 'unitCost', e.target.value)} className="w-full text-right bg-white border border-slate-200 rounded px-2 font-black text-emerald-600 outline-none" /></td>
                          <td><input type="text" value={formatNumber(ded)} onChange={e => handleUpdateMeta(p.name, 'deduction', e.target.value)} className="w-full text-right bg-rose-50 border border-rose-100 rounded px-2 font-black text-rose-700 outline-none" /></td>
                          <td className="text-right px-4 font-black text-[14px] text-emerald-700 bg-emerald-50/30">{formatNumber(base - ded)}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {activeTab === 'finance' && (
            <div className="bg-white rounded-[32px] border border-slate-200 shadow-xl overflow-hidden animate-in fade-in duration-500">
              <div className="p-4 border-b border-slate-200 bg-slate-50/50 flex flex-row items-center justify-between px-6 h-20">
                 <div className="flex items-center gap-3 shrink-0 text-left">
                   <div className="w-10 h-10 bg-emerald-600 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-emerald-100"><Coins size={20} /></div>
                   <h2 className="text-xl font-black text-slate-900">입금 / 정산 현황 (현장별 합산)</h2>
                 </div>
                 <div className="flex items-center gap-3 bg-slate-50 p-2 rounded-[22px]">
                   {[
                     { label: '총공사금액', val: totals.total, color: 'text-indigo-700', border: 'border-indigo-200' },
                     { label: '총입금액', val: totals.received, color: 'text-emerald-700', border: 'border-emerald-200' },
                     { label: '총미수금', val: totals.balance, color: 'text-rose-700', border: 'border-rose-200' }
                   ].map(item => (
                     <div key={item.label} className={`flex flex-row items-center justify-between w-44 px-4 py-2 bg-white border-2 ${item.border} rounded-xl shadow-sm`}>
                       <span className="text-[11px] font-black text-slate-400 uppercase tracking-tighter">{item.label}</span>
                       <span className={`text-[15px] font-black ${item.color}`}>{formatNumber(item.val)}</span>
                     </div>
                   ))}
                 </div>
              </div>
              <div className="overflow-x-auto text-center">
                <table className="w-full text-[11px] border-collapse">
                  <thead>
                    <tr className="bg-slate-900 text-white font-black h-12 uppercase tracking-widest border-b-2 border-slate-800">
                      <th className="px-4 w-28 border-r border-slate-800">날짜</th>
                      <th className="px-4 w-44 border-r border-slate-800">거래처 / 현장</th>
                      <th className="px-4 w-32 border-r border-slate-800">합산 총금액</th>
                      <th className="px-4 w-28 border-r border-slate-800 text-violet-300 font-bold">합산 부가세</th>
                      <th className="px-4 w-32 text-rose-400 bg-slate-800 border-r border-slate-800">금액</th>
                      {[1,2,3,4,5].map(n => <th key={n} className="border-r border-slate-800 text-emerald-400 font-black">누적 입금 {n}</th>)}
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 font-bold">
                    {groupedProjectData.map((r, i) => {
                        const key = r.id; 
                        const defaultVat = Math.floor(r.totalAmount * 0.1);
                        const activeVat = vatOverrides[key] !== undefined ? parseInt(vatOverrides[key]) : defaultVat;
                        const totalSumWithActiveVat = r.totalAmount + activeVat;
                        const hist = receivedAmounts[key] || Array.from({ length: 5 }, () => ({ amt: 0, date: '' }));
                        const sumRec = hist.reduce((s, v) => s + (parseInt(v.amt) || 0), 0);
                        const bal = totalSumWithActiveVat - sumRec;
                        const balanceClass = bal > 0 ? "animate-urgent text-rose-700 font-black" : "text-emerald-700 font-black bg-emerald-50/40";
                        
                        return (
                          <tr key={r.id} className="hover:bg-slate-50 h-20 transition-all text-center">
                            <td className="text-slate-500 font-bold border-r border-slate-50">{r.date.slice(5)}</td>
                            <td className="p-3 text-left font-black text-slate-800 text-[13px] border-r border-slate-50 leading-tight">
                              {r.company} <span className="inline-block px-1.5 py-0.5 bg-indigo-50 text-indigo-600 rounded text-[9px] font-black ml-1">x{r.count}</span>
                              <br/><span className="text-[10px] text-slate-400 font-bold">{r.site}</span>
                            </td>
                            <td className="font-black text-indigo-700 bg-indigo-50/10 border-r border-slate-50">{formatNumber(r.totalAmount)}</td>
                            <td className="px-2 border-r border-slate-50">
                              <input 
                                type="text" 
                                value={formatNumber(activeVat)} 
                                onChange={(e) => handleUpdateVatOverride(key, e.target.value)}
                                className="w-full h-10 text-center bg-violet-50/30 border border-violet-100 rounded-lg font-bold text-violet-700 outline-none focus:ring-2 focus:ring-violet-200"
                              />
                            </td>
                            <td className={`border-r border-slate-100 ${balanceClass}`}>{formatNumber(bal)}</td>
                            {hist.map((entry, idx) => (
                              <td key={idx} className="p-2 border-l border-slate-50">
                                <div className="flex flex-col gap-1.5 px-1">
                                  <input type="text" value={formatNumber(entry.amt)} onChange={e => handleUpdateFinance(key, idx, 'amt', e.target.value)} className="w-full text-right bg-white border border-slate-200 rounded-lg px-2 py-1 font-black text-emerald-700 outline-none focus:ring-2 focus:ring-emerald-100 shadow-sm" />
                                  <input type="text" value={entry.date || ''} onChange={e => handleUpdateFinance(key, idx, 'date', e.target.value)} className="w-full text-center bg-slate-100 text-[10px] font-black text-slate-500 rounded-md py-0.5 shadow-inner" placeholder="MM.DD" />
                                </div>
                              </td>
                            ))}
                          </tr>
                        );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </main>

        {/* --- [규격 최적화] 현장 데이터 관리 모달 --- */}
        {isInputModalOpen && (
          <div className="fixed inset-0 bg-slate-900/90 backdrop-blur-md z-[110] flex items-center justify-center p-3 animate-in fade-in duration-300" onClick={() => setIsInputModalOpen(false)}>
            <div className="bg-[#EDF2F7] w-full max-w-[880px] max-h-[92vh] rounded-[36px] shadow-2xl p-5 border-4 border-white flex flex-col relative overflow-hidden" onClick={e => e.stopPropagation()}>
              <div className="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-indigo-500 via-violet-500 to-indigo-500 opacity-90"></div>
              
              <div className="flex justify-between items-center mb-4 pb-3 border-b border-slate-300/40 shrink-0">
                <div className="flex items-center gap-3 text-left">
                  <div className="w-10 h-10 bg-indigo-600 rounded-[18px] flex items-center justify-center text-white shadow-xl shadow-indigo-100">
                    <ClipboardList size={22} strokeWidth={2.5}/>
                  </div>
                  <div><h2 className="text-lg font-black text-slate-900 leading-tight">현장 데이터 관리</h2><p className="text-[10px] font-bold text-slate-400 flex items-center gap-1 mt-0.5 uppercase tracking-tighter"><Cloud size={12} className="text-indigo-500"/> Cloud Sync Enabled</p></div>
                </div>
                <button onClick={() => setIsInputModalOpen(false)} className="bg-white hover:bg-rose-50 text-slate-300 hover:text-rose-600 p-2 rounded-2xl shadow-sm transition-all border border-slate-200"><X size={20} strokeWidth={3}/></button>
              </div>
              
              <div className="flex-1 overflow-y-auto pr-2 custom-scrollbar text-left">
                <form onSubmit={handleSaveReport} className="space-y-4">
                  <section className="bg-white p-4 rounded-[28px] shadow-sm border border-white">
                    <div className="grid grid-cols-4 gap-3">
                      {[
                        { k: 'date', l: '공사 일자 (월-일)', ic: <CalendarDays size={14}/>, labelC: 'text-blue-600', bg: 'bg-blue-50', textC: 'text-blue-900', b: 'focus:border-blue-500', t: 'date' },
                        { k: 'company', l: '거래처명', ic: <Landmark size={14}/>, labelC: 'text-amber-600', bg: 'bg-amber-50/50', textC: 'text-amber-900', b: 'focus:border-amber-500', t: 'text', ph: '회사 입력' },
                        { k: 'site', l: '현장 위치', ic: <MapPin size={14}/>, labelC: 'text-emerald-600', bg: 'bg-emerald-50/50', textC: 'text-emerald-900', b: 'focus:border-emerald-500', t: 'text', ph: '현장 입력' },
                        { k: 'names', l: '투입 인원 명단', ic: <UserPlus size={14}/>, labelC: 'text-violet-600', bg: 'bg-violet-50/50', textC: 'text-violet-900', b: 'focus:border-violet-500', t: 'textarea', ph: '이름:이름' }
                      ].map(f => (
                        <div key={f.k} className="space-y-1.5">
                          <label className={`text-[10px] font-black ${f.labelC} ml-2 flex items-center gap-1.5`}>{f.ic} {f.l}</label>
                          <input type={f.t === 'textarea' ? 'text' : f.t} value={formData[f.k]} onChange={e => setFormData({...formData, [f.k]: e.target.value})} required className={`w-full h-11 px-3 ${f.bg} border-2 border-transparent rounded-[16px] font-black text-[13px] ${f.textC} outline-none transition-all shadow-inner ${f.b} focus:bg-white text-center focus:ring-0 leading-none`} placeholder={f.ph} />
                        </div>
                      ))}
                    </div>
                  </section>

                  <section className="bg-white p-4 rounded-[28px] shadow-sm border border-white">
                    <div className="grid grid-cols-5 gap-3">
                      {[
                        { k: 'totalAmount', l: '공급가액', c: 'text-blue-600', bg: 'bg-blue-50', bc: 'border-blue-100' },
                        { k: 'vat', l: '부가세', c: 'text-purple-600', bg: 'bg-purple-50', bc: 'border-purple-100' },
                        { k: 'laborCost', l: '인건비 합계', c: 'text-sky-600', bg: 'bg-sky-50', bc: 'border-sky-100' },
                        { k: 'materialCost', l: '자재비 합계', c: 'text-orange-600', bg: 'bg-orange-50', bc: 'border-orange-100' }
                      ].map(field => (
                        <div key={field.k} className="space-y-1.5">
                          <span className={`text-[10px] font-black ${field.c} ml-2 uppercase`}>{field.l}</span>
                          <input type="text" value={formatNumber(formData[field.k])} onChange={e => { const n = {...formData, [field.k]: parseNumber(e.target.value)}; setFormData({...n, ...calculateFinancials(n)}); }} className={`w-full h-11 px-3 text-center font-black text-[15px] ${field.c} ${field.bg} border-2 ${field.bc} rounded-[16px] shadow-inner focus:bg-white focus:border-indigo-400 outline-none transition-all focus:ring-0 leading-none`} />
                        </div>
                      ))}
                      <div className="space-y-1.5 relative">
                        <div className="flex justify-between items-center px-1">
                          <span className="text-[10px] font-black text-emerald-600 uppercase">경비 합계</span>
                          <button type="button" onClick={() => setShowExpDetail(!showExpDetail)} className={`text-[9px] font-black px-2 py-0.5 rounded-lg border ${showExpDetail ? 'bg-indigo-600 text-white border-transparent' : 'bg-white text-indigo-600 border-indigo-200'} transition-all`}>{showExpDetail ? '접기' : '상세'}</button>
                        </div>
                        <input type="text" value={formatNumber(formData.expense)} readOnly className="w-full h-11 px-3 text-center font-black text-[15px] text-emerald-700 bg-emerald-50 border-2 border-emerald-100 rounded-[16px] cursor-default focus:ring-0 leading-none" />
                      </div>
                    </div>

                    {showExpDetail && (
                      <div className="mt-4 pt-5 border-t border-slate-100 animate-in slide-in-from-top-2 duration-300 bg-slate-50/50 rounded-[22px] p-4 shadow-inner overflow-hidden">
                        <div className="text-[10px] font-black text-slate-400 mb-3 flex items-center gap-1.5 uppercase text-left"><ArrowDownCircle size={12} className="text-emerald-500"/> 상세 지출 항목 (중앙 정렬 3단 분리 12슬롯)</div>
                        <div className="grid grid-cols-3 gap-2.5">
                          {Array.from({ length: 12 }, (_, i) => renderExpDetailRow(i + 1))}
                        </div>
                      </div>
                    )}
                  </section>

                  <div className="flex gap-4 pt-1 shrink-0 pb-2">
                    <button type="button" onClick={() => setIsInputModalOpen(false)} className="flex-1 py-3.5 bg-white text-slate-400 rounded-[20px] font-black text-[15px] hover:bg-slate-100 border border-slate-200 transition-all shadow-md">작성 취소</button>
                    <button type="submit" disabled={isSyncing} className="flex-[2.5] py-3.5 bg-indigo-600 text-white rounded-[20px] font-black text-[16px] shadow-lg hover:bg-indigo-700 active:scale-[0.99] transition-all flex items-center justify-center gap-3 border-b-4 border-indigo-900"><Save size={20}/> {isSyncing ? "데이터 전송 중..." : "최종 데이터 저장 및 동기화"}</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        )}

        {/* [개선] 삭제 확인 커스텀 모달 (window.confirm 대체) */}
        {deleteConfirmId && (
          <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[150] flex items-center justify-center p-4">
            <div className="bg-white rounded-[32px] p-8 max-w-sm w-full shadow-2xl border-4 border-rose-50 animate-in zoom-in-95 duration-200">
              <div className="w-16 h-16 bg-rose-50 text-rose-600 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-inner">
                <AlertTriangle size={32} />
              </div>
              <h3 className="text-xl font-black text-slate-900 text-center mb-2">데이터를 삭제할까요?</h3>
              <p className="text-slate-400 text-center text-sm font-bold mb-8">한 번 삭제된 현장 리포트는<br/>다시 복구할 수 없습니다.</p>
              <div className="flex gap-3">
                <button onClick={() => setDeleteConfirmId(null)} className="flex-1 py-3.5 bg-slate-100 text-slate-500 rounded-2xl font-black text-sm hover:bg-slate-200 transition-all">취소</button>
                <button onClick={confirmDeleteReport} className="flex-1 py-3.5 bg-rose-600 text-white rounded-2xl font-black text-sm hover:bg-rose-700 shadow-lg shadow-rose-100 transition-all">확인</button>
              </div>
            </div>
          </div>
        )}

        {/* AI 분석 결과 모달 */}
        {isAIModalOpen && (
          <div className="fixed inset-0 bg-slate-900/90 backdrop-blur-sm z-[200] flex items-center justify-center p-4 text-left">
            <div className="bg-white w-full max-w-2xl rounded-[36px] shadow-2xl border-4 border-indigo-100 overflow-hidden flex flex-col max-h-[85vh]">
              <div className="p-7 bg-gradient-to-br from-indigo-600 to-violet-700 text-white flex justify-between items-center shrink-0 shadow-lg">
                <div className="flex items-center gap-4"><Sparkles size={28}/><div><h2 className="text-xl font-black tracking-tight">Gemini AI 경영 분석</h2><p className="text-[11px] font-black uppercase tracking-widest opacity-70">Deep Analysis Report</p></div></div>
                <button onClick={() => setIsAIModalOpen(false)}><X size={24}/></button>
              </div>
              <div className="flex-1 overflow-y-auto p-10 prose prose-indigo max-w-none bg-indigo-50/10 whitespace-pre-wrap text-slate-800">
                {isAIAnalyzing ? <div className="flex flex-col items-center justify-center h-full gap-4 text-slate-400"><div className="w-10 h-10 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div><p className="font-black animate-pulse">분석 중...</p></div> : aiResult}
              </div>
              <div className="p-5 bg-white border-t border-slate-100 flex justify-end shrink-0"><button onClick={() => setIsAIModalOpen(false)} className="px-8 py-3 bg-slate-900 text-white rounded-2xl font-black text-sm hover:bg-black transition-all shadow-lg">확인 완료</button></div>
            </div>
          </div>
        )}

        {/* 토스트 */}
        {toast.open && (
          <div className="fixed bottom-10 left-1/2 -translate-x-1/2 z-[300] animate-in slide-in-from-bottom-5">
            <div className={`px-8 py-4 rounded-[20px] shadow-2xl flex items-center gap-3 text-white font-black text-[14px] border-2 border-white/20 ${toast.type === 'success' ? 'bg-indigo-600' : 'bg-rose-600'}`}>
              {toast.type === 'success' ? <Check size={20} strokeWidth={4}/> : <AlertCircle size={20}/>} {toast.message}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default App;