import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, signInAnonymously, onAuthStateChanged, signOut 
} from 'firebase/auth';
import { 
  getFirestore, collection, doc, setDoc, addDoc, updateDoc, 
  deleteDoc, onSnapshot, query, where, getDoc 
} from 'firebase/firestore';
import { 
  ShoppingBag, ShoppingCart, Users, Receipt, PieChart, Settings, 
  Plus, Edit2, Trash2, Search, LogOut, Globe, CheckCircle, AlertTriangle 
} from 'lucide-react';

// --- Firebase Configuration ---
const firebaseConfig = {
  apiKey: "AIzaSyAPX6tpGF093l8EH7Q0N1ehzJ6uJGVRpmo",
  authDomain: "nunungai.firebaseapp.com",
  databaseURL: "https://nunungai-default-rtdb.asia-southeast1.firebasedatabase.app",
  projectId: "nunungai",
  storageBucket: "nunungai.firebasestorage.app",
  messagingSenderId: "952019927017",
  appId: "1:952019927017:web:67a9793d96beabbf6c1578",
  measurementId: "G-DC0JX638XJ"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'nay-n-nay-pos-001';

// --- Translations ---
const translations = {
  en: {
    appTitle: "Nay N Nay POS",
    purchase: "Purchase",
    sale: "Sale",
    customer: "Customer",
    expense: "Expense",
    report: "Report",
    system: "System",
    add: "Add",
    edit: "Edit",
    delete: "Delete",
    save: "Save",
    search: "Search...",
    product: "Product",
    cost: "Cost",
    price: "Sell Price",
    qty: "Qty",
    expiry: "Expiry",
    total: "Total",
    netTotal: "Net Total",
    service: "Service Fee",
    pay: "Paid Amount",
    status: "Status",
    unpaid: "Unpaid",
    paid: "Paid",
    bestSellers: "Top 10 Products",
    profit: "Net Profit",
    asset: "Inventory Asset",
    diagnosis: "Diagnosis"
  },
  mm: {
    appTitle: "နေနဲ့နေ POS",
    purchase: "အဝယ်",
    sale: "အရောင်း",
    customer: "ဖောက်သည်",
    expense: "အသုံးစရိတ်",
    report: "မှတ်တမ်း",
    system: "စနစ်",
    add: "အသစ်ထည့်",
    edit: "ပြင်ဆင်",
    delete: "ဖျက်မည်",
    save: "သိမ်းမည်",
    search: "ရှာဖွေရန်...",
    product: "ပစ္စည်းအမည်",
    cost: "ရင်းနှီးစျေး",
    price: "ရောင်းစျေး",
    qty: "အရေအတွက်",
    expiry: "သက်တမ်းကုန်ရက်",
    total: "စုစုပေါင်း",
    netTotal: "အားလုံးပေါင်း",
    service: "ဝန်ဆောင်ခ",
    pay: "ပေးချေငွေ",
    status: "အခြေအနေ",
    unpaid: "မပေးရသေး",
    paid: "ပေးပြီး",
    bestSellers: "အရောင်းရဆုံး ၁၀ မျိုး",
    profit: "အသားတင်အမြတ်",
    asset: "လက်ကျန်ပစ္စည်းတန်ဖိုး",
    diagnosis: "ရောဂါရာဇဝင်"
  }
};

export default function App() {
  const [user, setUser] = useState(null);
  const [lang, setLang] = useState('mm');
  const [activeTab, setActiveTab] = useState('sale');
  
  // Data States
  const [inventory, setInventory] = useState([]);
  const [sales, setSales] = useState([]);
  const [customers, setCustomers] = useState([]);
  const [expenses, setExpenses] = useState([]);

  const t = translations[lang];

  // --- Auth & Initialization ---
  useEffect(() => {
    const initAuth = async () => {
      try {
        await signInAnonymously(auth);
      } catch (err) {
        console.error("Auth failed", err);
      }
    };
    initAuth();
    const unsub = onAuthStateChanged(auth, (u) => setUser(u));
    return () => unsub();
  }, []);

  // --- Data Listeners ---
  useEffect(() => {
    if (!user) return;

    const collections = ['purchase', 'sales', 'customers', 'expenses'];
    const unsubs = collections.map(col => {
      return onSnapshot(
        collection(db, 'artifacts', appId, 'public', 'data', col),
        (snap) => {
          const docs = snap.docs.map(d => ({ id: d.id, ...d.data() }));
          if (col === 'purchase') setInventory(docs);
          if (col === 'sales') setSales(docs);
          if (col === 'customers') setCustomers(docs);
          if (col === 'expenses') setExpenses(docs);
        },
        (err) => console.error(`Error loading ${col}`, err)
      );
    });

    return () => unsubs.forEach(u => u());
  }, [user]);

  // --- Theme Helpers ---
  const glassEffect = "bg-white/20 backdrop-blur-md border border-white/30";
  const neuInner = "shadow-[inset_4px_4px_8px_#b8b9be,inset_-4px_-4px_8px_#ffffff]";
  const neuOuter = "shadow-[6px_6px_12px_#c5c5c5,-6px_-6px_12px_#ffffff]";
  const premiumBtn = "active:shadow-inner transition-all duration-200 rounded-2xl flex items-center justify-center font-bold";

  // --- Logic Helpers ---
  const getInventoryStatus = (item) => {
    const today = new Date();
    const expiry = new Date(item.expiryDate);
    const monthsToExpiry = (expiry - today) / (1000 * 60 * 60 * 24 * 30);
    const isLowStock = item.quantity < 10;
    const isNearExpiry = monthsToExpiry < 3;

    if (isLowStock && isNearExpiry) return "bg-gradient-to-r from-red-500 to-yellow-500";
    if (isLowStock) return "bg-red-500 text-white";
    if (isNearExpiry) return "bg-yellow-400 text-black";
    return "bg-white text-gray-800";
  };

  // --- Components ---
  const PurchaseSection = () => {
    const [search, setSearch] = useState('');
    const [form, setForm] = useState({ name: '', cost: 0, price: 0, quantity: 0, expiryDate: '' });
    const [editingId, setEditingId] = useState(null);

    const filtered = inventory
      .filter(i => i.name.toLowerCase().includes(search.toLowerCase()))
      .sort((a, b) => a.name.localeCompare(b.name));

    const handleSubmit = async () => {
      const data = { ...form, cost: Number(form.cost), price: Number(form.price), quantity: Number(form.quantity) };
      const colRef = collection(db, 'artifacts', appId, 'public', 'data', 'purchase');
      if (editingId) {
        await updateDoc(doc(colRef, editingId), data);
        setEditingId(null);
      } else {
        await addDoc(colRef, data);
      }
      setForm({ name: '', cost: 0, price: 0, quantity: 0, expiryDate: '' });
    };

    return (
      <div className="p-4 space-y-6 pb-24">
        <div className={`p-6 rounded-3xl ${neuOuter} bg-[#f8eaea]`}>
          <h2 className="text-xl font-black mb-4 flex items-center gap-2"><Plus size={24}/> {editingId ? t.edit : t.add}</h2>
          <div className="grid grid-cols-2 gap-4">
            <input className={`p-3 rounded-xl ${neuInner} bg-transparent outline-none col-span-2`} placeholder={t.product} value={form.name} onChange={e => setForm({...form, name: e.target.value})} />
            <input type="number" className={`p-3 rounded-xl ${neuInner} bg-transparent outline-none`} placeholder={t.cost} value={form.cost} onChange={e => setForm({...form, cost: e.target.value})} />
            <input type="number" className={`p-3 rounded-xl ${neuInner} bg-transparent outline-none`} placeholder={t.price} value={form.price} onChange={e => setForm({...form, price: e.target.value})} />
            <input type="number" className={`p-3 rounded-xl ${neuInner} bg-transparent outline-none`} placeholder={t.qty} value={form.quantity} onChange={e => setForm({...form, quantity: e.target.value})} />
            <input type="date" className={`p-3 rounded-xl ${neuInner} bg-transparent outline-none`} value={form.expiryDate} onChange={e => setForm({...form, expiryDate: e.target.value})} />
          </div>
          <button onClick={handleSubmit} className={`w-full mt-6 py-4 bg-red-500 text-white ${premiumBtn} ${neuOuter}`}>{t.save}</button>
        </div>

        <div className="flex items-center gap-2 p-3 bg-white/50 rounded-2xl shadow-inner">
          <Search size={20} className="text-gray-400" />
          <input className="bg-transparent outline-none w-full" placeholder={t.search} value={search} onChange={e => setSearch(e.target.value)} />
        </div>

        <div className="space-y-4">
          {filtered.map(item => (
            <div key={item.id} className={`p-4 rounded-3xl ${neuOuter} ${getInventoryStatus(item)} relative group overflow-hidden`}>
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-lg font-bold">{item.name}</h3>
                  <p className="text-sm opacity-80">{t.qty}: {item.quantity} | {t.expiry}: {item.expiryDate}</p>
                </div>
                <div className="text-right">
                  <p className="font-black text-lg">{item.price.toLocaleString()} Ks</p>
                  <p className="text-xs opacity-70">Cost: {item.cost}</p>
                </div>
              </div>
              <div className="flex gap-2 mt-4 justify-end">
                <button onClick={() => { setForm(item); setEditingId(item.id); }} className="p-2 bg-blue-500 text-white rounded-lg"><Edit2 size={16}/></button>
                <button onClick={() => deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'purchase', item.id))} className="p-2 bg-red-600 text-white rounded-lg"><Trash2 size={16}/></button>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  const SaleSection = () => {
    const [cart, setCart] = useState([]);
    const [selectedCustomer, setSelectedCustomer] = useState('');
    const [serviceFee, setServiceFee] = useState(0);
    const [payAmount, setPayAmount] = useState(0);
    const [search, setSearch] = useState('');

    const subTotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    const totalWithService = subTotal + Number(serviceFee);
    const balance = totalWithService - Number(payAmount);

    const addToCart = (product) => {
      const existing = cart.find(c => c.id === product.id);
      if (existing) {
        setCart(cart.map(c => c.id === product.id ? { ...c, quantity: c.quantity + 1 } : c));
      } else {
        setCart([...cart, { ...product, quantity: 1 }]);
      }
    };

    const processSale = async () => {
      if (cart.length === 0 || !selectedCustomer) return;

      const saleData = {
        customerId: selectedCustomer,
        customerName: customers.find(c => c.id === selectedCustomer)?.name || "Unknown",
        items: cart,
        subTotal,
        serviceFee: Number(serviceFee),
        total: totalWithService,
        paid: Number(payAmount),
        balance: balance,
        status: balance <= 0 ? 'paid' : 'unpaid',
        date: new Date().toISOString()
      };

      // 1. Add Sale Record
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'sales'), saleData);

      // 2. Update Inventory (Minus Stock)
      for (const item of cart) {
        const invItem = inventory.find(i => i.id === item.id);
        if (invItem) {
          await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'purchase', item.id), {
            quantity: invItem.quantity - item.quantity
          });
        }
      }

      // 3. Update Customer Balance
      const cust = customers.find(c => c.id === selectedCustomer);
      if (cust) {
        await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'customers', selectedCustomer), {
          totalDebt: (cust.totalDebt || 0) + balance
        });
      }

      setCart([]);
      setPayAmount(0);
      setServiceFee(0);
      alert("Sale Completed!");
    };

    return (
      <div className="p-4 space-y-6 pb-24 h-full flex flex-col">
        {/* Inventory Search for Cart */}
        <div className={`p-4 rounded-3xl ${neuOuter} bg-[#f8eaea]`}>
          <div className="flex items-center gap-2 p-3 bg-white/50 rounded-xl shadow-inner mb-4">
            <Search size={18} />
            <input className="bg-transparent outline-none w-full" placeholder={t.search} value={search} onChange={e => setSearch(e.target.value)} />
          </div>
          <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
            {inventory.filter(i => i.name.toLowerCase().includes(search.toLowerCase())).map(item => (
              <button 
                key={item.id} 
                onClick={() => addToCart(item)}
                className={`flex-shrink-0 p-3 rounded-2xl ${neuOuter} bg-white min-w-[100px] text-center`}
                disabled={item.quantity <= 0}
              >
                <div className="text-sm font-bold truncate">{item.name}</div>
                <div className="text-xs text-red-500">{item.quantity} Left</div>
              </button>
            ))}
          </div>
        </div>

        {/* Cart Details */}
        <div className={`flex-1 p-6 rounded-3xl ${neuInner} bg-white/40 overflow-y-auto min-h-[300px]`}>
          <h2 className="text-lg font-black mb-4 flex items-center gap-2"><ShoppingCart size={20}/> Cart</h2>
          {cart.map(item => (
            <div key={item.id} className="flex justify-between items-center mb-3 border-b border-gray-100 pb-2">
              <div>
                <p className="font-bold">{item.name}</p>
                <p className="text-xs text-gray-500">{item.quantity} x {item.price}</p>
              </div>
              <div className="flex items-center gap-2">
                <button onClick={() => setCart(cart.filter(c => c.id !== item.id))} className="text-red-500"><Trash2 size={16}/></button>
                <p className="font-bold">{(item.quantity * item.price).toLocaleString()}</p>
              </div>
            </div>
          ))}

          <div className="mt-6 space-y-2 border-t pt-4">
            <div className="flex justify-between font-bold"><p>{t.total}:</p> <p>{subTotal.toLocaleString()}</p></div>
            <div className="flex justify-between items-center">
              <p>{t.service}:</p>
              <input type="number" className="w-24 text-right border-b outline-none bg-transparent" value={serviceFee} onChange={e => setServiceFee(e.target.value)} />
            </div>
            <div className="flex justify-between text-xl font-black text-red-600"><p>{t.netTotal}:</p> <p>{totalWithService.toLocaleString()}</p></div>
          </div>
        </div>

        {/* Customer & Payment */}
        <div className={`p-6 rounded-3xl ${neuOuter} bg-[#f8eaea]`}>
          <select className={`w-full p-3 rounded-xl mb-4 ${neuInner} bg-transparent outline-none`} value={selectedCustomer} onChange={e => setSelectedCustomer(e.target.value)}>
            <option value="">-- Select Customer --</option>
            {customers.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
          <div className="flex gap-4">
            <div className="flex-1">
              <label className="text-xs ml-2">{t.pay}</label>
              <input type="number" className={`w-full p-3 rounded-xl ${neuInner} bg-transparent outline-none`} value={payAmount} onChange={e => setPayAmount(e.target.value)} />
            </div>
            <div className="flex-1">
              <label className="text-xs ml-2">Balance</label>
              <div className={`w-full p-3 rounded-xl ${neuInner} font-bold text-red-600`}>{balance.toLocaleString()}</div>
            </div>
          </div>
          <button onClick={processSale} className={`w-full mt-6 py-4 bg-green-600 text-white ${premiumBtn} ${neuOuter}`}>Confirm Sale</button>
        </div>
      </div>
    );
  };

  const CustomerSection = () => {
    const [search, setSearch] = useState('');
    const [sort, setSort] = useState('name');
    const [form, setForm] = useState({ name: '', age: '', gender: 'Male', phone1: '', phone2: '', phone3: '', diagnosis: '', totalDebt: 0 });
    const [showModal, setShowModal] = useState(false);

    const filtered = customers
      .filter(c => c.name.toLowerCase().includes(search.toLowerCase()))
      .sort((a, b) => {
        if (sort === 'debt') return (b.totalDebt || 0) - (a.totalDebt || 0);
        return a.name.localeCompare(b.name);
      });

    const handleAdd = async () => {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'customers'), form);
      setShowModal(false);
      setForm({ name: '', age: '', gender: 'Male', phone1: '', phone2: '', phone3: '', diagnosis: '', totalDebt: 0 });
    };

    const clearDebt = async (cId) => {
      await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'customers', cId), { totalDebt: 0 });
      // Update linked sales as paid in a real app logic
    };

    return (
      <div className="p-4 space-y-6 pb-24">
        <div className="flex gap-2">
          <div className="flex-1 flex items-center gap-2 p-3 bg-white/50 rounded-2xl shadow-inner">
            <Search size={18} />
            <input className="bg-transparent outline-none w-full" placeholder={t.search} value={search} onChange={e => setSearch(e.target.value)} />
          </div>
          <select className={`p-2 rounded-2xl ${neuOuter} bg-[#f8eaea] outline-none`} value={sort} onChange={e => setSort(e.target.value)}>
            <option value="name">A-Z</option>
            <option value="debt">Top Debt</option>
          </select>
        </div>

        <button onClick={() => setShowModal(true)} className={`w-full py-4 bg-white ${premiumBtn} ${neuOuter} text-red-500`}>+ Add New Customer</button>

        <div className="space-y-4">
          {filtered.map(cust => (
            <div key={cust.id} className={`p-5 rounded-3xl ${neuOuter} bg-white`}>
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-xl font-bold">{cust.name}</h3>
                  <p className="text-sm text-gray-500">{cust.gender}, {cust.age} yrs</p>
                  <p className="text-xs mt-2 text-gray-400">📞 {cust.phone1} | {cust.phone2}</p>
                </div>
                <div className="text-right">
                  <p className={`text-lg font-black ${cust.totalDebt > 0 ? 'text-red-500' : 'text-green-500'}`}>
                    {cust.totalDebt?.toLocaleString()} Ks
                  </p>
                  {cust.totalDebt > 0 && (
                    <button onClick={() => clearDebt(cust.id)} className="mt-2 text-xs bg-green-500 text-white px-3 py-1 rounded-full">Mark Paid</button>
                  )}
                </div>
              </div>
              <div className="mt-4 p-3 bg-gray-50 rounded-xl text-sm italic text-gray-600">
                <span className="font-bold">Diagnosis:</span> {cust.diagnosis || 'None'}
              </div>
            </div>
          ))}
        </div>

        {showModal && (
          <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-6 backdrop-blur-sm">
            <div className={`bg-[#f8eaea] p-6 rounded-[40px] w-full max-w-md ${neuOuter}`}>
              <h2 className="text-2xl font-black mb-6">New Customer</h2>
              <div className="space-y-3 max-h-[60vh] overflow-y-auto px-2">
                <input className={`w-full p-4 rounded-2xl ${neuInner} bg-transparent outline-none`} placeholder="Name" onChange={e => setForm({...form, name: e.target.value})} />
                <div className="flex gap-2">
                  <input className={`w-1/2 p-4 rounded-2xl ${neuInner} bg-transparent outline-none`} placeholder="Age" onChange={e => setForm({...form, age: e.target.value})} />
                  <select className={`w-1/2 p-4 rounded-2xl ${neuInner} bg-transparent outline-none`} onChange={e => setForm({...form, gender: e.target.value})}>
                    <option>Male</option><option>Female</option>
                  </select>
                </div>
                <input className={`w-full p-4 rounded-2xl ${neuInner} bg-transparent outline-none`} placeholder="Phone 1" onChange={e => setForm({...form, phone1: e.target.value})} />
                <input className={`w-full p-4 rounded-2xl ${neuInner} bg-transparent outline-none`} placeholder="Phone 2" onChange={e => setForm({...form, phone2: e.target.value})} />
                <textarea className={`w-full p-4 rounded-2xl ${neuInner} bg-transparent outline-none`} placeholder="Diagnosis" onChange={e => setForm({...form, diagnosis: e.target.value})} />
              </div>
              <div className="flex gap-4 mt-8">
                <button onClick={() => setShowModal(false)} className="flex-1 py-4 font-bold text-gray-500">Cancel</button>
                <button onClick={handleAdd} className={`flex-1 py-4 bg-red-500 text-white rounded-2xl ${neuOuter}`}>Save</button>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  };

  const ExpenseSection = () => {
    const [form, setForm] = useState({ title: '', amount: 0, deductProfit: true });
    
    const handleSubmit = async () => {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'expenses'), { 
        ...form, 
        amount: Number(form.amount),
        date: new Date().toISOString()
      });
      setForm({ title: '', amount: 0, deductProfit: true });
    };

    return (
      <div className="p-4 space-y-6 pb-24">
        <div className={`p-6 rounded-3xl ${neuOuter} bg-[#f8eaea]`}>
          <h2 className="text-xl font-black mb-4">Add Expense</h2>
          <div className="space-y-4">
            <input className={`w-full p-3 rounded-xl ${neuInner} bg-transparent outline-none`} placeholder="Description" value={form.title} onChange={e => setForm({...form, title: e.target.value})} />
            <input type="number" className={`w-full p-3 rounded-xl ${neuInner} bg-transparent outline-none`} placeholder="Amount" value={form.amount} onChange={e => setForm({...form, amount: e.target.value})} />
            <label className="flex items-center gap-2 text-sm font-bold p-2">
              <input type="checkbox" checked={form.deductProfit} onChange={e => setForm({...form, deductProfit: e.target.checked})} />
              Deduct from Net Profit?
            </label>
          </div>
          <button onClick={handleSubmit} className={`w-full mt-6 py-4 bg-red-500 text-white ${premiumBtn} ${neuOuter}`}>{t.save}</button>
        </div>

        <div className="space-y-4">
          {expenses.map(exp => (
            <div key={exp.id} className={`p-4 rounded-3xl ${neuOuter} bg-white flex justify-between items-center`}>
              <div>
                <p className="font-bold">{exp.title}</p>
                <p className="text-xs text-gray-400">{new Date(exp.date).toLocaleDateString()}</p>
              </div>
              <div className="text-right">
                <p className="font-black text-red-500">-{exp.amount.toLocaleString()} Ks</p>
                <button onClick={() => deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'expenses', exp.id))} className="text-xs text-gray-300 mt-2">Delete</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  const ReportSection = () => {
    // --- Complex Calculations ---
    const reports = useMemo(() => {
      let totalSales = 0;
      let totalProfit = 0;
      let serviceIncome = 0;
      const productStats = {};

      sales.forEach(sale => {
        totalSales += sale.total;
        serviceIncome += sale.serviceFee;
        
        sale.items.forEach(item => {
          // Calculate profit: sell price - original cost
          const invItem = inventory.find(i => i.id === item.id);
          const itemCost = invItem ? invItem.cost : item.price * 0.7; // fallback
          totalProfit += (item.price - itemCost) * item.quantity;
          
          // Best selling stats
          productStats[item.name] = (productStats[item.name] || 0) + item.quantity;
        });
      });

      const totalExpenses = expenses.filter(e => e.deductProfit).reduce((sum, e) => sum + e.amount, 0);
      const inventoryAsset = inventory.reduce((sum, i) => sum + (i.cost * i.quantity), 0);
      
      const bestSelling = Object.entries(productStats)
        .sort(([,a], [,b]) => b - a)
        .slice(0, 10);

      return { totalSales, totalProfit: totalProfit + serviceIncome - totalExpenses, serviceIncome, inventoryAsset, bestSelling };
    }, [sales, inventory, expenses]);

    return (
      <div className="p-4 space-y-6 pb-24 overflow-y-auto">
        {/* Grand Totals */}
        <div className="grid grid-cols-2 gap-4">
          <div className={`p-5 rounded-3xl ${neuOuter} bg-white text-center`}>
            <p className="text-xs uppercase text-gray-400 font-bold mb-1">Total Sales</p>
            <p className="text-lg font-black text-blue-600">{reports.totalSales.toLocaleString()} Ks</p>
          </div>
          <div className={`p-5 rounded-3xl ${neuOuter} bg-white text-center`}>
            <p className="text-xs uppercase text-gray-400 font-bold mb-1">{t.profit}</p>
            <p className="text-lg font-black text-green-600">{reports.totalProfit.toLocaleString()} Ks</p>
          </div>
        </div>

        {/* Inventory Asset */}
        <div className={`p-6 rounded-3xl ${neuOuter} bg-gradient-to-br from-red-500 to-red-600 text-white`}>
          <div className="flex justify-between items-center">
            <p className="text-sm font-bold opacity-80">{t.asset}</p>
            <Receipt size={24} className="opacity-50" />
          </div>
          <p className="text-3xl font-black mt-2">{reports.inventoryAsset.toLocaleString()} Ks</p>
        </div>

        {/* Best Sellers */}
        <div className={`p-6 rounded-3xl ${neuInner} bg-white/50`}>
          <h2 className="text-xl font-black mb-4 flex items-center gap-2"><PieChart size={24}/> {t.bestSellers}</h2>
          <div className="space-y-3">
            {reports.bestSelling.map(([name, qty], idx) => (
              <div key={name} className="flex items-center gap-4">
                <span className="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center text-xs font-bold text-red-500">{idx+1}</span>
                <div className="flex-1 h-3 bg-gray-200 rounded-full overflow-hidden">
                  <div className="h-full bg-red-500 rounded-full" style={{ width: `${(qty / reports.bestSelling[0][1]) * 100}%` }}></div>
                </div>
                <div className="w-32 text-right">
                  <p className="text-sm font-bold truncate">{name}</p>
                  <p className="text-[10px] text-gray-400">{qty} items sold</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  };

  const SystemSection = () => {
    return (
      <div className="p-4 space-y-6">
        <div className={`p-8 rounded-[40px] ${neuOuter} bg-[#f8eaea] text-center`}>
          <div className="w-24 h-24 rounded-full bg-white mx-auto flex items-center justify-center mb-6 shadow-xl">
            <Settings size={48} className="text-red-500 animate-spin-slow" />
          </div>
          <h2 className="text-2xl font-black">Nay N Nay POS v1.0</h2>
          <p className="text-sm text-gray-400 mt-2">Premium Neumorphic Design</p>
          
          <div className="mt-10 space-y-4">
            <button 
              onClick={() => setLang(lang === 'mm' ? 'en' : 'mm')} 
              className={`w-full py-4 bg-white rounded-2xl ${neuOuter} flex items-center justify-center gap-3 font-bold`}
            >
              <Globe size={20} /> {lang === 'mm' ? 'Switch to English' : 'မြန်မာဘာသာသို့ ပြောင်းမည်'}
            </button>
            <button 
              onClick={() => signOut(auth)} 
              className={`w-full py-4 bg-red-500 text-white rounded-2xl ${neuOuter} flex items-center justify-center gap-3 font-bold`}
            >
              <LogOut size={20} /> Log Out
            </button>
          </div>
        </div>
      </div>
    );
  };

  // --- Main Render ---
  return (
    <div className="min-h-screen bg-[#f8eaea] font-sans text-gray-800 flex flex-col max-w-md mx-auto shadow-2xl relative overflow-hidden">
      
      {/* Top Header */}
      <header className="p-6 flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-black tracking-tighter text-red-600">Nay N Nay</h1>
          <p className="text-xs font-bold text-gray-400 tracking-widest uppercase">Premium POS System</p>
        </div>
        <div className={`w-12 h-12 rounded-2xl ${neuOuter} bg-[#f8eaea] flex items-center justify-center text-red-500 cursor-pointer`} onClick={() => setActiveTab('system')}>
          <Settings size={20} />
        </div>
      </header>

      {/* Main Content Area */}
      <main className="flex-1 overflow-hidden relative">
        <div className="h-full">
          {activeTab === 'purchase' && <PurchaseSection />}
          {activeTab === 'sale' && <SaleSection />}
          {activeTab === 'customer' && <CustomerSection />}
          {activeTab === 'expense' && <ExpenseSection />}
          {activeTab === 'report' && <ReportSection />}
          {activeTab === 'system' && <SystemSection />}
        </div>
      </main>

      {/* Bottom Navigation */}
      <nav className={`fixed bottom-6 left-6 right-6 h-20 rounded-[30px] ${glassEffect} ${neuOuter} flex items-center justify-around px-4 z-40 max-w-[calc(448px-3rem)] mx-auto`}>
        {[
          { id: 'purchase', icon: ShoppingBag, label: t.purchase },
          { id: 'sale', icon: ShoppingCart, label: t.sale },
          { id: 'customer', icon: Users, label: t.customer },
          { id: 'expense', icon: Receipt, label: t.expense },
          { id: 'report', icon: PieChart, label: t.report }
        ].map(item => (
          <button 
            key={item.id} 
            onClick={() => setActiveTab(item.id)}
            className={`flex flex-col items-center transition-all duration-300 ${activeTab === item.id ? 'text-red-600 scale-125 -translate-y-2' : 'text-gray-400'}`}
          >
            <item.icon size={22} strokeWidth={activeTab === item.id ? 3 : 2} />
            <span className="text-[10px] font-bold mt-1 uppercase tracking-tighter">{item.label}</span>
          </button>
        ))}
      </nav>

      {/* Style Overrides */}
      <style dangerouslySetInnerHTML={{ __html: `
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
        body { font-family: 'Inter', sans-serif; background: #e0e0e0; }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .animate-spin-slow { animation: spin 8s linear infinite; }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      `}} />
    </div>
  );
}