"use client";

import Link from "next/link";
import { useApi } from "@/lib/api";
import { ago, fmtDate, truncate } from "@/lib/format";
import { Empty, Panel, Skeleton, StatusPill, Table, Tag } from "@/components/ui";

interface Row {
  session_id: string;
  platform: string;
  account_alias: string;
  mode: string | null;
  goal: string | null;
  started_at: string;
  ended_at: string | null;
  health: string;
  actions: number;
  entities: number;
  schemas: number;
  patterns: number;
  ended_because: string | null;
}

export default function Sessions() {
  const { data, loading } = useApi<Row[]>("/sessions?limit=200", { refreshMs: 10_000 });
  return (
    <div className="space-y-4">
      <h1 className="text-2xl font-semibold tracking-tight">Sessions</h1>
      <Panel pad={false}>
        <div className="p-4">
          {loading ? (
            <Skeleton rows={8} />
          ) : data?.length ? (
            <Table head={["status", "platform", "goal", "mode", "steps", "entities", "schemas", "learned", "started", "ended"]}>
              {data.map((r) => (
                <tr key={r.session_id}>
                  <td>
                    <StatusPill status={r.ended_at ? (r.health === "auth_required" ? "auth_required" : "done") : r.health} />
                  </td>
                  <td>
                    <Tag>{r.platform}</Tag>
                    <div className="text-[10px] text-dim mono">{r.account_alias}</div>
                  </td>
                  <td className="max-w-[420px]">
                    <Link href={`/sessions/${r.session_id}`} className="hover:text-cyan">
                      {truncate(r.goal ?? "(no goal)", 90)}
                    </Link>
                    <div className="text-[10px] text-dim mono">{r.session_id}</div>
                  </td>
                  <td className="text-fg-2">{r.mode ?? "—"}</td>
                  <td className="mono">{r.actions}</td>
                  <td className="mono">{r.entities}</td>
                  <td className="mono">{r.schemas}</td>
                  <td className="mono">{r.patterns}</td>
                  <td className="text-dim whitespace-nowrap" title={fmtDate(r.started_at)}>
                    {ago(r.started_at)}
                  </td>
                  <td className="text-dim whitespace-nowrap">{r.ended_because ?? (r.ended_at ? "—" : "running")}</td>
                </tr>
              ))}
            </Table>
          ) : (
            <Empty>No sessions yet.</Empty>
          )}
        </div>
      </Panel>
    </div>
  );
}