// Analytics page — bill calc + comparisons + anomalies
const AnalyticsPage = ({ t, lang, toast }) => {
  const D = window.MOCK_DATA;
  const [rates, setRates] = React.useState(
    D.utility_types.reduce((a, u) => ({ ...a, [u.id]: u.rate }), {})
  );

  const currentUsage = { elec: 51200, water: 2180, net: 1000, phone: 3280 };
  const months = lang === "th" ? D.monthly.months_th : D.monthly.months;

  const billByType = D.utility_types.map(u => ({
    ...u,
    usage: currentUsage[u.id],
    bill: currentUsage[u.id] * rates[u.id],
  }));
  const totalBill = billByType.reduce((s, b) => s + b.bill, 0);

  // Building comparison – synthesized
  const compareBuildings = [
    { id: "hq", data: [3800, 4100, 4300, 4400, 4600, 4900] },
    { id: "b1", data: [2900, 3000, 3200, 3300, 3450, 3700] },
    { id: "b2", data: [2300, 2400, 2500, 2600, 2700, 2900] },
    { id: "gh", data: [ 800,  850,  870,  900,  950, 1000] },
    { id: "wh", data: [1600, 1700, 1750, 1850, 1900, 2000] },
  ];

  return (
    <div className="page" data-screen-label="Analytics">
      <div className="page-head">
        <div>
          <h1 className="page-title">{t("an_title")}</h1>
          <p className="page-sub">{t("an_sub")}</p>
        </div>
        <div className="header-actions">
          <button className="btn"><Icon name="download" className="ico" />{t("export_csv")}</button>
        </div>
      </div>

      <div className="kpi-grid" style={{ gridTemplateColumns: "1.5fr 1fr 1fr" }}>
        <div className="kpi">
          <div className="kpi-label"><Icon name="sparkle" size={14} style={{ color: "var(--accent)" }} /><span>{t("an_estimated_bill")}</span></div>
          <div className="kpi-value num">฿{Math.round(totalBill).toLocaleString()}</div>
          <div className="kpi-delta"><span className="up">▲ 6.2%</span><span>{t("kpi_vs_prev")}</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><Icon name="gauge" size={14} style={{ color: "var(--text-3)" }} /><span>{t("an_total_consumption")}</span></div>
          <div className="kpi-value num">{(currentUsage.elec / 1000).toFixed(1)}k <span className="unit">kWh + …</span></div>
          <div className="kpi-delta"><span style={{ color: "var(--text-3)" }}>{lang === "en" ? "Combined utilities" : "รวมทุกประเภท"}</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><Icon name="arrowUp" size={14} style={{ color: "var(--accent)" }} /><span>{t("an_yoy")}</span></div>
          <div className="kpi-value num">+12.4%</div>
          <div className="kpi-delta"><span style={{ color: "var(--text-3)" }}>{lang === "en" ? "vs May 2025" : "เทียบ พ.ค. 2568"}</span></div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 14 }}>
        <div className="card-head">
          <div>
            <h3 className="card-title">{t("an_rate")}</h3>
            <p className="card-sub">{t("an_rate_help")}</p>
          </div>
        </div>
        <div className="card-body">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
            {billByType.map(u => (
              <div key={u.id} style={{ border: "1px solid var(--line)", borderRadius: 10, padding: 14, display: "flex", flexDirection: "column", gap: 6, background: "var(--panel)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5, fontWeight: 600 }}>
                  <span style={{ width: 8, height: 8, background: u.color, borderRadius: 2 }}></span>
                  {lang === "th" ? u.label_th : u.label_en}
                </div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
                  <span style={{ color: "var(--text-3)", fontSize: 12 }}>฿</span>
                  <input
                    type="number"
                    step="0.01"
                    value={rates[u.id]}
                    onChange={(e) => setRates({ ...rates, [u.id]: Number(e.target.value) })}
                    style={{ border: "none", outline: "none", fontSize: 18, fontWeight: 700, width: "100%", background: "transparent", fontVariantNumeric: "tabular-nums" }}
                  />
                  <span style={{ color: "var(--text-3)", fontSize: 11.5 }}>/ {lang === "th" ? u.unit_th : u.unit_en}</span>
                </div>
                <div style={{ borderTop: "1px dashed var(--line-soft)", paddingTop: 8, marginTop: 4 }}>
                  <div style={{ fontSize: 11, color: "var(--text-3)", letterSpacing: "0.06em", textTransform: "uppercase" }}>
                    {lang === "en" ? "Bill, this month" : "ค่าใช้จ่ายเดือนนี้"}
                  </div>
                  <div style={{ fontSize: 16, fontWeight: 700, fontVariantNumeric: "tabular-nums", marginTop: 2 }}>
                    ฿{Math.round(u.bill).toLocaleString()}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="row halves">
        <div className="card">
          <div className="card-head">
            <div>
              <h3 className="card-title">{t("an_compare")}</h3>
              <p className="card-sub">{t("an_compare_sub")}</p>
            </div>
          </div>
          <div className="card-body">
            <BarChart
              groups={months.slice(6)}
              series={compareBuildings.map((b, i) => ({
                name: b.id,
                color: ["#EA580C", "#0EA5E9", "#10B981", "#A855F7", "#F59E0B"][i],
                values: b.data
              }))}
              yFormat={(v) => v >= 1000 ? (v / 1000).toFixed(1) + "k" : v}
            />
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 10, justifyContent: "center" }}>
              {compareBuildings.map((b, i) => {
                const bld = D.buildings.find(x => x.id === b.id);
                return (
                  <div key={b.id} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12 }}>
                    <span style={{ width: 10, height: 10, background: ["#EA580C", "#0EA5E9", "#10B981", "#A855F7", "#F59E0B"][i], borderRadius: 2 }}></span>
                    <span style={{ color: "var(--text-2)" }}>{lang === "th" ? bld.label_th : bld.label_en}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <h3 className="card-title">{t("an_anomalies")}</h3>
              <p className="card-sub">{t("an_anomalies_sub")}</p>
            </div>
            <span className="pill admin"><span className="pdot"></span>{D.anomalies.length}</span>
          </div>
          <div className="section-list">
            {D.anomalies.map((a, i) => {
              const m = D.meters.find(x => x.id === a.meter);
              const ut = D.utility_types.find(x => x.id === m.type);
              return (
                <div key={i} className="section-list-item">
                  <div>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span className="cell-mono cell-strong">{a.meter}</span>
                      <span className="type-badge">
                        <span className="swatch" style={{ background: ut.color }}></span>
                        {lang === "th" ? ut.label_th : ut.label_en}
                      </span>
                    </div>
                    <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 4 }}>
                      <span style={{ fontFamily: "var(--font-mono)" }}>{a.date}</span> · {lang === "th" ? a.note_th : a.note_en}
                    </div>
                  </div>
                  <button className="btn subtle"><Icon name="eye" className="ico" />{lang === "en" ? "Review" : "ตรวจสอบ"}</button>
                </div>
              );
            })}
            <div className="section-list-item">
              <div style={{ fontSize: 12, color: "var(--text-3)" }}>
                {lang === "en"
                  ? "Anomaly checks run nightly · admin alerts → nathanon.t@gmail.com"
                  : "ตรวจหาความผิดปกติทุกคืน · แจ้งเตือนผู้ดูแล → nathanon.t@gmail.com"}
              </div>
              <Icon name="mail" style={{ color: "var(--text-3)" }} />
            </div>
          </div>
        </div>
      </div>

      <div className="card" style={{ marginTop: 14 }}>
        <div className="card-head">
          <div>
            <h3 className="card-title">{lang === "en" ? "12-month consumption forecast" : "ประมาณการการใช้ 12 เดือน"}</h3>
            <p className="card-sub">{lang === "en" ? "Projection based on linear trend + seasonality" : "พยากรณ์จากแนวโน้มและฤดูกาล"}</p>
          </div>
        </div>
        <div className="card-body">
          <LineChart
            labels={months}
            series={[
              { name: t("kpi_electricity"), values: D.monthly.elec.map(v => v / 1000), color: "#EA580C", fill: true },
              { name: lang === "en" ? "Forecast" : "พยากรณ์", values: D.monthly.elec.map((v, i) => (v * (1 + i * 0.005)) / 1000), color: "#171717" },
            ]}
            yFormat={(v) => v + "k"}
          />
        </div>
      </div>
    </div>
  );
};

window.AnalyticsPage = AnalyticsPage;