import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Calculator, Package, AlertTriangle, CheckCircle, Lock, RefreshCw, Layers, LayoutGrid, Settings2, Link, Save, Plus, Trash2, Edit3, X, RotateCcw, Cloud } from 'lucide-react';

// Firebase Imports
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
import { getFirestore, doc, setDoc, onSnapshot } from 'firebase/firestore';

// --- 初始預設資料 (Factory Defaults) ---
const INITIAL_MODELS = [
  { id: 'k3', length: 269, name: 'K3' },
  { id: 'k4', length: 272, name: 'K4' },
  { id: 'k5', length: 249, name: 'K5' },
  { id: 'k6', length: 255, name: 'K6' },
  { id: 'k9', length: 264, name: 'K9' },
];

const INITIAL_RULES = {
  FL: { name: '前輪左側 (FL)', parts: [{ length: 264, qty: 4 }, { length: 269, qty: 4 }] },
  FR: { name: '前輪右側 (FR)', parts: [{ length: 269, qty: 4 }, { length: 272, qty: 4 }] },
  RL: { name: '後輪左側 (RL)', parts: [{ length: 264, qty: 4 }, { length: 269, qty: 4 }] },
  RR: { name: '後輪右側 (RR)', parts: [{ length: 255, qty: 8 }, { length: 249, qty: 8 }] },
};

const INITIAL_INVENTORY = {
  249: 100, 255: 100, 264: 100, 269: 100, 272: 100,
};

// --- Firebase Initialization (Safe Check) ---
let auth, db, appId;
try {
  const firebaseConfig = JSON.parse(__firebase_config);
  const app = initializeApp(firebaseConfig);
  auth = getAuth(app);
  db = getFirestore(app);
  appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
} catch (e) {
  console.error("Firebase init failed:", e);
}

// --- Helper Components ---

const ConfirmModal = ({ isOpen, title, content, onConfirm, onCancel, confirmText = "確認", confirmColor = "red" }) => {
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 z-[100] bg-black/50 flex items-center justify-center p-4 backdrop-blur-sm animate-in fade-in duration-200">
      <div className="bg-white rounded-xl shadow-2xl max-w-sm w-full p-6">
        <h3 className="text-lg font-bold text-slate-900 text-center mb-2">{title}</h3>
        <p className="text-sm text-slate-500 text-center mb-6 leading-relaxed">{content}</p>
        <div className="flex gap-3">
          <button onClick={onCancel} className="flex-1 py-3 bg-slate-100 text-slate-700 font-bold rounded-lg active:scale-95">取消</button>
          <button onClick={onConfirm} className={`flex-1 py-3 text-white font-bold rounded-lg shadow-md active:scale-95 ${confirmColor === 'red' ? 'bg-red-600' : 'bg-blue-600'}`}>{confirmText}</button>
        </div>
      </div>
    </div>
  );
};

const PromptModal = ({ isOpen, title, onConfirm, onCancel, defaultValue = '', isText = false, placeholder = '', confirmText = "確認", confirmColor = "blue" }) => {
  const [value, setValue] = useState(defaultValue);
  
  // Reset value when opening
  useEffect(() => {
    if(isOpen) setValue(defaultValue);
  }, [isOpen, defaultValue]);

  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 z-[100] bg-black/50 flex items-center justify-center p-4 backdrop-blur-sm">
      <div className="bg-white rounded-xl shadow-2xl max-w-sm w-full p-6">
        <h3 className="text-lg font-bold text-slate-900 mb-4">{title}</h3>
        <input 
          autoFocus
          type={isText ? "text" : "number"}
          pattern={isText ? undefined : "[0-9]*"}
          inputMode={isText ? "text" : "numeric"}
          className="w-full p-3 border border-slate-300 rounded-lg text-xl font-bold mb-6 focus:ring-2 focus:ring-blue-500 outline-none"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder={placeholder || (isText ? "輸入名稱..." : "例如: 280")}
        />
        <div className="flex gap-3">
          <button onClick={() => { setValue(''); onCancel(); }} className="flex-1 py-3 bg-slate-100 text-slate-700 font-bold rounded-lg">取消</button>
          <button onClick={() => { onConfirm(value); setValue(''); }} className={`flex-1 py-3 text-white font-bold rounded-lg shadow-md ${confirmColor === 'red' ? 'bg-red-600' : 'bg-blue-600'}`}>{confirmText}</button>
        </div>
      </div>
    </div>
  );
};


