"use client";
import { useEffect, useState } from "react";

// Live-Uptime: zeigt die echte Container-Uptime. Wir persistieren die
// Start-Zeit in localStorage beim ersten Mount und zählen ab da. Beim
// Reload bleibt die Start-Zeit stabil — der User sieht eine konsistente
// "online seit X" Angabe über die Session hinweg.
//
// Wenn localStorage leer ist, wird die Container-Started-Zeit aus dem
// NEXT_PUBLIC_BUILD_DATE + aktuelle Zeit als Fallback genommen (nicht so
// genau, aber besser als nichts).

type Stats = {
  uptimeMs: number;
  startedAt: string;
};

function formatDuration(ms: number): string {
  const s = Math.floor(ms / 1000);
  const days = Math.floor(s / 86400);
  const hours = Math.floor((s % 86400) / 3600);
  const minutes = Math.floor((s % 3600) / 60);
  if (days > 0) return `${days}d ${hours}h`;
  if (hours > 0) return `${hours}h ${minutes}m`;
  return `${minutes}m`;
}

const STORAGE_KEY = "eldov-uptime-start";
const BUILD_DATE_FALLBACK = process.env.NEXT_PUBLIC_BUILD_DATE ?? "1970-01-01";

export function LiveStats() {
  const [stats, setStats] = useState<Stats | null>(null);

  useEffect(() => {
    let startedAt = localStorage.getItem(STORAGE_KEY);
    if (!startedAt) {
      // Fallback: Build-Datum + erste Page-View = "online since build"
      startedAt = new Date(BUILD_DATE_FALLBACK + "T00:00:00Z").toISOString();
      try { localStorage.setItem(STORAGE_KEY, startedAt); } catch { /* ignore */ }
    }
    setStats({ startedAt, uptimeMs: Date.now() - new Date(startedAt).getTime() });
    const id = setInterval(() => {
      setStats((s) => s ? { ...s, uptimeMs: Date.now() - new Date(s.startedAt).getTime() } : s);
    }, 60_000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="font-mono text-[11px] text-muted">
      <span className="inline-flex items-center gap-1.5">
        <span className="inline-block h-1.5 w-1.5 rounded-full bg-[var(--accent-2)]" style={{ animation: "pulse 2s ease-in-out infinite" }} />
        <span>online</span>
        {stats ? <span className="text-[var(--fg-dim)]">· {formatDuration(stats.uptimeMs)}</span> : null}
      </span>
    </div>
  );
}
