import { useState } from "react";
import { revokeOtherSession, signOutEverywhere } from "~/fns/account-security";
import { resetAnalytics } from "~/lib/analytics";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";

type Session = {
  id: string;
  ip: string | null;
  userAgent: string | null;
  createdAt: number;
  lastSeenAt: number;
  current: boolean;
};

/** A short, human label for a browser user-agent string. */
function describeAgent(userAgent: string | null): string {
  if (!userAgent) return "Unknown browser";
  const browser = /Firefox\//.test(userAgent)
    ? "Firefox"
    : /Edg\//.test(userAgent)
      ? "Edge"
      : /OPR\//.test(userAgent)
        ? "Opera"
        : /Chrome\//.test(userAgent)
          ? "Chrome"
          : /Safari\//.test(userAgent)
            ? "Safari"
            : "Browser";
  const platform = /iPhone|iPad/.test(userAgent)
    ? "iOS"
    : /Android/.test(userAgent)
      ? "Android"
      : /Mac OS X/.test(userAgent)
        ? "macOS"
        : /Windows/.test(userAgent)
          ? "Windows"
          : /Linux/.test(userAgent)
            ? "Linux"
            : null;
  return platform ? `${browser} on ${platform}` : browser;
}

export function SessionsPanel({ sessions }: { sessions: Session[] }) {
  const signOut = useAction(signOutEverywhere);
  const revoke = useAction(revokeOtherSession);
  const [revokeTokens, setRevokeTokens] = useState(false);

  return (
    <Panel title="Sessions">
      <div className="space-y-4 p-4 text-sm">
        <p className="text-kumo-subtle">
          Every browser or device currently signed in to your account. Sessions end after 14 days without use and 30
          days at most.
        </p>
        <ErrorBanner message={signOut.error ?? revoke.error} />
        <ul className="divide-y divide-kumo-hairline rounded-md border border-kumo-hairline">
          {sessions.map((session) => (
            <li key={session.id} className="flex items-center gap-3 px-3 py-2.5">
              <div className="min-w-0 flex-1">
                <div className="font-medium text-kumo-strong">
                  {describeAgent(session.userAgent)}
                  {session.current && <span className="ml-2 text-xs font-normal text-emerald-400">This device</span>}
                </div>
                <div className="text-xs text-kumo-subtle">
                  {session.ip ?? "unknown address"} · signed in <RelativeTime timestamp={session.createdAt} /> · last
                  active <RelativeTime timestamp={session.lastSeenAt} />
                </div>
              </div>
              {!session.current && (
                <Button
                  variant="danger"
                  size="sm"
                  pending={revoke.pending}
                  onClick={() => revoke.run({ data: { id: session.id } })}
                >
                  Sign out
                </Button>
              )}
            </li>
          ))}
        </ul>
        <div className="flex items-center justify-between gap-4 text-kumo-subtle">
          <div className="space-y-2">
            <p>Sign out of every other browser and device. This one stays signed in.</p>
            <label className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={revokeTokens}
                onChange={(event) => setRevokeTokens(event.currentTarget.checked)}
              />
              Also revoke all personal access tokens and MCP/agent tokens
            </label>
          </div>
          <Button
            variant="danger"
            pending={signOut.pending}
            onClick={() => void signOut.run({ data: { revokeTokens } }).then((result) => result && resetAnalytics())}
          >
            Sign out everywhere else
          </Button>
        </div>
      </div>
    </Panel>
  );
}