"use client";

import { RefreshCw } from "lucide-react";
import type { StatusSummaryInfo } from "@/lib/types";

interface StatusHeaderProps {
  summary: StatusSummaryInfo | null;
  lastUpdated: string | null;
  onRefresh: () => void;
}

export default function StatusHeader({ summary, lastUpdated, onRefresh }: StatusHeaderProps) {
  const totalAmber = summary ? summary.hosts.amber + summary.services.amber + summary.network.amber + summary.sites.amber : 0;
  const totalRed = summary ? summary.hosts.red + summary.services.red + summary.network.red + summary.sites.red : 0;

  const statusText = !summary ? "Loading..." :
    totalRed > 0 ? `${totalRed} critical, ${totalAmber} warning${totalAmber !== 1 ? "s" : ""}` :
    totalAmber > 0 ? `${totalAmber} warning${totalAmber !== 1 ? "s" : ""}` :
    "All systems operational";

  const statusColor = totalRed > 0 ? "text-red-400" : totalAmber > 0 ? "text-amber-400" : "text-emerald-400";

  const ago = lastUpdated ? Math.floor((Date.now() - new Date(lastUpdated).getTime()) / 1000) : null;

  return (
    <div className="flex items-center justify-between mb-4 px-2">
      <div>
        <h2 className="text-lg font-semibold font-mono tracking-wide">ARK BRIDGE — STATUS</h2>
        <p className={`text-sm font-mono ${statusColor}`}>{statusText}</p>
      </div>
      <div className="flex items-center gap-3 text-xs text-zinc-500">
        {ago !== null && <span>Updated {ago}s ago</span>}
        <button onClick={onRefresh} className="p-1.5 rounded-md hover:bg-zinc-800 transition-colors">
          <RefreshCw className="w-4 h-4" />
        </button>
      </div>
    </div>
  );
}
