/* global React, Icon, Pill, StatusPill, KPI, MiniBars, formatBaht, DATA */
const { useState: useStateDb, useMemo: useMemoDb } = React;

function Dashboard({ goto }) {
  const { rooms, parking, transactions } = DATA;

  const monthlyRooms = useMemoDb(() => rooms.filter(r => r.type === "monthly"), [rooms]);
  const dailyRooms = useMemoDb(() => rooms.filter(r => r.type === "daily"), [rooms]);
  const occupiedM = monthlyRooms.filter(r => r.status === "occupied" || r.status === "overdue").length;
  const overdueM = monthlyRooms.filter(r => r.status === "overdue").length;
  const occupiedD = dailyRooms.filter(r => r.status === "daily").length;

  const parkOccupied = parking.filter(p => p.status === "occupied" || p.status === "overdue").length;
  const parkOverdue = parking.filter(p => p.status === "overdue").length;
  const parkDaily = parking.filter(p => p.status === "daily").length;

  const incomeMonthRoom = monthlyRooms.filter(r => r.status === "occupied").reduce((s,r) => s + r.rent, 0);
  const incomeDailyRoom = dailyRooms.filter(r => r.status === "daily").reduce((s,r) => s + r.rent, 0) * 4; // approx today*4
  const incomeMonthPark = parking.filter(p => p.status === "occupied").reduce((s,p) => s + p.monthly, 0);
  const incomeDailyPark = 1850; // placeholder for daily

  const totalIncome = incomeMonthRoom + incomeMonthPark + incomeDailyRoom + incomeDailyPark;

  const overdueList = [...monthlyRooms.filter(r => r.status === "overdue"), ...parking.filter(p => p.status === "overdue")].slice(0, 6);

  // Last 12 months revenue (mock)
  const monthsTH = ["มิ.ย","ก.ค","ส.ค","ก.ย","ต.ค","พ.ย","ธ.ค","ม.ค","ก.พ","มี.ค","เม.ย","พ.ค"];
  const monthlyBars = [298, 312, 305, 320, 318, 330, 342, 351, 348, 360, 372, 388].map(v => v*1000);
  const dailyBars = [42, 48, 51, 44, 39, 55, 62, 58, 50, 53, 61, 68].map(v => v*1000);

  return (
    <div className="grid" style={{ gap: 20 }}>
      <div className="grid cols-4">
        <KPI label="รายรับเดือนนี้ (รวม)" value={formatBaht(totalIncome)} sub="ทุกบริการรวมกัน" trend="up" trendVal="+8.4%" />
        <KPI label="ห้องพักรายเดือน" value={`${occupiedM}/${monthlyRooms.length}`} sub={`อัตราเข้าพัก ${Math.round(occupiedM/monthlyRooms.length*100)}%`} trend="up" trendVal="+3.1%" />
        <KPI label="ที่จอดรถรายเดือน" value={`${parkOccupied}/${parking.length}`} sub={`อัตราเช่า ${Math.round(parkOccupied/parking.length*100)}%`} trend="up" trendVal="+1.8%" />
        <KPI label="ค้างชำระ" value={overdueM + parkOverdue} sub={`รวม ${formatBaht((overdueM*4500 + parkOverdue*1700))}`} trend="down" trendVal="-2 ราย" />
      </div>

      <div className="grid cols-2" style={{ gridTemplateColumns: "1.5fr 1fr" }}>
        <div className="card">
          <div className="card-head">
            <h3>รายรับ 12 เดือนย้อนหลัง</h3>
            <div className="spacer" />
            <div className="legend">
              <span className="item"><span className="swatch" style={{ background: "var(--info-soft)" }} /> ห้องพัก</span>
              <span className="item"><span className="swatch" style={{ background: "color-mix(in oklab, var(--accent) 22%, var(--info-soft))" }} /> ที่จอดรถ</span>
            </div>
          </div>
          <div style={{ position: "relative" }}>
            <MiniBars data={monthlyBars} max={Math.max(...monthlyBars)*1.1} alt />
            <div className="axis">{monthsTH.map(m => <span key={m}>{m}</span>)}</div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>แจ้งเตือน</h3>
            <div className="spacer" />
            <span className="pill warn"><span className="dot"/>{overdueList.length} รายการ</span>
          </div>
          {overdueList.map((it, idx) => {
            const isRoom = !!it.no && it.floor;
            const tone = "danger";
            return (
              <div className="alert-item" key={idx}>
                <div className={"ico " + tone}><Icon name="warn" size={16}/></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: "0.92rem" }}>
                    {isRoom ? `ห้อง ${it.no}` : `ที่จอด ${it.no}`} ค้างชำระ
                  </div>
                  <div style={{ color: "var(--ink-3)", fontSize: "0.82rem" }}>
                    {it.customer ? it.customer.name : "—"} · ค้าง {isRoom ? formatBaht(it.rent) : formatBaht(it.monthly)}
                  </div>
                </div>
                <button className="btn sm">ติดตาม</button>
              </div>
            );
          })}
        </div>
      </div>

      <div className="grid cols-2">
        <div className="card">
          <div className="card-head">
            <h3>สรุปห้องพัก</h3>
            <div className="spacer" />
            <button className="btn sm" onClick={() => goto("rooms")}>ดูทั้งหมด</button>
          </div>
          <div className="grid cols-2">
            <div>
              <div style={{ fontSize: "0.85rem", color: "var(--ink-3)", marginBottom: 6 }}>รายเดือน</div>
              <div className="num" style={{ fontSize: "1.5rem", fontWeight: 600 }}>{formatBaht(incomeMonthRoom)}</div>
              <div style={{ fontSize: "0.82rem", color: "var(--ink-3)" }}>{occupiedM} ห้องเข้าพัก · {overdueM} ค้างชำระ</div>
            </div>
            <div>
              <div style={{ fontSize: "0.85rem", color: "var(--ink-3)", marginBottom: 6 }}>รายวัน</div>
              <div className="num" style={{ fontSize: "1.5rem", fontWeight: 600 }}>{formatBaht(incomeDailyRoom)}</div>
              <div style={{ fontSize: "0.82rem", color: "var(--ink-3)" }}>{occupiedD} ห้องเข้าพัก · สัปดาห์นี้</div>
            </div>
          </div>
          <div style={{ marginTop: 16, borderTop: "1px solid var(--line)", paddingTop: 14 }}>
            <div className="row" style={{ justifyContent: "space-between" }}>
              <span style={{ color: "var(--ink-3)" }}>ห้องว่างพร้อมเข้าพัก</span>
              <span className="num" style={{ fontWeight: 600 }}>{rooms.filter(r => r.status === "vacant").length} ห้อง</span>
            </div>
            <div className="row" style={{ justifyContent: "space-between", marginTop: 6 }}>
              <span style={{ color: "var(--ink-3)" }}>กำลังทำความสะอาด</span>
              <span className="num" style={{ fontWeight: 600 }}>{rooms.filter(r => r.status === "cleaning").length} ห้อง</span>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>สรุปที่จอดรถ</h3>
            <div className="spacer" />
            <button className="btn sm" onClick={() => goto("parking")}>ดูทั้งหมด</button>
          </div>
          <div className="grid cols-2">
            <div>
              <div style={{ fontSize: "0.85rem", color: "var(--ink-3)", marginBottom: 6 }}>รายเดือน</div>
              <div className="num" style={{ fontSize: "1.5rem", fontWeight: 600 }}>{formatBaht(incomeMonthPark)}</div>
              <div style={{ fontSize: "0.82rem", color: "var(--ink-3)" }}>{parkOccupied} คันใช้บริการ</div>
            </div>
            <div>
              <div style={{ fontSize: "0.85rem", color: "var(--ink-3)", marginBottom: 6 }}>รายวันสัปดาห์นี้</div>
              <div className="num" style={{ fontSize: "1.5rem", fontWeight: 600 }}>{formatBaht(incomeDailyPark)}</div>
              <div style={{ fontSize: "0.82rem", color: "var(--ink-3)" }}>{parkDaily} คัน วันนี้</div>
            </div>
          </div>
          <div style={{ marginTop: 16, borderTop: "1px solid var(--line)", paddingTop: 14 }}>
            <div className="row" style={{ justifyContent: "space-between" }}>
              <span style={{ color: "var(--ink-3)" }}>ที่จอดว่าง</span>
              <span className="num" style={{ fontWeight: 600 }}>{parking.filter(p => p.status === "vacant").length} ที่</span>
            </div>
            <div className="row" style={{ justifyContent: "space-between", marginTop: 6 }}>
              <span style={{ color: "var(--ink-3)" }}>จองล่วงหน้า</span>
              <span className="num" style={{ fontWeight: 600 }}>{parking.filter(p => p.status === "reserved").length} ที่</span>
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>รายการล่าสุด</h3>
          <div className="spacer" />
          <button className="btn sm" onClick={() => goto("reports")}>ดูทั้งหมด <Icon name="back" size={14} style={{ transform: "rotate(180deg)" }}/></button>
        </div>
        <div className="table-wrap" style={{ border: "none" }}>
          <table className="table">
            <thead><tr><th>วันที่</th><th>รายการ</th><th>ประเภท</th><th>ช่องทาง</th><th className="num">จำนวน</th></tr></thead>
            <tbody>
              {transactions.slice(0, 8).map(t => (
                <tr key={t.id}>
                  <td className="num">{t.date}</td>
                  <td>{t.label}</td>
                  <td>
                    {t.cat === "room-month" && <Pill tone="ok">ห้อง · รายเดือน</Pill>}
                    {t.cat === "room-day" && <Pill tone="info">ห้อง · รายวัน</Pill>}
                    {t.cat === "park-month" && <Pill tone="ok">จอด · รายเดือน</Pill>}
                    {t.cat === "park-day" && <Pill tone="info">จอด · รายวัน</Pill>}
                  </td>
                  <td style={{ color: "var(--ink-3)" }}>{t.method}</td>
                  <td className="num" style={{ fontWeight: 600 }}>{formatBaht(t.amount)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;