export default function SpokeCalculator() {
  // --- 核心資料 State ---
  const [models, setModels] = useState(INITIAL_MODELS);
  const [rules, setRules] = useState(INITIAL_RULES);
  const [inventory, setInventory] = useState(INITIAL_INVENTORY);
  
  // Firebase User & Sync State
  const [user, setUser] = useState(null);
  const [syncStatus, setSyncStatus] = useState('idle'); // 'idle', 'saving', 'synced'
  
  // 使用 Ref 來追蹤「上一次從雲端讀到的資料」，避免本地重複寫入造成迴圈
  const lastServerData = useRef({ inventory: null, models: null, rules: null });

  // --- 介面狀態 ---
  const [isConfigOpen, setIsConfigOpen] = useState(false);
  
  // Modals State
  // type: 'reset' | 'deleteModel' | 'addModel'
  const [modalState, setModalState] = useState({ type: null, data: null }); 
  
  const [calcMode, setCalcMode] = useState('unified');
  const [unifiedSubMode, setUnifiedSubMode] = useState('auto');
  const [viewMode, setViewMode] = useState('position');
  
  const [targetSets, setTargetSets] = useState(0);
  const [customTargets, setCustomTargets] = useState({ FL: 0, FR: 0, RL: 0, RR: 0 });

  // --- Firebase Logic ---

  // 1. Auth
  useEffect(() => {
    if (!auth) return;
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (e) { console.error("Auth error", e); }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // 2. Data Sync (Read)
  useEffect(() => {
    if (!user || !db) return;

    // 使用固定的文件路徑 'main_v2'，所有使用者共享
    const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'spoke_calc_settings', 'main_v2');
    
    const unsubscribe = onSnapshot(docRef, (snap) => {
      if (snap.exists()) {
        const data = snap.data();
        
        // --- 收到雲端資料，更新本地 ---
        let hasChanges = false;
        if (data.inventory && JSON.stringify(data.inventory) !== JSON.stringify(lastServerData.current.inventory)) {
            setInventory(data.inventory);
            lastServerData.current.inventory = data.inventory;
            hasChanges = true;
        }
        if (data.models && JSON.stringify(data.models) !== JSON.stringify(lastServerData.current.models)) {
            setModels(data.models);
            lastServerData.current.models = data.models;
            hasChanges = true;
        }
        if (data.rules && JSON.stringify(data.rules) !== JSON.stringify(lastServerData.current.rules)) {
            setRules(data.rules);
            lastServerData.current.rules = data.rules;
            hasChanges = true;
        }
        if(hasChanges) setSyncStatus('synced');
      } else {
        // --- 初始化預設資料 ---
        saveToFirestore({ models: INITIAL_MODELS, rules: INITIAL_RULES, inventory: INITIAL_INVENTORY });
      }
    }, (error) => {
        console.error("Sync error:", error);
        setSyncStatus('error');
    });

    return () => unsubscribe();
  }, [user]);

  // 3. Save Helper
  const saveToFirestore = async (dataToSave) => {
    if (!user || !db) return;
    
    setSyncStatus('saving');
    try {
      // 寫入固定的文件路徑
      const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'spoke_calc_settings', 'main_v2');
      
      const finalData = { 
          models: dataToSave.models || models, 
          rules: dataToSave.rules || rules, 
          inventory: dataToSave.inventory || inventory 
      };

      await setDoc(docRef, finalData);
      
      // 更新 Ref
      if (dataToSave.inventory) lastServerData.current.inventory = finalData.inventory;
      if (dataToSave.models) lastServerData.current.models = finalData.models;
      if (dataToSave.rules) lastServerData.current.rules = finalData.rules;

      setSyncStatus('synced');
      setTimeout(() => setSyncStatus('idle'), 2000);
    } catch (e) {
      console.error("Save failed", e);
      setSyncStatus('error');
    }
  };

  // 4. Inventory Auto-Save (Debounced)
  useEffect(() => {
    if (!user) return;
    if (JSON.stringify(inventory) === JSON.stringify(lastServerData.current.inventory)) return;

    const timer = setTimeout(() => {
       saveToFirestore({ inventory });
    }, 1000); 

    return () => clearTimeout(timer);
  }, [inventory]); 

  // --- Data Logic ---
  
  const globalRecipe = useMemo(() => {
    const recipeMap = {};
    models.forEach(m => { recipeMap[m.length] = { ...m, totalReq: 0, details: [] }; });
    Object.keys(rules).forEach(pos => {
      rules[pos].parts.forEach(part => {
        if (!recipeMap[part.length]) {
          recipeMap[part.length] = { id: `temp-${part.length}`, length: part.length, name: '未知', totalReq: 0, details: [] };
        }
        recipeMap[part.length].totalReq += part.qty;
        recipeMap[part.length].details.push(`${pos}:${part.qty}`);
      });
    });
    return Object.values(recipeMap).sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }));
  }, [models, rules]);

  const totalRequirements = useMemo(() => {
    const reqs = {};
    globalRecipe.forEach(r => reqs[r.length] = 0);
    const targets = calcMode === 'unified' 
      ? { FL: targetSets, FR: targetSets, RL: targetSets, RR: targetSets }
      : customTargets;
    Object.keys(targets).forEach(pos => {
      const qty = targets[pos] || 0;
      rules[pos].parts.forEach(part => {
        reqs[part.length] = (reqs[part.length] || 0) + (part.qty * qty);
      });
    });
    return reqs;
  }, [calcMode, targetSets, customTargets, rules, globalRecipe]);

  const calculateMaxSets = () => {
    const limits = globalRecipe.map(item => {
      if (item.totalReq === 0) return Infinity;
      return Math.floor((inventory[item.length] || 0) / item.totalReq);
    });
    return limits.length > 0 ? Math.min(...limits) : 0;
  };

  const calculatePositionMax = (posKey) => {
    const parts = rules[posKey].parts;
    if (parts.length === 0) return Infinity;
    const limits = parts.map(p => Math.floor((inventory[p.length] || 0) / p.qty));
    return Math.min(...limits);
  };

  useEffect(() => {
    if (calcMode === 'unified' && unifiedSubMode === 'auto') {
      setTargetSets(calculateMaxSets());
    }
  }, [inventory, calcMode, unifiedSubMode, rules, models]);


  // --- Handlers ---

  const handleInventoryChange = (length, value) => {
    const newVal = value === '' ? 0 : parseInt(value);
    setInventory(prev => ({ ...prev, [length]: isNaN(newVal) ? 0 : newVal }));
  };

  const handleInputFocus = (e) => e.target.select();

  const saveConfigChanges = (newModels, newRules, newInventory) => {
    const m = newModels || models;
    const r = newRules || rules;
    const i = newInventory || inventory;
    setModels(m);
    setRules(r);
    setInventory(i);
    saveToFirestore({ models: m, rules: r, inventory: i });
  };

  const updateModelName = (id, newName) => {
    const newModels = models.map(m => m.id === id ? { ...m, name: newName } : m);
    setModels(newModels); 
  };

  const updateModelLength = (id, oldLen, newLenStr) => {
    const newLen = parseInt(newLenStr);
    if (!newLen || newLen === oldLen) return;
    if (models.some(m => m.length === newLen && m.id !== id)) {
      alert(`長度 ${newLen}mm 已經存在。`);
      return;
    }
    
    const newModels = models.map(m => m.id === id ? { ...m, length: newLen } : m);
    
    const newInv = { ...inventory };
    newInv[newLen] = newInv[oldLen] || 0;
    delete newInv[oldLen];

    const newRules = { ...rules };
    Object.keys(newRules).forEach(pos => {
      newRules[pos] = {
        ...newRules[pos],
        parts: newRules[pos].parts.map(p => p.length === oldLen ? { ...p, length: newLen } : p)
      };
    });

    saveConfigChanges(newModels, newRules, newInv);
  };

  // Modal Actions
  const openAddModel = () => setModalState({ type: 'addModel' });
  const handleAddModelConfirm = (val) => {
    const len = parseInt(val);
    if (!len) return;
    if (models.find(m => m.length === len)) {
      alert('已存在'); 
      return; 
    }
    const newModels = [...models, { id: `k-${len}-${Date.now()}`, length: len, name: `New` }]
      .sort((a,b) => a.name.localeCompare(b.name, undefined, { numeric: true }));
    const newInv = { ...inventory, [len]: 0 };
    saveConfigChanges(newModels, null, newInv);
    setModalState({ type: null });
  };

  const openDeleteModel = (id, len) => setModalState({ type: 'deleteModel', data: { id, len } });
  const handleDeleteModelConfirm = () => {
    const { id, len } = modalState.data;
    const newModels = models.filter(m => m.id !== id);
    const newInv = { ...inventory };
    delete newInv[len];
    saveConfigChanges(newModels, null, newInv);
    setModalState({ type: null });
  };

  const openReset = () => setModalState({ type: 'reset' });
  const handleResetConfirm = () => {
    saveConfigChanges(INITIAL_MODELS, INITIAL_RULES, INITIAL_INVENTORY);
    setModalState({ type: null });
  };

  const updateRulePart = (pos, index, field, value) => {
    const newRules = { ...rules };
    const newParts = [...newRules[pos].parts];
    newParts[index] = { ...newParts[index], [field]: parseInt(value) || 0 };
    newRules[pos].parts = newParts;
    setRules(newRules); 
  };

  const addPartToRule = (pos) => {
    const newRules = { ...rules };
    newRules[pos] = { ...newRules[pos], parts: [...newRules[pos].parts, { length: models[0]?.length || 250, qty: 1 }] };
    saveConfigChanges(null, newRules, null);
  };

  const removePartFromRule = (pos, index) => {
    const newRules = { ...rules };
    const newParts = newRules[pos].parts.filter((_, i) => i !== index);
    newRules[pos].parts = newParts;
    saveConfigChanges(null, newRules, null);
  };

  return (
    <div className="min-h-screen bg-slate-50 p-2 md:p-8 font-sans text-slate-800 pb-20 safe-area-padding">
      
      {/* Modals */}
      <ConfirmModal 
        isOpen={modalState.type === 'reset'}
        title="初始化確認"
        content="這將會清除所有雲端共享的設定與庫存，恢復為預設值。此動作會影響所有使用者。"
        confirmText="確認重置"
        onConfirm={handleResetConfirm}
        onCancel={() => setModalState({ type: null })}
      />
      
      <ConfirmModal 
        isOpen={modalState.type === 'deleteModel'}
        title="刪除規格"
        content={`確定要刪除 ${modalState.data?.len}mm 規格嗎？這也會移除對應的庫存資料。`}
        confirmText="確認刪除"
        onConfirm={handleDeleteModelConfirm}
        onCancel={() => setModalState({ type: null })}
      />

      <PromptModal 
        isOpen={modalState.type === 'addModel'}
        title="新增輻條長度 (mm)"
        onConfirm={handleAddModelConfirm}
        onCancel={() => setModalState({ type: null })}
      />

      <div className="max-w-6xl mx-auto space-y-4">
        
        {/* Header */}
        <header className="bg-white rounded-2xl shadow-sm p-4 flex flex-col md:flex-row items-center justify-between gap-4 border border-slate-200">
           <div className="w-full md:w-auto flex justify-between items-center">
             <div>
               <h1 className="text-xl font-bold flex items-center gap-2 text-slate-900">
                 <Calculator className="w-6 h-6 text-blue-600" />
                 輻條齊套計算器
               </h1>
               <div className="flex items-center gap-2 mt-1">
                 {syncStatus === 'saving' && <span className="text-xs text-blue-500 flex items-center gap-1"><RefreshCw className="w-3 h-3 animate-spin"/>存檔中...</span>}
                 {syncStatus === 'synced' && <span className="text-xs text-emerald-500 flex items-center gap-1"><Cloud className="w-3 h-3"/>已同步</span>}
               </div>
             </div>
             <button onClick={() => setIsConfigOpen(true)} className="md:hidden bg-slate-100 p-2 rounded-lg text-slate-600">
               <Settings2 className="w-5 h-5" />
             </button>
           </div>
           
           <div className="w-full md:w-auto flex gap-2 justify-end">
             {/* Mode & Target Input */}
             <div className="flex bg-slate-100 p-1 rounded-lg w-full md:w-auto">
               <button onClick={() => setCalcMode('unified')} className={`flex-1 px-3 py-2 rounded text-sm font-bold ${calcMode === 'unified' ? 'bg-white shadow text-blue-600' : 'text-slate-500'}`}>整車</button>
               <button onClick={() => setCalcMode('mix')} className={`flex-1 px-3 py-2 rounded text-sm font-bold ${calcMode === 'mix' ? 'bg-white shadow text-indigo-600' : 'text-slate-500'}`}>混搭</button>
             </div>
             
             {calcMode === 'unified' && (
               <div className={`flex items-center gap-2 px-3 rounded-lg border-2 ${unifiedSubMode === 'manual' ? 'bg-amber-50 border-amber-200' : 'bg-blue-50 border-blue-200'}`}>
                 <input 
                   type="number" pattern="[0-9]*" inputMode="numeric"
                   value={targetSets}
                   onChange={(e) => { setUnifiedSubMode('manual'); setTargetSets(parseInt(e.target.value) || 0); }}
                   onFocus={handleInputFocus}
                   className="w-12 text-center bg-transparent font-black text-xl outline-none"
                 />
                 <span className="text-xs font-bold text-slate-400">組</span>
                 {unifiedSubMode === 'manual' && <button onClick={() => { setUnifiedSubMode('auto'); setTargetSets(calculateMaxSets()); }}><RefreshCw className="w-4 h-4 text-amber-600" /></button>}
               </div>
             )}
              
             <button onClick={() => setIsConfigOpen(true)} className="hidden md:block bg-slate-800 text-white p-3 rounded-xl ml-2"><Settings2 className="w-5 h-5" /></button>
           </div>
        </header>

        <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          {/* Inventory List */}
          <section className="lg:col-span-1 bg-white p-4 rounded-xl shadow-sm border border-slate-200">
            <h2 className="font-bold text-lg mb-4 flex items-center gap-2 text-slate-700">
              <Package className="w-5 h-5" /> 庫存管理
            </h2>
            <div className="space-y-3">
              {globalRecipe.map((item) => {
                const used = totalRequirements[item.length] || 0;
                const currentInv = inventory[item.length] || 0;
                const remaining = currentInv - used;
                const isShortage = currentInv < used;

                return (
                  <div key={item.length}>
                    <div className="flex justify-between items-center mb-1">
                      <label className="text-sm font-bold text-slate-700">{item.name}-{item.length}mm</label>
                      {/* NEW: Display Remaining or Shortage */}
                      {used > 0 && (
                          <span className={`text-xs font-bold ${isShortage ? 'text-red-500' : 'text-emerald-600'}`}>
                              {isShortage ? `缺 ${Math.abs(remaining)}` : `餘 ${remaining}`}
                          </span>
                      )}
                    </div>
                    <div className="relative">
                      <input
                        type="number"
                        pattern="[0-9]*"
                        inputMode="numeric"
                        value={currentInv === 0 ? '' : currentInv} 
                        placeholder="0"
                        onChange={(e) => handleInventoryChange(item.length, e.target.value)}
                        onFocus={handleInputFocus}
                        className={`w-full p-2 text-right font-mono text-lg border rounded-lg outline-none focus:ring-2 focus:ring-blue-500 ${isShortage ? 'border-red-300 bg-red-50' : 'border-slate-300'}`}
                      />
                      {currentInv > 0 && (
                        <div className="absolute bottom-0 left-0 h-1 bg-slate-100 w-full rounded-b-lg overflow-hidden">
                          <div className={`h-full ${isShortage ? 'bg-red-500' : 'bg-blue-500'}`} style={{ width: `${Math.min(100, (used / currentInv) * 100)}%` }} />
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </section>

          {/* Main View */}
          <section className="lg:col-span-3 space-y-4">
            <div className="flex gap-2">
              <button onClick={() => setViewMode('position')} className={`px-4 py-2 rounded-lg text-sm font-bold ${viewMode === 'position' ? 'bg-slate-800 text-white' : 'bg-white text-slate-500'}`}>部位視圖</button>
              <button onClick={() => setViewMode('table')} className={`px-4 py-2 rounded-lg text-sm font-bold ${viewMode === 'table' ? 'bg-slate-800 text-white' : 'bg-white text-slate-500'}`}>總表模式</button>
            </div>

            {viewMode === 'position' && (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {Object.keys(rules).map(pos => {
                   const data = rules[pos];
                   const posMax = calculatePositionMax(pos);
                   const isConflict = data.parts.some(p => (inventory[p.length] || 0) < totalRequirements[p.length]);
                   
                   return (
                     <div key={pos} className={`bg-white rounded-xl border-2 overflow-hidden ${isConflict ? 'border-red-300' : 'border-slate-100'}`}>
                       <div className={`p-4 border-b flex justify-between items-center ${isConflict ? 'bg-red-50' : 'bg-slate-50'}`}>
                         <h3 className="font-bold flex items-center gap-2"><span className="w-6 h-6 rounded-full bg-white flex items-center justify-center text-xs border">{pos}</span>{data.name}</h3>
                         {calcMode === 'mix' ? (
                           <input 
                             type="number" pattern="[0-9]*" inputMode="numeric"
                             value={customTargets[pos]} 
                             onChange={(e) => setCustomTargets(prev => ({...prev, [pos]: parseInt(e.target.value)||0}))}
                             onFocus={handleInputFocus}
                             className="w-16 text-right font-black text-lg bg-transparent border-b border-slate-300 outline-none"
                           />
                         ) : <span className="font-black text-lg">{targetSets}</span>}
                       </div>
                       <div className="p-4 space-y-2">
                         {data.parts.map((part, idx) => {
                           const current = inventory[part.length] || 0;
                           const needed = totalRequirements[part.length];
                           const isShort = current < needed;
                           const mName = models.find(m => m.length === part.length)?.name;
                           
                           return (
                             <div key={idx} className="flex justify-between text-sm">
                               <span className={isShort ? 'text-red-700 font-bold' : 'text-slate-600'}>{mName}-{part.length}mm <span className="text-slate-400 text-xs">x{part.qty}</span></span>
                               <span className={isShort ? 'text-red-600 font-bold' : 'text-emerald-600'}>{isShort ? `缺 ${needed - current}` : '充足'}</span>
                             </div>
                           )
                         })}
                       </div>
                     </div>
                   )
                })}
              </div>
            )}
            
            {viewMode === 'table' && (
              <div className="bg-white rounded-xl shadow-sm border overflow-x-auto">
                <table className="w-full text-left whitespace-nowrap">
                  <thead className="bg-slate-50 text-slate-500 text-xs uppercase">
                    <tr><th className="p-4">型號</th><th className="p-4 text-center">需求</th><th className="p-4 text-right">庫存</th><th className="p-4 text-right">狀態</th></tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {globalRecipe.map(item => {
                       const req = totalRequirements[item.length];
                       const inv = inventory[item.length] || 0;
                       const bal = inv - req;
                       return (
                         <tr key={item.length}>
                           <td className="p-4 font-bold">{item.name}-{item.length}mm</td>
                           <td className="p-4 text-center">{req}</td>
                           <td className="p-4 text-right">{inv}</td>
                           <td className={`p-4 text-right font-bold ${bal < 0 ? 'text-red-600' : 'text-emerald-600'}`}>{bal >= 0 ? `餘 ${bal}` : `缺 ${Math.abs(bal)}`}</td>
                         </tr>
                       )
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </section>
        </div>
      </div>

      {/* Config Panel (Overlay) */}
      {isConfigOpen && (
        <div className="fixed inset-0 z-50 bg-slate-100 overflow-auto safe-area-padding">
           <div className="sticky top-0 bg-slate-800 text-white p-4 flex justify-between items-center shadow-md z-10">
             <h2 className="font-bold flex gap-2"><Settings2 className="w-5 h-5"/> 設定</h2>
             <button onClick={() => setIsConfigOpen(false)} className="p-2 bg-slate-700 rounded-full"><X className="w-5 h-5"/></button>
           </div>
           
           <div className="p-4 space-y-6 pb-24">
             {/* Models */}
             <div className="bg-white p-4 rounded-xl shadow-sm">
               <div className="flex justify-between mb-4">
                 <h3 className="font-bold text-slate-700">型號定義</h3>
                 <button onClick={openAddModel} className="text-sm text-blue-600 font-bold flex gap-1 items-center bg-blue-50 px-2 py-1 rounded"><Plus className="w-4 h-4"/>新增</button>
               </div>
               <div className="grid grid-cols-1 gap-3">
                 {models.map(m => (
                   <div key={m.id} className="flex gap-2 items-center bg-slate-50 p-2 rounded border">
                     <input type="number" className="w-20 p-1 border rounded text-right font-bold" value={m.length} onChange={(e) => updateModelLength(m.id, m.length, e.target.value)} onFocus={handleInputFocus} inputMode="numeric"/>
                     <span className="text-xs text-slate-400">mm</span>
                     <input type="text" className="flex-1 p-1 bg-transparent border-b font-bold" value={m.name} onChange={(e) => updateModelName(m.id, e.target.value)} placeholder="名稱"/>
                     <button onClick={() => openDeleteModel(m.id, m.length)} className="p-2 text-slate-400"><Trash2 className="w-4 h-4"/></button>
                   </div>
                 ))}
               </div>
             </div>
             
             {/* Rules */}
             <div className="bg-white p-4 rounded-xl shadow-sm">
                <h3 className="font-bold text-slate-700 mb-4">組裝規則</h3>
                <div className="space-y-4">
                  {Object.keys(rules).map(pos => (
                    <div key={pos} className="border p-3 rounded-lg">
                      <div className="flex justify-between mb-2 pb-2 border-b">
                        <span className="font-bold">{rules[pos].name}</span>
                        <button onClick={() => addPartToRule(pos)} className="text-xs text-indigo-600 font-bold">+ 零件</button>
                      </div>
                      {rules[pos].parts.map((p, i) => (
                        <div key={i} className="flex gap-2 items-center mb-2">
                           <select className="flex-1 p-2 border rounded bg-slate-50 text-sm font-bold" value={p.length} onChange={(e) => updateRulePart(pos, i, 'length', e.target.value)}>
                             {models.map(m => <option key={m.id} value={m.length}>{m.length}mm ({m.name})</option>)}
                           </select>
                           <input type="number" className="w-14 p-2 border rounded text-center font-bold" value={p.qty} onChange={(e) => updateRulePart(pos, i, 'qty', e.target.value)} onFocus={handleInputFocus} inputMode="numeric"/>
                           <button onClick={() => removePartFromRule(pos, i)} className="text-slate-400"><Trash2 className="w-4 h-4"/></button>
                        </div>
                      ))}
                    </div>
                  ))}
                </div>
             </div>

             <div className="flex gap-3 pt-4">
               <button onClick={openReset} className="flex-1 py-3 text-red-600 font-bold bg-white border border-red-200 rounded-lg">重置設定</button>
               <button onClick={() => { saveToFirestore({}); setIsConfigOpen(false); }} className="flex-[2] py-3 bg-blue-600 text-white font-bold rounded-lg shadow-lg">儲存並返回</button>
             </div>
           </div>
        </div>
      )}
    </div>
  );
}