"use client";

import { Suspense, useEffect, useState } from "react";
import { AppShell, ScreenHeader, useWorkspaceIdParam } from "../../components/AppShell";
import { api } from "../../lib/api";

function AnalyticsView() {
  const workspaceId = useWorkspaceIdParam();
  const [channelCount, setChannelCount] = useState(0);
  const [memberCount, setMemberCount] = useState(0);
  const [onlineCount, setOnlineCount] = useState(0);
  const [messageSamples, setMessageSamples] = useState(0);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!workspaceId) return;
    let cancelled = false;
    (async () => {
      setLoading(true);
      try {
        const [channelsRes, membersRes, presenceRes] = await Promise.all([
          api.listChannels(workspaceId),
          api.members(workspaceId),
          api.presenceSnapshot(workspaceId).catch(() => ({ presence: {} as Record<string, { status: string }> })),
        ]);
        const channels = channelsRes.channels;
        const members = membersRes.members;
        let samples = 0;
        for (const row of channels.slice(0, 5)) {
          const scroll = await api.scrollback(workspaceId, row.channel.id, { limit: 50 });
          samples += scroll.messages.length;
        }
        if (!cancelled) {
          setChannelCount(channels.length);
          setMemberCount(members.length);
          setOnlineCount(Object.values(presenceRes.presence).filter((p) => p.status === "active").length);
          setMessageSamples(samples);
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [workspaceId]);

  const cards = [
    { label: "Members", value: memberCount },
    { label: "Channels", value: channelCount },
    { label: "Online now", value: onlineCount },
    { label: "Recent messages sampled", value: messageSamples },
  ];

  return (
    <AppShell active="analytics" title="Analytics" subtitle="Workspace activity snapshot">
      <ScreenHeader
        title="Analytics"
        subtitle={loading ? "Collecting workspace stats…" : "Live snapshot from channels, members, and presence"}
      />
      <div className="screen-body">
        <div className="stats-grid">
          {cards.map((card) => (
            <div className="stat-card" key={card.label}>
              <div className="stat-value">{loading ? "—" : card.value}</div>
              <div className="stat-label">{card.label}</div>
            </div>
          ))}
        </div>
        <section className="screen-card" style={{ marginTop: 20 }}>
          <h2>About this view</h2>
          <p>
            Full retention charts and audit analytics are Phase 5 scope. This screen surfaces the numbers
            already available from the current API so the rail destination is useful today.
          </p>
        </section>
      </div>
    </AppShell>
  );
}

export default function AnalyticsPage() {
  return (
    <Suspense fallback={<main className="page"><div className="empty-state">Loading analytics…</div></main>}>
      <AnalyticsView />
    </Suspense>
  );
}