"use client";

import { Broadcast } from "@phosphor-icons/react/ssr";
import type { Config } from "@/lib/config/schema";
import { useConfigSubscription, useConnectionStatus } from "@/lib/ws/client";
import { GroupSection } from "./GroupSection";
import { ThemeToggle } from "./ThemeToggle";
import { PulseMark } from "./PulseMark";
import { ToastStack } from "./Toast";

function LiveIndicator() {
  const status = useConnectionStatus();
  const label = status === "connected" ? "live" : status === "reconnecting" ? "reconnecting…" : "connecting…";

  return (
    <div className="pn-live-label flex items-center gap-1.5 text-xs text-fg-muted">
      <Broadcast size={15} className={status === "connected" ? "text-accent" : "text-status-degraded"} aria-hidden />
      <span>{label}</span>
    </div>
  );
}

export function Dashboard({ config: initialConfig }: { config: Config }) {
  const config = useConfigSubscription(initialConfig);

  return (
    <div className="relative min-h-screen">
      <div className="sticky top-0 z-20 border-b border-border bg-bg/70 backdrop-blur-lg">
        <div className="mx-auto flex max-w-6xl items-center gap-4 px-6 py-3">
          <div className="mr-auto flex items-center gap-2.5">
            <PulseMark size={30} />
            <span className="font-display text-lg font-semibold tracking-tight text-fg">
              {config.settings.title}
            </span>
          </div>
          <LiveIndicator />
          <ThemeToggle />
        </div>
      </div>
      <main className="mx-auto max-w-6xl px-6 pt-2 pb-20">
        {config.groups.map((group, groupIndex) => (
          <GroupSection key={group.name} group={group} groupIndex={groupIndex} />
        ))}
      </main>
      <ToastStack />
    </div>
  );
}