// app/page.tsx
"use client";                         // <<< mandatory for hooks

import type { NextPage } from "next";
import axios from "axios";
import { useEffect, useState } from "react";

/* -------------------------------------------------
   Shape of the JSON returned by the Rust backend
   ------------------------------------------------- */
type Summary = {
  policy: string;
  description: string;
  data_collected: string[];
  rights: string[];
};

/* -------------------------------------------------
   The page component
   ------------------------------------------------- */
const Home: NextPage = () => {
  // ── State for the fetched summary
  const [summary, setSummary] = useState<Summary | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  // ── Fetch once when the component mounts
  useEffect(() => {
    // axios
      // .get("http://localhost:8000/privacy-summary")
      axios.get("/api/privacy-summary")
      .then((r) => {
        setSummary(r.data);
        setError(null);
      })
      .catch((e) => {
        console.error(e);
        setError("Could not load privacy summary");
        setSummary(null);
      })
      .finally(() => setLoading(false));
  }, []); // empty dependency array → run once

  // ── Render
  return (
    <main style={{ padding: "2rem", maxWidth: "800px", margin: "0 auto" }}>
      {/* ------------------- Header ------------------- */}
      <h1>Zero‑Profiling News Portal</h1>

      {/* ------------------- Loading / Error ------------------- */}
      {loading && <p>Loading privacy summary…</p>}
      {error && <p style={{ color: "red" }}>{error}</p>}

      {/* ------------------- Privacy Summary ------------------- */}
      {summary && (
        <section style={{ marginTop: "1.5rem" }}>
          <h2>Privacy Summary</h2>
          <pre
            style={{
              background: "#f5f5f5",
              padding: "1rem",
              borderRadius: "4px",
              overflowX: "auto",
            }}
          >
{JSON.stringify(summary, null, 2)}
          </pre>
        </section>
      )}

      {/* ------------------- Placeholder for article list ------------------- */}
      {/* In a real app you would fetch a static JSON list from a CDN here */}
      {/* <section>…article list…</section> */}

      {/* ------------------- Recommendation Engine blurb ------------------- */}
      <section style={{ marginTop: "2rem" }}>
        <h2>Local Recommendation Engine</h2>
        <p>
          The browser builds a deterministic hash of article IDs; no data ever
          leaves the client.
        </p>
      </section>
    </main>
  );
};

export default Home;
