// ============ DASHBOARD ============
const { Icon, formatBaht, formatNumber, StatCard, RevenueChart, Donut, Ring } = window.UI;
const M = window.MOCK;
const API = window.API;

function Dashboard() {
  const [income, setIncome]       = React.useState(M.income);
  const [expenses, setExpenses]   = React.useState(M.expenses);
  const [employees, setEmployees] = React.useState(M.employees);
  const [inventory, setInventory] = React.useState(M.inventory);

  React.useEffect(() => {
    Promise.all([
      API.income.list().catch(() => null),
      API.expenses.list().catch(() => null),
      API.employees.list().catch(() => null),
      API.inventory.list().catch(() => null),
    ]).then(([inc, exp, emp, inv]) => {
      if (inc) setIncome(inc);
      if (exp) setExpenses(exp);
      if (emp) setEmployees(emp);
      if (inv) setInventory(inv);
    });
  }, []);

  const totalRev = income.reduce((s, x) => s + x.amount, 0);
  const totalExp = expenses.reduce((s, x) => s + x.amount, 0);
  const totalSalary = employees.reduce((s, x) => s + x.base + x.bonus, 0);
  const profit = totalRev - totalExp - totalSalary;
  const completedJobs = income.filter(j => j.paid).length;
  const totalJobs = income.length;

  return (
    <div className="page">
      <div className="stat-grid">
        <StatCard label="ລາຍຮັບເດືອນນີ້" value={totalRev} color="purple"
          icon={<Icon.Coin/>} isCurrency
          trend={{ dir: 'up', value: '+18.4%', label: 'ຈາກເດືອນທີ່ແລ້ວ' }}/>
        <StatCard label="ລາຍຈ່າຍເດືອນນີ້" value={totalExp} color="cyan"
          icon={<Icon.Card/>} isCurrency
          trend={{ dir: 'up', value: '+6.2%', label: 'ເພີ່ມຈາກຄ່າເຊົ່າ' }}/>
        <StatCard label="ເງິນເດືອນພະນັກງານ" value={totalSalary} color="amber"
          icon={<Icon.Salary/>} isCurrency
          trend={{ dir: 'up', value: `${employees.length} ຄົນ`, label: 'ພະນັກງານປັດຈຸບັນ' }}/>
        <StatCard label="ກຳໄລສຸດທິ" value={profit} color="green"
          icon={<Icon.Trend/>} isCurrency
          trend={{ dir: 'up', value: '+12.8%', label: 'ດີກວ່າເປົ້າ 8%' }}/>
      </div>

      <div className="grid-2" style={{ marginBottom: 16 }}>
        <div className="card">
          <div className="card-h">
            <div>
              <h3>ກະແສລາຍຮັບ vs ລາຍຈ່າຍ</h3>
              <div className="sub">14 ມື້ຫຼ້າສຸດ · ພຶດສະພາ 2026</div>
            </div>
            <div className="legend">
              <span><span className="dot" style={{background:'#a855f7'}}></span>ລາຍຮັບ</span>
              <span><span className="dot" style={{background:'#22d3ee'}}></span>ລາຍຈ່າຍ</span>
            </div>
          </div>
          <RevenueChart data={M.dailyTrend} height={240}/>
        </div>

        <div className="card">
          <div className="card-h">
            <h3>ສັດສ່ວນວຽກສ້ອມ</h3>
            <span className="chip cyan"><span className="dot"></span>ເດືອນນີ້</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', position: 'relative', margin: '12px 0' }}>
            <Donut data={M.categoryMix} size={170}/>
            <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', textAlign: 'center' }}>
              <div>
                <div className="mono" style={{ fontSize: 22, fontWeight: 700 }}>{totalJobs}</div>
                <div style={{ fontSize: 10.5, color: 'var(--ink-2)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>ວຽກທັງໝົດ</div>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
            {M.categoryMix.map(c => (
              <div key={c.name} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 12 }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 2, background: c.color }}></span>
                  {c.name}
                </span>
                <span className="mono" style={{ color: 'var(--ink-2)' }}>{c.value}%</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="grid-2" style={{ marginBottom: 16 }}>
        <div className="card">
          <div className="card-h">
            <div>
              <h3>ວຽກສ້ອມຫຼ້າສຸດ</h3>
              <div className="sub">ສະແດງ 5 ລາຍການ · <span className="live-dot" style={{ display: 'inline-block', verticalAlign: 'middle' }}></span> ຕິດຕາມແບບສົດ</div>
            </div>
            <button className="btn btn-ghost" style={{ fontSize: 12 }}>ເບິ່ງທັງໝົດ →</button>
          </div>
          <table>
            <thead>
              <tr>
                <th>ເລກທີ</th>
                <th>ເຄື່ອງ / ວຽກ</th>
                <th>ຊ່າງ</th>
                <th>ສະຖານະ</th>
                <th style={{ textAlign: 'right' }}>ຍອດ</th>
              </tr>
            </thead>
            <tbody>
              {income.slice(0, 5).map(j => {
                const t = employees.find(e => e.id === j.tech) || { avatar: 'c1', initials: '?', name: '-' };
                return (
                  <tr key={j.id}>
                    <td className="mono" style={{ fontSize: 12, color: 'var(--ink-2)' }}>{j.id}</td>
                    <td>
                      <div style={{ fontWeight: 500 }}>{j.device}</div>
                      <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{j.service}</div>
                    </td>
                    <td>
                      <div className="emp">
                        <div className={`emp-av ${t.avatar}`}>{t.initials}</div>
                        <span style={{ fontSize: 12 }}>{t.name.split(' ')[0]}</span>
                      </div>
                    </td>
                    <td><span className={`chip ${j.paid ? 'green' : 'amber'}`}><span className="dot"></span>{j.paid ? 'ຈ່າຍແລ້ວ' : 'ຍັງບໍ່ໄດ້ຈ່າຍ'}</span></td>
                    <td className="mono" style={{ textAlign: 'right', fontWeight: 600 }}>{formatBaht(j.amount)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        <div className="card">
          <div className="card-h">
            <h3>ເປົ້າໝາຍເດືອນນີ້</h3>
            <span className="chip purple"><span className="dot"></span>On Track</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', padding: '8px 0' }}>
            <Ring percent={Math.round((totalRev / 35000) * 100)}/>
            <div className="ring-label" style={{ position: 'relative', marginLeft: -150, width: 140, height: 140 }}>
              <div>
                <b>{Math.round((totalRev / 35000) * 100)}%</b>
                <span>ຂອງເປົ້າ</span>
              </div>
            </div>
          </div>
          <div style={{ marginTop: 14 }}>
            <div className="summary-row">
              <span className="label">ເປົ້າລາຍຮັບ</span>
              <span className="val">{formatBaht(35000)}</span>
            </div>
            <div className="summary-row">
              <span className="label">ເຮັດໄດ້ແລ້ວ</span>
              <span className="val" style={{ color: '#a78bfa' }}>{formatBaht(totalRev)}</span>
            </div>
            <div className="summary-row">
              <span className="label">ບິນຈ່າຍແລ້ວ / ທັງໝົດ</span>
              <span className="val">{completedJobs}/{totalJobs}</span>
            </div>
            <div className="summary-row">
              <span className="label">ສະເລ່ຍຕໍ່ບິນ</span>
              <span className="val">{formatBaht(totalJobs ? totalRev / totalJobs : 0)}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-h">
          <h3>ແຈ້ງເຕືອນສະຕັອກໃກ້ໝົດ</h3>
          <button className="btn" style={{ fontSize: 12 }}><Icon.Plus/> ສັ່ງຊື້</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {inventory.filter(x => x.stock <= x.min).map(item => (
            <div key={item.sku} style={{
              padding: 14,
              background: 'rgba(244,63,94,0.05)',
              border: '1px solid rgba(244,63,94,0.18)',
              borderRadius: 12,
              display: 'flex', alignItems: 'center', gap: 12
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 10,
                background: 'rgba(244,63,94,0.15)', color: '#fb7185',
                display: 'grid', placeItems: 'center'
              }}><Icon.Alert/></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.name}</div>
                <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>
                  <span className="mono">{item.stock}</span> ອັນ · ຂັ້ນຕ່ຳ <span className="mono">{item.min}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============ INCOME ============
function Income() {
  const [showModal, setShowModal] = React.useState(false);
  const [items, setItems] = React.useState(M.income);
  const [employees, setEmployees] = React.useState(M.employees);
  const [removing, setRemoving] = React.useState(null);
  const [filter, setFilter] = React.useState('ທັງໝົດ');
  const statuses = ['ທັງໝົດ', 'ຈ່າຍແລ້ວ', 'ຍັງບໍ່ໄດ້ຈ່າຍ'];

  React.useEffect(() => {
    API.income.list().then(setItems).catch(() => {});
    API.employees.list().then(setEmployees).catch(() => {});
  }, []);

  const filtered = items.filter(j => {
    if (filter === 'ທັງໝົດ') return true;
    if (filter === 'ຈ່າຍແລ້ວ') return j.paid;
    return !j.paid;
  });
  const total = filtered.reduce((s, x) => s + x.amount, 0);
  const paidCount = items.filter(j => j.paid).length;
  const unpaidCount = items.length - paidCount;
  const unpaidAmount = items.filter(j => !j.paid).reduce((s, x) => s + x.amount, 0);

  const togglePaid = async (id) => {
    const current = items.find(j => j.id === id);
    if (!current) return;
    const newPaid = !current.paid;
    setItems(items.map(j => j.id === id ? { ...j, paid: newPaid } : j));
    try {
      await API.income.update(id, { paid: newPaid });
    } catch (e) {
      console.warn(e);
    }
  };

  const handleDelete = async (id) => {
    setRemoving(id);
    try {
      await API.income.remove(id);
    } catch (e) {
      console.warn(e);
    }
    setTimeout(() => {
      setItems(prev => prev.filter(j => j.id !== id));
      setRemoving(null);
    }, 240);
  };

  const handleSave = async (payload) => {
    try {
      const saved = await API.income.create(payload);
      setItems([saved, ...items]);
    } catch (e) {
      // Offline fallback — local-only
      const fallback = {
        ...payload,
        id: `INV-LOCAL-${Date.now().toString(36).slice(-6).toUpperCase()}`,
        date: formatThaiDate(new Date()),
        paid: false,
      };
      setItems([fallback, ...items]);
    }
    setShowModal(false);
  };

  return (
    <div className="page">
      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <StatCard label="ລາຍຮັບເດືອນພຶດສະພາ" value={items.reduce((s, x) => s + x.amount, 0)} color="purple"
          icon={<Icon.Coin/>} isCurrency
          trend={{ dir: 'up', value: `${items.length} ບິນ`, label: 'ເປີດບິນທັງໝົດ' }}/>
        <StatCard label="ບິນຈ່າຍແລ້ວ" value={paidCount} color="green"
          icon={<Icon.Check/>}
          trend={{ dir: 'up', value: items.length ? `${Math.round((paidCount/items.length)*100)}%` : '0%', label: 'ອັດຕາຊຳລະເງິນ' }}/>
        <StatCard label="ລໍຖ້າເກັບເງິນ" value={unpaidAmount} color="amber"
          icon={<Icon.Phone/>} isCurrency
          trend={{ dir: 'up', value: `${unpaidCount} ບິນ`, label: 'ຍັງບໍ່ໄດ້ຈ່າຍ' }}/>
      </div>

      <div className="card">
        <div className="card-h">
          <div className="tabs">
            {statuses.map(s => (
              <div key={s} className={`tab ${filter === s ? 'active' : ''}`} onClick={() => setFilter(s)}>{s}</div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <button className="btn"><Icon.Filter/> ກັ່ນຕອງ</button>
            <button className="btn"><Icon.Download/> Export</button>
            <button className="btn btn-primary" onClick={() => setShowModal(true)}><Icon.Plus/> ເປີດບິນໃໝ່</button>
          </div>
        </div>
        <table>
          <thead>
            <tr>
              <th>ເລກທີບິນ</th>
              <th>ວັນທີ</th>
              <th>ລູກຄ້າ</th>
              <th>ເຄື່ອງ / ວຽກ</th>
              <th>ຊ່າງ</th>
              <th>ສະຖານະການຈ່າຍ</th>
              <th style={{ textAlign: 'right' }}>ຍອດ</th>
              <th style={{ width: 60 }}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(j => {
              const t = employees.find(e => e.id === j.tech) || { avatar: 'c1', initials: '?', name: '-' };
              return (
                <tr key={j.id} className={removing === j.id ? 'removing' : ''}>
                  <td className="mono" style={{ fontSize: 12, color: 'var(--ink-1)' }}>{j.id}</td>
                  <td style={{ fontSize: 12, color: 'var(--ink-2)' }}>{j.date}</td>
                  <td style={{ fontWeight: 500 }}>{j.customer}</td>
                  <td>
                    <div style={{ fontWeight: 500 }}>{j.device}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{j.service}</div>
                  </td>
                  <td>
                    <div className="emp">
                      <div className={`emp-av ${t.avatar}`}>{t.initials}</div>
                      <span style={{ fontSize: 12 }}>{t.name.split(' ')[0]}</span>
                    </div>
                  </td>
                  <td>
                    <span className={`chip clickable ${j.paid ? 'green' : 'amber'}`}
                      onClick={() => togglePaid(j.id)}
                      title="ຄລິກເພື່ອສະຫຼັບສະຖານະ">
                      <span className="dot"></span>{j.paid ? 'ຈ່າຍແລ້ວ' : 'ຍັງບໍ່ໄດ້ຈ່າຍ'}
                    </span>
                  </td>
                  <td className="mono" style={{ textAlign: 'right', fontWeight: 600 }}>{formatBaht(j.amount)}</td>
                  <td>
                    <div className="row-actions">
                      <button className="icon-btn danger" title="ລົບລາຍການ" onClick={() => handleDelete(j.id)}>
                        <Icon.Trash/>
                      </button>
                    </div>
                  </td>
                </tr>
              );
            })}
            {filtered.length === 0 && (
              <tr><td colSpan="8" style={{ textAlign: 'center', padding: '32px', color: 'var(--ink-3)' }}>ບໍ່ພົບລາຍການ</td></tr>
            )}
          </tbody>
          <tfoot>
            <tr style={{ background: 'rgba(124,58,237,0.05)' }}>
              <td colSpan="6" style={{ padding: '14px 18px', fontWeight: 600, fontSize: 13 }}>ລວມ {filtered.length} ລາຍການ</td>
              <td className="mono" style={{ textAlign: 'right', padding: '14px 18px', fontWeight: 700, fontSize: 14, color: '#a78bfa' }}>{formatBaht(total)}</td>
              <td></td>
            </tr>
          </tfoot>
        </table>
      </div>

      {showModal && <NewBillModal onClose={() => setShowModal(false)} onSave={handleSave} employees={employees}/>}
    </div>
  );
}

function formatThaiDate(d) {
  const months = ['ມ.ກ.','ກ.ພ.','ມີ.ນ.','ມສ.','ພ.ສ.','ມິ.ຖ.','ກ.ລ.','ສ.ຫ.','ກ.ຍ.','ຕ.ລ.','ພ.ຈ.','ທ.ວ.'];
  return `${String(d.getDate()).padStart(2,'0')} ${months[d.getMonth()]} ${d.getFullYear()}`;
}

function NewBillModal({ onClose, onSave, employees }) {
  const [customer, setCustomer] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [device, setDevice] = React.useState('');
  const [service, setService] = React.useState('');
  const [tech, setTech] = React.useState('');
  const [amount, setAmount] = React.useState('');
  const [note, setNote] = React.useState('');
  const [error, setError] = React.useState('');
  const [saving, setSaving] = React.useState(false);

  const handleSave = async () => {
    if (!customer.trim() || !device.trim() || !service || !tech || !amount) {
      setError('ກະລຸນາປ້ອນຂໍ້ມູນໃຫ້ຄົບ (ລູກຄ້າ / ເຄື່ອງ / ປະເພດວຽກ / ຊ່າງ / ລາຄາ)');
      return;
    }
    const amt = Number(String(amount).replace(/,/g, ''));
    if (isNaN(amt) || amt <= 0) {
      setError('ລາຄາປະເມີນບໍ່ຖືກຕ້ອງ');
      return;
    }
    setSaving(true);
    await onSave({
      customer: customer.trim(),
      phone: phone.trim(),
      device: device.trim(),
      service,
      tech: Number(tech),
      amount: amt,
      note: note.trim(),
      paid: false,
    });
  };

  return (
    <window.UI.Modal title="ເປີດບິນວຽກສ້ອມໃໝ່" subtitle="ປ້ອນຂໍ້ມູນລູກຄ້າແລະລາຍລະອຽດວຽກ" onClose={onClose}
      footer={<>
        {error && <span style={{ color: '#fb7185', fontSize: 12, marginRight: 'auto' }}>{error}</span>}
        <button className="btn" onClick={onClose}>ຍົກເລີກ</button>
        <button className="btn btn-primary" onClick={handleSave} disabled={saving}><Icon.Plus/> {saving ? 'ກຳລັງບັນທຶກ...' : 'ບັນທຶກບິນ'}</button>
      </>}>
      <div className="form-grid">
        <div className="field"><label>ຊື່ລູກຄ້າ</label><input className="input" placeholder="ເຊັ່ນ ທ້າວວັນນະກອນ" value={customer} onChange={e => setCustomer(e.target.value)}/></div>
        <div className="field"><label>ເບີຕິດຕໍ່</label><input className="input" placeholder="020-XXXX-XXXX" value={phone} onChange={e => setPhone(e.target.value)}/></div>
        <div className="field"><label>ຍີ່ຫໍ້/ລຸ້ນເຄື່ອງ</label><input className="input" placeholder="iPhone 14 Pro" value={device} onChange={e => setDevice(e.target.value)}/></div>
        <div className="field"><label>ປະເພດວຽກ</label>
          <select className="select" value={service} onChange={e => setService(e.target.value)}>
            <option value="">ເລືອກປະເພດ</option>
            <option>ປ່ຽນໜ້າຈໍ</option>
            <option>ປ່ຽນແບັດເຕີຣີ</option>
            <option>ກະຈົກຫຼັງ</option>
            <option>ຊອບແວ/ກູ້ຂໍ້ມູນ</option>
          </select>
        </div>
        <div className="field"><label>ມອບໝາຍຊ່າງ</label>
          <select className="select" value={tech} onChange={e => setTech(e.target.value)}>
            <option value="">ເລືອກຊ່າງ</option>
            {employees.map(e => <option key={e.id} value={e.id}>{e.name} ({e.role})</option>)}
          </select>
        </div>
        <div className="field"><label>ລາຄາປະເມີນ (ກີບ)</label><input className="input mono" placeholder="0" value={amount} onChange={e => setAmount(e.target.value)}/></div>
        <div className="field full"><label>ໝາຍເຫດ</label><textarea className="textarea" placeholder="ອາການເສຍ / ຄວາມເສຍຫາຍຂອງລູກຄ້າ..." value={note} onChange={e => setNote(e.target.value)}/></div>
      </div>
    </window.UI.Modal>
  );
}

window.PAGES_A = { Dashboard, Income };