"use client";
// Who's online in T5DE, kept live: the page renders the list, then this follows the API's event stream.
import Link from "next/link";
import { useEffect, useState } from "react";
import { Initial, Outfit, Tag } from "@/components/status";
import { Since } from "@/components/time";
import type { OnlineEntry } from "@/lib/api";

export function OnlineList({ initial, moderator = false }: { initial: OnlineEntry[]; moderator?: boolean }) {
  const [online, setOnline] = useState(initial);
  const [live, setLive] = useState(false);

  useEffect(() => {
    const events = new EventSource("/api/v1/online/events");
    events.addEventListener("online", (e) => {
      setOnline((JSON.parse(e.data) as { online: OnlineEntry[] }).online);
      setLive(true);
    });
    events.addEventListener("error", () => setLive(false));
    return () => events.close();
  }, []);

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2 text-xs text-muted-foreground">
        <span
          className={live ? "size-2 rounded-full bg-emerald-500" : "size-2 rounded-full bg-muted-foreground/40"}
          aria-hidden
        />
        {live ? "Live" : "Connecting…"}
        <span className="ml-auto tabular-nums">
          {online.length} {online.length === 1 ? "account" : "accounts"}
        </span>
      </div>
      {online.length === 0 ? (
        <p className="py-6 text-sm text-muted-foreground">Nobody is showing that they&apos;re online right now.</p>
      ) : (
        <ul className="divide-y">
          {online.map((o) => (
            <li key={o.imvuId} className="flex gap-4 py-4 first:pt-0 last:pb-0">
              <Initial name={o.username} />
              <div className="min-w-0 flex-1 space-y-3">
                <div className="flex flex-wrap items-center gap-2">
                  <span className="font-medium">{o.username}</span>
                  {o.badge && <Tag tone="strong">T5DE</Tag>}
                  <Tag tone="online" dot>
                    online since <Since iso={o.since} />
                  </Tag>
                  {o.hidden && <Tag>hidden: moderators only</Tag>}
                  {moderator && o.adult && <Tag tone="adult">adult</Tag>}
                  {moderator && o.personId && (
                    <Link
                      href={`/console/people/${o.personId}`}
                      className="text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground"
                    >
                      person
                    </Link>
                  )}
                </div>
                <Outfit items={o.outfit} />
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}