"use client";

import { useEffect, useState } from "react";
import Link from "next/link";

interface AdminSession {
  id: string;
  threadTs: string;
  channel: string;
  model: string;
  provider: string;
  summary: string | null;
  persistUntil: string | null;
  totalCost: number;
  messageCount: number;
  createdAt: string;
  lastActivity: string;
  containerName: string | null;
  user: { id: string; email: string; name: string };
}

function timeAgo(date: string) {
  const seconds = Math.floor((Date.now() - new Date(date).getTime()) / 1000);
  if (seconds < 60) return "just now";
  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
  return `${Math.floor(seconds / 86400)}d ago`;
}

export default function AdminSessionsPage() {
  const [sessions, setSessions] = useState<AdminSession[]>([]);
  const [loading, setLoading] = useState(true);

  async function load() {
    const res = await fetch("/api/admin/sessions");
    if (res.ok) setSessions(await res.json());
    setLoading(false);
  }

  useEffect(() => { load(); }, []);

  async function releaseSession(id: string) {
    if (!confirm("Release this session?")) return;
    await fetch(`/api/sessions/${id}`, { method: "DELETE" });
    await load();
  }

  if (loading) return <div><p className="text-muted">Loading...</p></div>;

  return (
    <div>
      <div className="flex gap-4 mb-6">
        <h1 style={{ opacity: 0.5 }}>
          <Link href="/admin/users" style={{ color: "inherit" }}>Users</Link>
        </h1>
        <h1>All Sessions</h1>
      </div>

      {sessions.length === 0 ? (
        <p className="text-muted">No active sessions.</p>
      ) : (
        sessions.map((s) => (
          <div key={s.id} className="card mb-4">
            <div className="flex justify-between items-center mb-4">
              <div>
                <strong>{s.summary || "Untitled session"}</strong>
                <span className="text-muted text-sm" style={{ marginLeft: "0.75rem" }}>
                  {s.user.name} &middot; {s.model}/{s.provider}
                </span>
              </div>
              <div className="flex gap-2 items-center">
                {s.containerName && <span className="badge badge-success">Running</span>}
                {s.persistUntil && <span className="badge badge-warning">Persisted</span>}
                <button className="btn btn-danger" onClick={() => releaseSession(s.id)}>Release</button>
              </div>
            </div>
            <div className="flex gap-4 text-sm text-muted">
              <span>{s.messageCount} messages</span>
              <span>${s.totalCost.toFixed(4)}</span>
              <span>Active {timeAgo(s.lastActivity)}</span>
            </div>
          </div>
        ))
      )}
    </div>
  );
}