const { useState } = React;

/* ——— Small UI helpers ——— */
function Badge({ children, tone = "default" }) {
  const styles = {
    display: "inline-flex",
    alignItems: "center",
    gap: 6,
    border: "1px solid var(--ring)",
    borderRadius: "999px",
    padding: "6px 10px",
    fontWeight: 700,
    fontSize: "12.5px",
    background: "#fff",
    color: "var(--text)",
  };
  if (tone === "info") {
    styles.background = "#F1F5FF";
    styles.border = "1px solid #C7D2FE";
    styles.color = "#1E3A8A";
  }
  if (tone === "warn") {
    styles.background = "#FFF7ED";
    styles.border = "1px solid #FED7AA";
    styles.color = "#7C2D12";
  }
  return <span style={styles}>{children}</span>;
}

function Pill({ children }) {
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        border: "1px solid var(--ring)",
        borderRadius: "999px",
        padding: "6px 10px",
        marginRight: 8,
        marginBottom: 8,
        background: "#fff",
        color: "var(--text)",
        fontWeight: 700,
        fontSize: "12.5px",
      }}
    >
      {children}
    </span>
  );
}

function Section({ title, children }) {
  return (
    <section className="card" style={{ marginTop: 16 }}>
      <h2 style={{ marginTop: 0, marginBottom: 8, fontSize: 18 }}>{title}</h2>
      <div>{children}</div>
    </section>
  );
}

function StatCard({ label, lines = [] }) {
  return (
    <div className="card" style={{ padding: 12 }}>
      <div className="muted">{label}</div>
      <div style={{ fontSize: 14, marginTop: 6 }}>
        {lines.map((line, i) => (
          <div key={i} style={{ marginTop: 2 }}>
            {line}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ——— The Card ——— */
function ForecastingCard() {
  const [links] = useState({
    // keep the original filename spelling if that's what you uploaded
    pdf: "/projects/forecasting/Forcasting.pdf",
  });

  return (
    <div>
      {/* Cover */}
      <header className="card card-cover">
        <div
          className="cover-head"
          style={{ backgroundImage: "url('./forecasting-cover.jpg')" }}
        >
          <div className="head-content">
            <div className="icon">📈</div>
            <div>
              <h1 className="title">
                Time-Series Forecasting — Model Sweep & Model Picking
              </h1>
              <div className="meta">
                ARIMA family • Linear/Seasonal/Polynomial/Ridge • MAE model
                selection
              </div>
            </div>
          </div>
        </div>

        {/* Intro */}
        <div className="card-body">
          <div
            style={{
              display: "flex",
              gap: 8,
              flexWrap: "wrap",
              marginBottom: 8,
            }}
          >
            <Badge tone="info">Multi-series benchmark</Badge>
            <Badge>R / forecast</Badge>
            <Badge>MAE comparison</Badge>
          </div>

          <p style={{ marginTop: 0, color: "#2C3445", lineHeight: 1.55 }}>
            Benchmarked multiple models across many series, then
            <strong> selected the best model per series by lowest MAE</strong>.
            AUTO.ARIMA generally dominated (best MAE around <strong>561</strong>
            ), while specific regressions worked on simpler patterns.
          </p>

          <div
            style={{
              marginTop: 12,
              display: "flex",
              justifyContent: "center",
              gap: 10,
              flexWrap: "wrap",
            }}
          >
            <a
              className="btn"
              href={links.pdf}
              target="_blank"
              rel="noopener noreferrer"
            >
              Open Notebook (PDF)
            </a>
          </div>
        </div>
      </header>

      {/* Models covered */}
      <Section title="Models Tested">
        <div style={{ display: "flex", flexWrap: "wrap" }}>
          <Pill>AUTO.ARIMA</Pill>
          <Pill>Optimized AUTO.ARIMA (cleaning / BoxCox)</Pill>
          <Pill>SARIMA</Pill>
          <Pill>ARIMA (log)</Pill>
          <Pill>Linear Regression</Pill>
          <Pill>Linear + Seasonality</Pill>
          <Pill>Polynomial Regression</Pill>
          <Pill>Segmented / Ridge Regression</Pill>
        </div>
      </Section>

      {/* Highlights per family */}
      <Section title="What Worked — and Where">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))",
            gap: 12,
          }}
        >
          <StatCard
            label="AUTO.ARIMA"
            lines={[
              <>
                Adaptive across many series; best MAE ≈ <strong>561</strong>.
              </>,
              <>Typically strongest baseline for most IDs.</>,
            ]}
          />
          <StatCard
            label="Optimized AUTO.ARIMA"
            lines={[
              <>
                Tried tsclean / BoxCox / BIC; some runs unstable → discarded.
              </>,
            ]}
          />
          <StatCard
            label="SARIMA"
            lines={[
              <>Often weaker on short/complex series; heavier to tune.</>,
            ]}
          />
          <StatCard
            label="ARIMA (log)"
            lines={[
              <>Helps with heteroscedastic series; overall below AUTO.ARIMA.</>,
            ]}
          />
          <StatCard
            label="Linear / Seasonal / Polynomial / Ridge"
            lines={[
              <>Useful on simple trends or clear seasonality.</>,
              <>Nonlinear fits (poly) can overfit; ridge helps stabilize.</>,
            ]}
          />
        </div>
      </Section>

      {/* Model selection strategy */}
      <Section title="Model Selection Strategy">
        <ul style={{ marginTop: 8 }}>
          <li>Compute MAE for every model on every series.</li>
          <li>
            For each <em>series_id</em>, keep the model with the lowest MAE.
          </li>
          <li>
            Export the mapping <em>series_id → best_model</em> for the final
            blend.
          </li>
        </ul>
      </Section>

      <div style={{ textAlign: "center", marginTop: 16 }}>
        <a className="btn ghost" href="/" rel="noopener">
          ← Back to Home
        </a>
      </div>
    </div>
  );
}

/* Mount */
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ForecastingCard />);