/* global React, I, UI, SSSData */
const { Btn, Badge, Stat, Card, PageHead, BarChart, LineChart, Sparkline, fmt0, fmtM } = window.UI;

function Dashboard({ navigate }) {
  const D = window.SSSData;
  // Compute headline metrics (กันกรณีข้อมูลว่าง)
  const _st = D.SalesTrend || [];
  const _last = _st[_st.length - 1] || { sales: 0, purchase: 0 };
  const _prev = _st[_st.length - 2] || { sales: 0, purchase: 0 };
  const monthSales = _last.sales;
  const monthPurchase = _last.purchase;
  const prevSales = _prev.sales;
  const salesDelta = prevSales ? ((monthSales - prevSales) / prevSales * 100).toFixed(1) : "0.0";
  const grossProfit = monthSales - monthPurchase;
  const profitMargin = monthSales ? (grossProfit / monthSales * 100).toFixed(1) : "0.0";
  const overdueInvoices = D.Invoices.filter(i => i.status === "เกินกำหนด");
  const overdueAmount = overdueInvoices.reduce((s, i) => s + (i.amount - i.paid), 0);
  const pendingFilings = D.TaxFilings.filter(t => t.status === "รอยื่น");
  const lowStock = D.Products.filter(p => p.stock <= p.min && p.category !== "บริการ");
  const cashOnHand = window.CompanyCashStore ? window.CompanyCashStore.balances().reduce((s, a) => s + (a.balance || 0), 0) : 0;

  return (
    <>
      <PageHead
        title="ภาพรวมกิจการ"
        sub={`${new Date().toLocaleDateString("th-TH", { weekday: "long", day: "numeric", month: "long", year: "numeric" })} · ${D.Company.name}`}
        right={<>
          <Btn icon={I.download} kind="ghost" onClick={() => navigate("accounting")}>รายงาน</Btn>
          <Btn icon={I.plus} kind="primary" onClick={() => window.openNewDoc && window.openNewDoc("quotation")}>สร้างเอกสาร</Btn>
        </>}
      />

      {/* Stat row */}
      <div className="grid cols-4 mb-lg">
        <Stat
          icon={I.sale}
          label="ยอดขายเดือนนี้"
          value={`฿${fmt0(monthSales)}`}
          delta={`${salesDelta}% จากเดือนก่อน`}
          deltaDir={salesDelta > 0 ? "up" : "down"}
        />
        <Stat
          icon={I.buy}
          label="ยอดซื้อ/จ่ายเดือนนี้"
          value={`฿${fmt0(monthPurchase)}`}
          delta={`กำไรขั้นต้น ฿${fmt0(grossProfit)} (${profitMargin}%)`}
          deltaDir="up"
        />
        <Stat
          icon={I.money}
          label="เงินสด/ธนาคารคงเหลือ"
          value={`฿${fmt0(cashOnHand)}`}
          sub={`${(window.CompanyCashStore ? window.CompanyCashStore.balances().length : 0)} บัญชี`}
        />
        <Stat
          icon={I.invoice}
          label="ลูกหนี้คงค้าง"
          value={`฿${fmt0(D.Invoices.filter(i=>i.status!=='ชำระแล้ว').reduce((s,i)=>s+i.amount-i.paid,0))}`}
          delta={`${overdueInvoices.length} ใบเกินกำหนด · ฿${fmt0(overdueAmount)}`}
          deltaDir="down"
        />
      </div>

      {/* Main: trend + side */}
      <div className="grid dash-main mb-lg">
        <Card title="ยอดขาย vs ยอดซื้อ — 12 เดือนย้อนหลัง" sub="หน่วย: บาท" right={
          <div className="legend">
            <div className="item"><span className="swatch"/>ยอดขาย</div>
            <div className="item"><span className="swatch alt"/>ยอดซื้อ</div>
          </div>
        }>
          <LineChart
            data={D.SalesTrend}
            series={[
              { key: "sales", color: "var(--c-violet)" },
              { key: "purchase", color: "var(--c-cyan)", dashed: true }
            ]}
            height={200}
          />
        </Card>

        <Card title="Quick actions" sub="ทางลัด">
          <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8}}>
            <QA icon={I.doc} label="ใบเสนอราคา" onClick={() => window.openNewDoc && window.openNewDoc("quotation")}/>
            <QA icon={I.invoice} label="ใบส่งสินค้า/ใบแจ้งหนี้" onClick={() => window.openNewDoc && window.openNewDoc("invoice")}/>
            <QA icon={I.buy} label="ใบสั่งซื้อ" onClick={() => window.openNewDoc && window.openNewDoc("purchase-order")}/>
            <QA icon={I.receipt} label="ค่าใช้จ่าย" onClick={() => navigate("expenses")}/>
            <QA icon={I.barcode} label="สแกนบาร์โค้ด" onClick={() => navigate("barcode")}/>
            <QA icon={I.payroll} label="คำนวนเงินเดือน" onClick={() => navigate("payroll")}/>
          </div>
        </Card>
      </div>

      {/* Alerts row */}
      <div className="grid cols-3 mb-lg">
        <Card title="แจ้งเตือนภาษี" sub={`${pendingFilings.length} รายการ`} right={<Btn size="sm" kind="ghost" onClick={() => navigate("tax-filings")}>ดูทั้งหมด<I.arrowRight size={12} className="icon"/></Btn>}>
          <div style={{display: "flex", flexDirection: "column", gap: 8}}>
            {pendingFilings.slice(0, 4).map(t => {
              const daysLeft = daysBetween(t.dueDate);
              return (
                <div key={t.code + t.period} style={{display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 10px", border: "1px solid var(--line)", borderRadius: 8, background: daysLeft <= 7 ? "var(--warning-bg)" : "var(--surface-2)"}}>
                  <div>
                    <div style={{fontWeight: 500, fontSize: 13}}>{t.code} <span className="muted" style={{fontWeight: 400}}>· {t.name}</span></div>
                    <div style={{fontSize: 11.5, color: "var(--ink-3)"}}>งวด {t.period} · ครบกำหนด {t.dueDate}</div>
                  </div>
                  <div style={{textAlign: "right"}}>
                    <div className="amount" style={{fontSize: 13}}>฿{fmt0(t.amount)}</div>
                    <div style={{fontSize: 11, color: daysLeft <= 7 ? "var(--warning)" : "var(--ink-3)"}}>เหลือ {daysLeft} วัน</div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>

        <Card title="บิลค้างชำระ/เกินกำหนด" sub={`${overdueInvoices.length} ใบ`} right={<Btn size="sm" kind="ghost" onClick={() => navigate("invoices")}>ดูทั้งหมด<I.arrowRight size={12} className="icon"/></Btn>}>
          <div style={{display: "flex", flexDirection: "column", gap: 6}}>
            {[...D.Invoices.filter(i => i.status === "เกินกำหนด" || i.status === "ค้างชำระ")].slice(0, 4).map(inv => (
              <div key={inv.no} style={{display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 10px", border: "1px solid var(--line)", borderRadius: 8, background: inv.status === "เกินกำหนด" ? "var(--danger-bg)" : "var(--surface-2)"}}>
                <div style={{minWidth: 0, flex: 1}}>
                  <div style={{fontWeight: 500, fontSize: 13, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>{inv.customer}</div>
                  <div style={{fontSize: 11.5, color: "var(--ink-3)"}} className="mono">{inv.no} · ครบ {inv.due}</div>
                </div>
                <div style={{textAlign: "right", marginLeft: 8}}>
                  <div className="amount" style={{fontSize: 13}}>฿{fmt0(inv.amount - inv.paid)}</div>
                  <Badge>{inv.status}</Badge>
                </div>
              </div>
            ))}
          </div>
        </Card>

        <Card title="สต็อกใกล้หมด" sub={`${lowStock.length} รายการ`} right={<Btn size="sm" kind="ghost" onClick={() => navigate("inventory")}>ดูทั้งหมด<I.arrowRight size={12} className="icon"/></Btn>}>
          <div style={{display: "flex", flexDirection: "column", gap: 6}}>
            {lowStock.slice(0, 4).map(p => (
              <div key={p.sku} style={{display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 10px", border: "1px solid var(--line)", borderRadius: 8, background: p.stock < p.min/2 ? "var(--danger-bg)" : "var(--warning-bg)"}}>
                <div style={{minWidth: 0, flex: 1}}>
                  <div style={{fontWeight: 500, fontSize: 13, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>{p.name}</div>
                  <div className="mono" style={{fontSize: 11.5, color: "var(--ink-3)"}}>{p.sku} · ขั้นต่ำ {p.min}</div>
                </div>
                <div style={{textAlign: "right", marginLeft: 8}}>
                  <div className="amount" style={{fontSize: 14, color: p.stock < p.min/2 ? "var(--danger)" : "var(--warning)"}}>{p.stock} {p.unit}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Activity + projects */}
      <div className="grid dash-main">
        <Card title="โปรเจกต์/งานที่กำลังดำเนินการ" right={<Btn size="sm" kind="ghost" onClick={() => navigate("projects")}>ทั้งหมด<I.arrowRight size={12} className="icon"/></Btn>} flush>
          <div className="table-wrap">
            <table className="t">
              <thead>
                <tr>
                  <th>รหัส</th>
                  <th>โปรเจกต์</th>
                  <th>ลูกค้า</th>
                  <th className="right">งบประมาณ</th>
                  <th>ความคืบหน้า</th>
                  <th>สถานะ</th>
                </tr>
              </thead>
              <tbody>
                {D.Projects.slice(0, 5).map(p => (
                  <tr key={p.code}>
                    <td className="mono">{p.code}</td>
                    <td style={{maxWidth: 260, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>{p.name}</td>
                    <td className="muted" style={{fontSize: 12}}>{p.customer}</td>
                    <td className="right">฿{fmt0(p.budget)}</td>
                    <td style={{minWidth: 140}}>
                      <ProgressBar pct={p.progress}/>
                    </td>
                    <td><Badge>{p.status}</Badge></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>

        <Card title="กิจกรรมล่าสุด" right={<Btn size="sm" kind="ghost" onClick={() => navigate("activity")}>ทั้งหมด<I.arrowRight size={12} className="icon"/></Btn>}>
          <div>
            {D.Activity.slice(0, 6).map((a, i) => (
              <div key={i} className="activity-item">
                <div className="avatar" style={{width: 28, height: 28, fontSize: 10}}>{(a.user || "?").slice(0,2)}</div>
                <div style={{flex: 1, minWidth: 0}}>
                  <div className="what"><b style={{color: "var(--ink-1)"}}>{a.user}</b> {a.action} <span style={{color: "var(--ink-1)"}}>{a.target}</span></div>
                  <div className="when">{a.when}</div>
                </div>
                {a.photo && <a href={a.photo} target="_blank" rel="noreferrer" title="ดูรูปหลักฐาน" style={{flexShrink: 0}}>
                  <img src={a.photo} alt="หลักฐาน" style={{width: 34, height: 34, objectFit: "cover", borderRadius: 7, border: "1px solid var(--line)", display: "block"}}/>
                </a>}
              </div>
            ))}
          </div>
        </Card>
      </div>
    </>
  );
}

function QA({ icon, label, onClick }) {
  return (
    <button className="btn" style={{height: "auto", padding: "12px 10px", flexDirection: "column", gap: 6, alignItems: "flex-start", textAlign: "left"}} onClick={onClick}>
      {React.createElement(icon, { size: 18 })}
      <span style={{fontSize: 12, fontWeight: 500}}>{label}</span>
    </button>
  );
}

function ProgressBar({ pct }) {
  return (
    <div style={{display: "flex", alignItems: "center", gap: 8}}>
      <div style={{flex: 1, height: 6, background: "var(--surface-3)", borderRadius: 999, overflow: "hidden"}}>
        <div style={{height: "100%", width: `${pct}%`, background: pct >= 100 ? "var(--success)" : "linear-gradient(90deg, var(--c-violet), var(--c-pink))", borderRadius: 999}}/>
      </div>
      <span style={{fontSize: 11, color: "var(--ink-3)", minWidth: 32, textAlign: "right"}}>{pct}%</span>
    </div>
  );
}

function daysBetween(thaiDate) {
  // Parse "7 มิ.ย. 2569" → JS Date (subtract 543 from BE year)
  const months = {"ม.ค.": 0, "ก.พ.": 1, "มี.ค.": 2, "เม.ย.": 3, "พ.ค.": 4, "มิ.ย.": 5, "ก.ค.": 6, "ส.ค.": 7, "ก.ย.": 8, "ต.ค.": 9, "พ.ย.": 10, "ธ.ค.": 11};
  const parts = thaiDate.split(" ");
  const d = parseInt(parts[0], 10);
  const m = months[parts[1]];
  const y = parseInt(parts[2], 10) - 543;
  const dt = new Date(y, m, d);
  const today = new Date(2026, 4, 22); // 22 พ.ค. 2569
  return Math.round((dt - today) / 86400000);
}

window.Dashboard = Dashboard;
window.ProgressBar = ProgressBar;
window.daysBetween = daysBetween;