"use client";
import * as React from "react";
import { LogOut, MonitorSmartphone } from "lucide-react";
import { authClient, useSession } from "@/lib/auth-client";
import { recordAuditFromClient } from "@/actions/account";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Alert } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import { EmptyState } from "@/components/ui/empty-state";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { formatDate, timeAgo, truncate } from "@/lib/format";

interface SessionRow {
  id: string;
  token: string;
  ipAddress?: string | null;
  userAgent?: string | null;
  createdAt: Date | string;
  expiresAt: Date | string;
}

/** Turn a UA string into something a human can recognise, without a UA-parser dependency. */
function describeAgent(ua: string | null | undefined): string {
  if (!ua) return "Unknown device";
  const browser = /Edg\//.test(ua) ? "Edge" : /OPR\//.test(ua) ? "Opera" : /Chrome\//.test(ua) ? "Chrome" : /Firefox\//.test(ua) ? "Firefox" : /Safari\//.test(ua) ? "Safari" : /curl|python|node|okhttp/i.test(ua) ? "API client" : "Browser";
  const os = /iPhone|iPad/.test(ua) ? "iOS" : /Android/.test(ua) ? "Android" : /Mac OS X/.test(ua) ? "macOS" : /Windows/.test(ua) ? "Windows" : /Linux/.test(ua) ? "Linux" : "";
  return os ? `${browser} · ${os}` : browser;
}

export function ActiveSessions() {
  const { data: current } = useSession();
  const [sessions, setSessions] = React.useState<SessionRow[] | null>(null);
  const [error, setError] = React.useState<string | null>(null);
  const [busyToken, setBusyToken] = React.useState<string | null>(null);
  const [busyAll, setBusyAll] = React.useState(false);

  const [reloadKey, setReloadKey] = React.useState(0);
  const load = () => setReloadKey((k) => k + 1);

  React.useEffect(() => {
    let cancelled = false;
    authClient.listSessions().then(({ data, error }) => {
      if (cancelled) return;
      if (error) {
        setError(error.message ?? "Could not load sessions.");
        setSessions([]);
        return;
      }
      const rows = ((data ?? []) as SessionRow[]).slice().sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
      setSessions(rows);
    });
    return () => {
      cancelled = true;
    };
  }, [reloadKey]);

  const currentToken = current?.session?.token;

  async function revoke(token: string) {
    setError(null);
    setBusyToken(token);
    const { error } = await authClient.revokeSession({ token });
    if (error) setError(error.message ?? "Could not revoke the session.");
    else await recordAuditFromClient("session.revoked", { scope: "one" }).catch(() => {});
    setBusyToken(null);
    load();
  }

  async function revokeOthers() {
    setError(null);
    setBusyAll(true);
    const { error } = await authClient.revokeOtherSessions();
    if (error) setError(error.message ?? "Could not sign out other devices.");
    else await recordAuditFromClient("session.revoked", { scope: "others" }).catch(() => {});
    setBusyAll(false);
    load();
  }

  const others = sessions?.filter((s) => s.token !== currentToken).length ?? 0;

  return (
    <div className="grid gap-3">
      {error ? <Alert variant="danger">{error}</Alert> : null}
      <div className="flex items-center justify-between gap-3">
        <p className="text-[13px] text-fg-muted">
          {sessions ? (
            <>
              <span className="font-mono tabular text-fg">{sessions.length}</span> active {sessions.length === 1 ? "session" : "sessions"}
              {others > 0 ? <> · {others} on other devices</> : null}
            </>
          ) : (
            "Loading sessions…"
          )}
        </p>
        <Button variant="outline" size="sm" onClick={revokeOthers} loading={busyAll} disabled={!sessions || others === 0}>
          <LogOut /> Sign out other devices
        </Button>
      </div>
      {sessions === null ? (
        <div className="grid gap-2 rounded-lg border border-border p-4">
          <Skeleton className="h-4 w-2/3" />
          <Skeleton className="h-4 w-1/2" />
          <Skeleton className="h-4 w-3/5" />
        </div>
      ) : sessions.length === 0 ? (
        <EmptyState compact icon={MonitorSmartphone} title="No sessions found" description="Sign in again to see your devices here." />
      ) : (
        <div className="overflow-hidden rounded-lg border border-border bg-bg-elevated shadow-xs">
          <Table>
            <TableHeader>
              <TableRow className="hover:bg-transparent">
                <TableHead>Device</TableHead>
                <TableHead>IP address</TableHead>
                <TableHead>Signed in</TableHead>
                <TableHead>Expires</TableHead>
                <TableHead className="text-right">
                  <span className="sr-only">Actions</span>
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {sessions.map((s) => {
                const isCurrent = s.token === currentToken;
                return (
                  <TableRow key={s.id}>
                    <TableCell>
                      <div className="flex flex-col gap-0.5">
                        <span className="flex items-center gap-2 font-medium">
                          {describeAgent(s.userAgent)}
                          {isCurrent ? (
                            <Badge variant="accent" dot>
                              This device
                            </Badge>
                          ) : null}
                        </span>
                        <span className="font-mono text-[11px] text-fg-subtle" title={s.userAgent ?? undefined}>
                          {s.userAgent ? truncate(s.userAgent, 64) : "—"}
                        </span>
                      </div>
                    </TableCell>
                    <TableCell className="font-mono text-[12.5px] tabular">{s.ipAddress || "—"}</TableCell>
                    <TableCell className="whitespace-nowrap tabular" title={formatDate(s.createdAt)}>
                      {timeAgo(s.createdAt)}
                    </TableCell>
                    <TableCell className="whitespace-nowrap tabular text-fg-muted">{formatDate(s.expiresAt, { timeStyle: undefined })}</TableCell>
                    <TableCell className="text-right">
                      {!isCurrent ? (
                        <Button variant="ghost" size="xs" onClick={() => revoke(s.token)} loading={busyToken === s.token}>
                          Revoke
                        </Button>
                      ) : null}
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </div>
      )}
    </div>
  );
}