/* global window, React */

window.Forecast = function Forecast({ ctx }) {
  const Icon = window.Icon;
  const [scenario, setScenario] = React.useState("base");

  const base = window.FORECAST_SCENARIOS.find(s => s.id === "base");
  const current = window.FORECAST_SCENARIOS.find(s => s.id === scenario);
  const pct = (base.confidence);

  return (
    <window.Screen
      title="Forecast"
      back={true}
      onBack={() => ctx.go("profile")}
      right={<button className="icon-btn" onClick={() => ctx.notify("Refresh model")}><Icon.Refresh size={18} /></button>}
    >
      {/* Hero forecast */}
      <div className="m-card" style={{ marginBottom: 14, padding: 18, textAlign: "center" }}>
        <div className="label-tiny">Forecast Q2 · {current.name}</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 700, marginTop: 6 }}>
          {window.fmtShort(current.value)}
        </div>
        <div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 14 }}>
          Confidence {current.confidence}% · {current.assumption}
        </div>
        <window.Dial pct={pct} label="Confidence" sub="ML model v2.1" />
      </div>

      {/* Scenarios */}
      <window.MSection title="Skenario Forecast">
        {window.FORECAST_SCENARIOS.map(s => (
          <div
            key={s.id}
            className={`scenario-card ${scenario === s.id ? "active" : ""}`}
            onClick={() => setScenario(s.id)}
          >
            <div className="sh">
              <div className="sn">{s.name}</div>
              <window.StatusPill tone={s.id === "opt" ? "emerald" : s.id === "base" ? "primary" : "warning"}>
                {s.confidence}% conf
              </window.StatusPill>
            </div>
            <div className="sv">{window.fmtShort(s.value)}</div>
            <div className="sa">{s.assumption}</div>
          </div>
        ))}
      </window.MSection>

      {/* Forecast accuracy */}
      <window.MSection title="Akurasi Historical" sub="6 bulan terakhir">
        <div className="m-card">
          {window.FORECAST_ACCURACY.map((f, i) => (
            <div key={i} className="ch-row">
              <div className="ch-body">
                <div className="between">
                  <div className="ch-name">{f.m}</div>
                  <div className="ch-val">{window.fmtShort(f.actual)}</div>
                </div>
                <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 2 }}>
                  Forecast {window.fmtShort(f.forecast)} ·
                  <span style={{ color: Math.abs(f.variance) <= 3 ? "var(--emerald)" : "var(--warning)", fontWeight: 600, marginLeft: 4 }}>
                    {f.variance >= 0 ? "+" : ""}{f.variance}% variance
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </window.MSection>

      {/* Insights */}
      <window.MSection title="Insights">
        {window.FORECAST_INSIGHTS.map((ins, i) => (
          <div key={i} className={`insight ${ins.tone === "warn" ? "warn" : ""}`}>
            <div className="insight-icon">
              {ins.tone === "warn" ? <Icon.Bell size={16} /> : <Icon.Star size={16} />}
            </div>
            <div>
              <div className="ti">{ins.title}</div>
              <div className="tx">{ins.text}</div>
            </div>
          </div>
        ))}
      </window.MSection>
    </window.Screen>
  );
};