"use client";

import { useEffect, useState } from "react";
import { getPalaceStats, type PalaceStats as PalaceStatsData } from "@/lib/palace-client";

export function PalaceStats() {
  const [stats, setStats] = useState<PalaceStatsData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    void (async () => {
      try {
        const data = await getPalaceStats();
        setStats(data);
      } catch {
        setError("Failed to load palace stats");
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  if (loading) return <div style={{ color: "var(--nl-text-secondary)" }}>Loading stats...</div>;
  if (error) return <div style={{ color: "var(--nl-status-error)" }}>{error}</div>;
  if (!stats) return null;

  const items = [
    { label: "Wings", value: stats.wings },
    { label: "Rooms", value: stats.rooms },
    { label: "Memories", value: stats.memories },
    { label: "KG Triples", value: stats.kgTriples },
  ];

  return (
    <section className="surface-card" style={{ padding: "var(--nl-space-5)" }}>
      <div style={{ fontWeight: 700, fontSize: "var(--nl-text-lg)", marginBottom: "var(--nl-space-3)" }}>
        Memory Palace
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))", gap: "var(--nl-space-3)" }}>
        {items.map(({ label, value }) => (
          <div
            key={label}
            style={{
              textAlign: "center",
              padding: "var(--nl-space-3)",
              borderRadius: "var(--nl-radius-md)",
              border: "1px solid var(--nl-border-subtle)",
            }}
          >
            <div style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--nl-accent-primary)" }}>{value}</div>
            <div style={{ fontSize: "0.75rem", color: "var(--nl-text-secondary)" }}>{label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}
