"use client";

import { useState, useEffect } from "react";

type Stats = { total: number; pinned: number; latest: string | null; colors: { color: string; count: number }[] };

export default function StatsBar() {
  const [stats, setStats] = useState<Stats | null>(null);
  const [ms, setMs] = useState<number | null>(null);

  useEffect(() => {
    fetch("/api/stats").then((r) => r.json()).then((j) => {
      if (j.ok) { setStats(j.data); setMs(j.ms ?? null); }
    });
  }, []);

  if (!stats) return null;

  return (
    <div className="flex flex-wrap gap-x-4 gap-y-1 mb-4 text-xs text-zinc-500">
      <span>📊 {stats.total} notes</span>
      <span>📌 {stats.pinned} pinned</span>
      {stats.latest && <span className="hidden sm:inline">🕐 {new Date(stats.latest).toLocaleString()}</span>}
      {ms !== null && (
        <span className="hidden sm:inline text-zinc-600">⚡ {ms}ms</span>
      )}
      <div className="flex gap-1 ml-auto">
        {stats.colors.map((c) => (
          <span
            key={String(c.color)}
            className="w-3 h-3 rounded-full inline-block"
            style={{ backgroundColor: String(c.color) }}
            title={`${c.count}`}
          />
        ))}
      </div>
    </div>
  );
}