// HomeScreen — Producer Owner's daily landing.
// Above-the-fold: revenue MTD + settlement balance + alert + upcoming bookings + quick links.

function HomeScreen({ brand }) {
  return (
    <React.Fragment>
      <div>
        <h1 className="page-title">สวัสดี คุณสมชาย</h1>
        <div className="page-sub">{brand.name} · ภาพรวมเดือนนี้</div>
      </div>

      <div className="metric-row">
        <div className="metric">
          <div className="lbl">รายได้ MTD</div>
          <div className="row-val"><span className="val">฿1,247,500</span><span className="iso">THB</span></div>
          <MiniSpark data={[60, 72, 78, 80, 92, 100, 108, 124]} width={120} height={20} color="var(--thaihao-primary)" />
          <div className="trust">
            <span className="pill warning sm">ประมาณการ</span>
            <span className="audit-link"><i className="ti ti-link"></i>audit</span>
          </div>
          <div className="foot"><span className="up"><i className="ti ti-trending-up" style={{fontSize:13}}></i>+12.4%</span></div>
        </div>
        <div className="metric">
          <div className="lbl">ยอดรอชำระ</div>
          <div className="row-val"><span className="val">¥262,000</span><span className="iso">CNY</span></div>
          <MiniSpark data={[180, 195, 210, 220, 230, 245, 255, 262]} width={120} height={20} color="var(--color-text-on-success)" />
          <div className="trust">
            <span className="pill success sm">ล็อกแล้ว</span>
            <span className="audit-link"><i className="ti ti-link"></i>audit</span>
          </div>
          <div className="foot">fx_exec 1:4.75</div>
        </div>
      </div>

      <div className="alert">
        <i className="ti ti-alert-triangle"></i>
        <div className="body">
          <div className="title">สินค้าสต็อกต่ำ 2 รายการ</div>
          <div className="sub">ข้าวหอมมะลิ · ข้าวกล้องหอม</div>
        </div>
      </div>

      <div className="section">
        <div className="section-head">
          <h2>การจองที่จะมาถึง</h2>
          <span className="more">ทั้งหมด</span>
        </div>
        <div className="list">
          <div className="list-row">
            <div className="ic" style={{background:"var(--color-background-info)", color:"var(--color-text-on-info)", position:"relative"}}>
              <i className="ti ti-broadcast"></i>
              <span className="live-dot" style={{position:"absolute", top: -2, right: -2}}></span>
            </div>
            <div>
              <div className="title">Li Wei · ไลฟ์ขายข้าวหอม</div>
              <div className="sub">22 มี.ค. 2569 · 20:00 BJT · 90 นาที</div>
            </div>
            <div className="right">
              <div className="num">¥85,000</div>
              <span className="pill warning sm">ยืนยันแล้ว</span>
            </div>
          </div>
          <div className="list-row">
            <div className="ic" style={{background:"var(--color-background-info)", color:"var(--color-text-on-info)"}}><i className="ti ti-broadcast"></i></div>
            <div>
              <div className="title">Wang Jing · เปิดตัวข้าวกล้อง</div>
              <div className="sub">28 มี.ค. 2569 · 19:30 BJT · 60 นาที</div>
            </div>
            <div className="right">
              <div className="num">¥48,000</div>
              <span className="pill info sm">รอตอบรับ</span>
            </div>
          </div>
          <div className="list-row">
            <div className="ic" style={{background:"var(--surface-container-low)"}}><i className="ti ti-calendar-plus"></i></div>
            <div>
              <div className="title">ค้นหา KOL เพิ่มเติม</div>
              <div className="sub">มี 142 คนตรงโปรไฟล์ของคุณ</div>
            </div>
            <div className="right"><i className="ti ti-chevron-right" style={{color:"var(--on-surface-variant)"}}></i></div>
          </div>
        </div>
      </div>

      <div className="section">
        <div className="section-head">
          <h2>ทางลัด</h2>
        </div>
        <div className="quick-row">
          <div className="quick"><i className="ti ti-package"></i><span>สต็อก</span></div>
          <div className="quick"><i className="ti ti-receipt-2"></i><span>กระแสเงิน</span></div>
          <div className="quick"><i className="ti ti-users"></i><span>KOL</span></div>
          <div className="quick"><i className="ti ti-flame"></i><span>โปรโมชั่น</span></div>
        </div>
      </div>

      <div style={{height: 8}}></div>
    </React.Fragment>
  );
}

window.HomeScreen = HomeScreen;