သd-600 hover:bg-red-100 rounded-lg"><Trash2 size={14}/></button>
                    </div>
                  )}
                </div>
                {(c.age || c.gender) && (
                  <div className="text-sm font-normal opacity-70 mt-1">
                    {[c.age && `${t('age')} ${c.age}`, c.gender && t(c.gender.toLowerCase())].filter(Boolean).join(' | ')}
                  </div>
                )}
                <div className="text-sm font-semibold opacity-70 mt-1">
                  {[c.phone1, c.phone2, c.phone3].filter(Boolean).join(' , ')}
                </div>
                {c.diagnosis && <div className="text-sm text-[#8b2b2b] opacity-80 mt-1"><span className="font-bold">{t('diagnosis')}:</span> {c.diagnosis}</div>}
                
                <div className="text-sm opacity-80 mt-2 border-t border-[#d9c3c3] pt-2">
                  Total Records: {c.records.length} | {t('balance')}: <span className={`font-bold ${c.balance > 0 ? 'text-red-600' : 'text-green-600'}`}>{c.balance}</span>
                </div>
              </div>
              <div className="flex flex-col items-end gap-2">
                {c.balance > 0 && (
                  <button onClick={(e) => { e.stopPropagation(); setPayCus(c); }} className={`px-4 py-2 ${theme.neoBtnPrimary} !text-xs`}>
                    {t('pay_balance')}
                  </button>
                )}
                {expandedCus === c.id ? <ChevronUp className="mt-2"/> : <ChevronDown className="mt-2"/>}
              </div>
            </div>

            {/* Expanded Records */}
            {expandedCus === c.id && (
              <div className="mt-4 pt-4 border-t border-[#d9c3c3] space-y-3">
                {c.records.map(r => (
                  <div key={r.id} className="bg-white/40 p-3 rounded-lg flex flex-col md:flex-row justify-between text-sm gap-4 border border-[#e8d5d5]">
                    <div className="flex-1">
                      <span className="font-bold">{r.date}</span>
                      <div className="opacity-80 mt-1">{r.cart.map(item => `${item.name}(${item.qty})`).join(', ')}</div>
                    </div>
                    <div className="text-right flex-shrink-0">
                      <div>Sale: {r.grandTotal} | Pay: {r.payAmount}</div>
                      <div className={`font-bold mt-1 ${r.isPaid ? 'text-green-600' : 'text-red-600'}`}>
                        {r.isPaid ? t('paid') : `${t('unpaid')} (${r.remainingBalance})`}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>

      {payCus && <ConfirmModal message={`Pay all remaining balance for ${payCus.name}?`} onConfirm={executePayBalance} onCancel={() => setPayCus(null)} theme={theme} t={t} lang={lang} />}
      {delCusId && <ConfirmModal message={t('confirm_del')} onConfirm={executeDeleteCustomer} onCancel={() => setDelCusId(null)} theme={theme} t={t} lang={lang} />}
    </div>
  );
}

// 5. EXPENSE SECTION (Unchanged)
function ExpenseSection({ user, t, theme, expenses, lang }) {
  const [form, setForm] = useState({ name: '', amount: '', deduct_profit: true });
  const [editId, setEditId] = useState(null);
  const [delId, setDelId] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const payload = { ...form, amount: Number(form.amount), createdAt: new Date().toISOString() };
    if (editId) {
      await updateDoc(doc(db, getDbPath(user.uid, 'expenses'), editId), payload);
      setEditId(null);
    } else {
      await addDoc(collection(db, getDbPath(user.uid, 'expenses')), payload);
    }
    setForm({ name: '', amount: '', deduct_profit: true });
  };

  const executeDelete = async () => {
    if(!delId) return;
    await deleteDoc(doc(db, getDbPath(user.uid, 'expenses'), delId));
    setDelId(null);
  };

  return (
    <div className="space-y-6">
      <h2 className="text-2xl font-black mb-6 flex items-center gap-2"><Receipt /> {t('expense')}</h2>
      <form onSubmit={handleSubmit} className={`p-6 ${theme.neoOuter} flex flex-col md:flex-row gap-4 items-center`}>
        <input className={`flex-1 p-3 w-full ${theme.neoInner}`} placeholder={t('exp_name')} required value={form.name} onChange={e => setForm({...form, name: e.target.value})} />
        <input className={`flex-1 p-3 w-full ${theme.neoInner}`} type="number" placeholder={t('amount')} required value={form.amount} onChange={e => setForm({...form, amount: e.target.value})} />
        <label className="flex items-center gap-2 font-bold cursor-pointer">
          <input type="checkbox" className="w-5 h-5 accent-red-500" checked={form.deduct_profit} onChange={e => setForm({...form, deduct_profit: e.target.checked})} />
          {t('deduct_profit')}
        </label>
        <div className="flex gap-2 w-full md:w-auto">
          <button type="submit" className={`flex-1 px-6 py-3 ${theme.neoBtnPrimary}`}>{editId ? t('edit') : t('add')}</button>
          {editId && <button type="button" onClick={() => {setEditId(null); setForm({name:'',amount:'',deduct_profit:true})}} className={`flex-1 px-4 py-3 ${theme.neoBtn}`}>{t('cancel')}</button>}
        </div>
      </form>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {expenses.map(e => (
          <div key={e.id} className={`p-4 ${theme.neoOuter} flex justify-between items-center`}>
            <div>
              <h3 className="font-bold text-lg">{e.name}</h3>
              <p className="font-black text-red-600">{e.amount}</p>
              <p className="text-xs opacity-70">{e.deduct_profit ? 'Deducted from profit' : 'Not deducted'}</p>
            </div>
            <div className="flex flex-col gap-2">
              <button onClick={() => {setForm(e); setEditId(e.id);}} className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg"><Edit size={16}/></button>
              <button onClick={() => setDelId(e.id)} className="p-2 text-red-600 hover:bg-red-100 rounded-lg"><Trash2 size={16}/></button>
            </div>
          </div>
        ))}
      </div>
      {delId && <ConfirmModal message={t('confirm_del')} onConfirm={executeDelete} onCancel={() => setDelId(null)} theme={theme} t={t} lang={lang} />}
    </div>
  );
}

// 6. REPORT SECTION (Unchanged)
function ReportSection({ t, theme, purchases, sales, expenses }) {
  const [tf, setTf] = useState('daily');
  
  const stats = useMemo(() => {
    const now = new Date();
    const today = now.toISOString().split('T')[0];
    const thisYearMonth = today.slice(0, 7);
    const thisYear = today.slice(0, 4);
    
    const getWeek = (dateStr) => {
        const d = new Date(dateStr);
        d.setHours(0, 0, 0, 0);
        d.setDate(d.getDate() + 3 - (d.getDay() + 6) % 7);
        const week1 = new Date(d.getFullYear(), 0, 4);
        return 1 + Math.round(((d.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
    };
    const currentWeek = getWeek(now);

    const isMatch = (dateStr) => {
      if(tf === 'all') return true;
      if(tf === 'daily') return dateStr === today;
      if(tf === 'monthly') return dateStr.startsWith(thisYearMonth);
      if(tf === 'yearly') return dateStr.startsWith(thisYear);
      if(tf === 'weekly') return getWeek(dateStr) === currentWeek && dateStr.startsWith(thisYear);
      return true;
    };

    let totalSale = 0;
    let totalCostOfSold = 0;
    let totalServiceFee = 0;
    let prodQtyMap = {};

    sales.forEach(s => {
      if(isMatch(s.date)) {
        totalSale += s.totalSale;
        totalServiceFee += s.serviceFee;
        s.cart.forEach(item => {
          totalCostOfSold += (item.cost * item.qty);
          if(!prodQtyMap[item.name]) prodQtyMap[item.name] = 0;
          prodQtyMap[item.name] += item.qty;
        });
      }
    });

    let totalExpenseDeducted = 0;
    expenses.forEach(e => {
      const eDate = new Date(e.createdAt).toISOString().split('T')[0];
      if(isMatch(eDate) && e.deduct_profit) {
        totalExpenseDeducted += e.amount;
      }
    });

    const netProfit = (totalSale - totalCostOfSold) + totalServiceFee - totalExpenseDeducted;
    const invAsset = purchases.reduce((sum, p) => sum + (p.qty * p.cost), 0);
    const topProducts = Object.entries(prodQtyMap).sort((a,b) => b[1] - a[1]).slice(0, 10);

    return { totalSale, netProfit, invAsset, topProducts };
  }, [sales, expenses, purchases, tf]);

  const grandStats = useMemo(() => {
    let tSale = 0;
    let tCost = 0;
    let tSF = 0;
    sales.forEach(s => {
      tSale += s.totalSale;
      tSF += s.serviceFee;
      s.cart.forEach(item => tCost += (item.cost * item.qty));
    });
    let tExp = expenses.filter(e => e.deduct_profit).reduce((sum, e) => sum + e.amount, 0);
    return { sale: tSale, profit: (tSale - tCost) + tSF - tExp };
  }, [sales, expenses]);

  return (
    <div className="space-y-6">
      <h2 className="text-2xl font-black mb-6 flex items-center gap-2"><PieChart /> {t('report')}</h2>
      
      <div className={`p-2 flex flex-wrap gap-2 ${theme.neoOuter}`}>
        {['daily', 'weekly', 'monthly', 'yearly', 'all_time'].map(k => {
          const val = k === 'all_time' ? 'all' : k;
          return (
            <button key={k} onClick={() => setTf(val)} className={`flex-1 py-2 text-sm md:text-base ${tf === val ? theme.neoBtnPrimary : theme.neoBtn}`}>
              {t(k)}
            </button>
          )
        })}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div className={`p-6 ${theme.neoOuter} flex flex-col justify-center items-center text-center`}>
          <div className={`text-sm font-bold ${theme.textMuted}`}>{t('total_sales')} ({t(tf === 'all' ? 'all_time' : tf)})</div>
          <div className="text-4xl font-black mt-2">{stats.totalSale}</div>
        </div>
        <div className={`p-6 ${theme.neoOuter} flex flex-col justify-center items-center text-center`}>
          <div className={`text-sm font-bold ${theme.textMuted}`}>{t('net_profit')}</div>
          <div className="text-4xl font-black mt-2 text-green-600">{stats.netProfit}</div>
        </div>
        <div className={`p-6 ${theme.neoOuter} flex flex-col justify-center items-center text-center`}>
          <div className={`text-sm font-bold ${theme.textMuted}`}>{t('inventory_asset')} (Latest)</div>
          <div className="text-4xl font-black mt-2 text-blue-600">{stats.invAsset}</div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className={`p-6 ${theme.neoOuter}`}>
          <h3 className="font-bold text-lg mb-4 border-b pb-2 border-[#d9c3c3]">{t('best_selling')} (Top 10)</h3>
          <div className="space-y-3">
            {stats.topProducts.map(([name, qty], idx) => (
              <div key={name} className="flex justify-between items-center bg-white/40 p-3 rounded-lg">
                <span className="font-bold">{idx + 1}. {name}</span>
                <span className={`px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm font-bold`}>{qty} Sold</span>
              </div>
            ))}
            {stats.topProducts.length === 0 && <div className="text-center opacity-50">{t('no_data')}</div>}
          </div>
        </div>

        <div className={`p-6 ${theme.neoOuter} bg-gradient-to-br from-[#ffe5e5] to-[#fcd5d5]`}>
          <h3 className="font-black text-xl mb-4 border-b pb-2 border-[#d9c3c3] text-red-800">{t('grand_report')}</h3>
          <div className="space-y-6 mt-6">
            <div>
              <div className="text-sm font-bold opacity-70 uppercase tracking-wide">{t('total_sales')}</div>
              <div className="text-4xl font-black">{grandStats.sale}</div>
            </div>
            <div>
              <div className="text-sm font-bold opacity-70 uppercase tracking-wide">{t('total_profit')}</div>
              <div className="text-5xl font-black text-green-600">{grandStats.profit}</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  );
}