/* global React, Icon, Pill, MiniBars, formatBaht, formatDateTH, downloadCSV, DATA */
const { useState: useStateRp, useMemo: useMemoRp } = React;

function Reports() {
  const [scope, setScope] = useStateRp("month"); // day, month, year
  const [section, setSection] = useStateRp("all"); // all, room-month, room-day, park-month, park-day

  const txs = DATA.transactions;

  const filtered = useMemoRp(() => {
    if (section === "all") return txs;
    return txs.filter(t => t.cat === section);
  }, [section]);

  const total = filtered.reduce((s, t) => s + t.amount, 0);

  const byCat = useMemoRp(() => {
    const out = { "room-month": 0, "room-day": 0, "park-month": 0, "park-day": 0 };
    filtered.forEach(t => { out[t.cat] = (out[t.cat] || 0) + t.amount; });
    return out;
  }, [filtered]);

  // Yearly bars
  const monthsTH = ["ม.ค","ก.พ","มี.ค","เม.ย","พ.ค","มิ.ย","ก.ค","ส.ค","ก.ย","ต.ค","พ.ย","ธ.ค"];
  const yearData = [310, 305, 322, 338, 345, 298, 312, 320, 332, 342, 372, 388].map(v => v*1000);

  const expense = [
    { cat: "ค่าน้ำ-ไฟส่วนกลาง", amt: 28400 },
    { cat: "ค่าจ้างพนักงาน", amt: 32000 },
    { cat: "ค่าบำรุงรักษา", amt: 8500 },
    { cat: "ค่าทำความสะอาด", amt: 6800 },
    { cat: "อื่นๆ", amt: 4200 },
  ];
  const expTotal = expense.reduce((s,x) => s + x.amt, 0);

  return (
    <div className="grid" style={{ gap: 18 }}>
      <div className="row" style={{ flexWrap: "wrap", gap: 12 }}>
        <div className="tabs">
          <button className={"tab " + (scope === "day" ? "active" : "")} onClick={() => setScope("day")}>รายวัน</button>
          <button className={"tab " + (scope === "month" ? "active" : "")} onClick={() => setScope("month")}>รายเดือน</button>
          <button className={"tab " + (scope === "year" ? "active" : "")} onClick={() => setScope("year")}>รายปี</button>
        </div>
        <div className="tabs">
          <button className={"tab " + (section === "all" ? "active" : "")} onClick={() => setSection("all")}>รวม</button>
          <button className={"tab " + (section === "room-month" ? "active" : "")} onClick={() => setSection("room-month")}>ห้อง · เดือน</button>
          <button className={"tab " + (section === "room-day" ? "active" : "")} onClick={() => setSection("room-day")}>ห้อง · วัน</button>
          <button className={"tab " + (section === "park-month" ? "active" : "")} onClick={() => setSection("park-month")}>จอด · เดือน</button>
          <button className={"tab " + (section === "park-day" ? "active" : "")} onClick={() => setSection("park-day")}>จอด · วัน</button>
        </div>
        <div className="spacer" style={{ flex: 1 }} />
        <button className="btn" onClick={() => downloadCSV(`report-${scope}-${section}.csv`, filtered)}><Icon name="download" size={16}/> Export CSV</button>
        <button className="btn" onClick={() => window.print()}><Icon name="printer" size={16}/> พิมพ์</button>
      </div>

      <div className="grid cols-4">
        <div className="kpi"><div className="deco"/><div className="label">รายรับห้อง · เดือน</div><div className="val">{formatBaht(byCat["room-month"] || 0)}</div><div className="sub">{filtered.filter(t=>t.cat==="room-month").length} รายการ</div></div>
        <div className="kpi"><div className="deco"/><div className="label">รายรับห้อง · วัน</div><div className="val">{formatBaht(byCat["room-day"] || 0)}</div><div className="sub">{filtered.filter(t=>t.cat==="room-day").length} รายการ</div></div>
        <div className="kpi"><div className="deco"/><div className="label">รายรับจอด · เดือน</div><div className="val">{formatBaht(byCat["park-month"] || 0)}</div><div className="sub">{filtered.filter(t=>t.cat==="park-month").length} รายการ</div></div>
        <div className="kpi"><div className="deco"/><div className="label">รายรับจอด · วัน</div><div className="val">{formatBaht(byCat["park-day"] || 0)}</div><div className="sub">{filtered.filter(t=>t.cat==="park-day").length} รายการ</div></div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>กราฟรายรับรายปี 2569</h3>
          <div className="spacer"/>
          <Pill tone="info">เฉลี่ย {formatBaht(yearData.reduce((s,v)=>s+v,0) / 12)} / เดือน</Pill>
        </div>
        <MiniBars data={yearData} alt />
        <div className="axis">{monthsTH.map(m => <span key={m}>{m}</span>)}</div>
      </div>

      <div className="grid cols-2" style={{ gridTemplateColumns: "1.7fr 1fr" }}>
        <div className="card">
          <div className="card-head">
            <h3>รายการรับเงิน</h3>
            <div className="spacer"/>
            <Pill>{filtered.length} รายการ</Pill>
            <Pill tone="ok">รวม {formatBaht(total)}</Pill>
          </div>
          <div className="table-wrap" style={{ border: "none" }}>
            <table className="table">
              <thead><tr><th>วันที่</th><th>รายการ</th><th>ช่องทาง</th><th className="num">จำนวน</th></tr></thead>
              <tbody>
                {filtered.map(t => (
                  <tr key={t.id}>
                    <td className="num">{formatDateTH(t.date)}</td>
                    <td>{t.label}</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 className="card">
          <div className="card-head"><h3>รายจ่ายเดือนนี้</h3><div className="spacer"/><Pill tone="warn">{formatBaht(expTotal)}</Pill></div>
          <div className="grid" style={{ gap: 8 }}>
            {expense.map(e => {
              const pct = (e.amt / expTotal) * 100;
              return (
                <div key={e.cat}>
                  <div className="row" style={{ justifyContent: "space-between" }}>
                    <span>{e.cat}</span>
                    <span className="num" style={{ fontWeight: 600 }}>{formatBaht(e.amt)}</span>
                  </div>
                  <div style={{ height: 6, background: "var(--bg-2)", borderRadius: 3, marginTop: 4 }}>
                    <div style={{ height: "100%", width: pct + "%", background: "var(--accent)", borderRadius: 3 }}/>
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{ marginTop: 16, padding: 12, background: "var(--ok-soft)", borderRadius: 10 }}>
            <div style={{ color: "var(--ok)", fontSize: "0.85rem", fontWeight: 600 }}>กำไรสุทธิเดือนนี้</div>
            <div className="num" style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--ok)" }}>{formatBaht(total + 320000 - expTotal)}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Reports = Reports;