"use client";

import { useHealth, useConfig, useSessions } from "@/lib/hooks";
import { AlertTriangle } from "lucide-react";

export function StatusCard() {
  const { data: health, isError: healthError } = useHealth();
  const { data: config } = useConfig();
  const { data: sessions } = useSessions(10);

  const online = health?.status === "ok";
  const model = config?.model || "—";
  const activeSessions = sessions?.items?.filter((s) => !s.ended_at).length || 0;

  if (healthError) {
    return (
      <div className="card p-4 flex items-center gap-3">
        <AlertTriangle size={18} style={{ color: "#ff3b30" }} />
        <div>
          <div className="text-[13px] font-medium" style={{ color: "#ff3b30" }}>WebAPI Unreachable</div>
          <div className="text-[11px]" style={{ color: "var(--text-3)" }}>
            Check that hermes-webapi is running on port 8643
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="card p-4 flex items-center justify-between">
      <div>
        <div className="text-[13px] font-mono" style={{ color: "var(--text-2)" }}>
          {model}
        </div>
        {activeSessions > 0 && (
          <div className="text-[11px] mt-0.5" style={{ color: "var(--accent)" }}>
            {activeSessions} active session{activeSessions !== 1 ? "s" : ""}
          </div>
        )}
      </div>
      <div className="flex items-center gap-2">
        <div
          className="w-2 h-2 rounded-full"
          style={{ background: online ? "#34c759" : "#ff3b30" }}
        />
        <span className="text-xs" style={{ color: online ? "#34c759" : "#ff3b30" }}>
          {online ? "Online" : "Offline"}
        </span>
      </div>
    </div>
  );
}