import { useQuery, useQueryClient } from "@tanstack/react-query";
import { LogOut, Monitor } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router";

import { BackLink } from "@/client/components/ui/back-link";
import { Card } from "@/client/components/ui/card";
import { ConfirmButton } from "@/client/components/ui/confirm-button";
import { PageError } from "@/client/components/ui/page-error";
import { PageHeader } from "@/client/components/ui/page-header";
import { PanelRow } from "@/client/components/ui/row";
import { Skeleton } from "@/client/components/ui/skeleton";
import { useRequireSession } from "@/client/hooks/use-auth-guard";
import { authClient } from "@/client/lib/auth-client";
import { formatDateTime } from "@/client/lib/format";
import { queryKeys } from "@/client/lib/query";

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

const SessionRowsSkeleton = ({ count }: { count: number }) => (
  <div className="flex flex-col gap-3" aria-busy="true">
    {Array.from({ length: count }, (_, i) => (
      <div
        key={i}
        className="flex items-start justify-between rounded-xl border border-zinc-800/60 bg-zinc-900/40 px-4 py-3"
      >
        <div className="flex min-w-0 items-start gap-3">
          <Skeleton className="mt-0.5 h-4 w-4 shrink-0 rounded-md" />
          <div className="min-w-0 space-y-2">
            <Skeleton className="h-4 w-48" />
            <Skeleton className="h-3 w-60" />
          </div>
        </div>
        <Skeleton className="h-9 w-20 rounded-lg" />
      </div>
    ))}
  </div>
);

const AccountSessionsPageSkeleton = () => (
  <div className="mx-auto max-w-3xl" aria-busy="true">
    <Skeleton className="mb-6 h-4 w-24" />
    <div className="mb-8">
      <Skeleton className="mb-3 h-8 w-32" />
      <Skeleton className="h-4 w-full max-w-lg" />
    </div>
    <div className="rounded-2xl border border-zinc-800/60 bg-zinc-900/40 p-5 sm:p-6">
      <div className="mb-4 flex flex-wrap items-end justify-between gap-x-4 gap-y-2">
        <Skeleton className="h-5 w-36" />
      </div>
      <SessionRowsSkeleton count={3} />
    </div>
  </div>
);

// Heuristic device label from the User-Agent string. We don't need
// perfect parsing — just a recognizable hint so the user can spot
// their own device in a list of three. Falls back to the raw UA.
const summariseUserAgent = (ua: string | null | undefined): string => {
  if (!ua) return "Unknown device";
  const isMobile = /Mobile|Android|iPhone|iPad/i.test(ua);
  const browser = /Firefox/i.test(ua)
    ? "Firefox"
    : /Edg/i.test(ua)
      ? "Edge"
      : /Chrome/i.test(ua)
        ? "Chrome"
        : /Safari/i.test(ua)
          ? "Safari"
          : "Browser";
  const os = /Windows/i.test(ua)
    ? "Windows"
    : /Mac OS X/i.test(ua)
      ? "macOS"
      : /Android/i.test(ua)
        ? "Android"
        : /iPhone|iPad|iOS/i.test(ua)
          ? "iOS"
          : /Linux/i.test(ua)
            ? "Linux"
            : "device";
  return `${browser} on ${os}${isMobile ? " (mobile)" : ""}`;
};

export const AccountSessionsPage = () => {
  const navigate = useNavigate();
  const session = useRequireSession("/account/sessions");
  const queryClient = useQueryClient();
  const [error, setError] = useState<string | null>(null);
  const [pending, setPending] = useState<string | null>(null);

  const userId = session.data?.user.id ?? null;
  const sessionsQueryKey = queryKeys.accountSessions(userId);
  const sessionsQuery = useQuery({
    queryKey: sessionsQueryKey,
    queryFn: async () => {
      const res = await authClient.listSessions();
      if (res.error) throw new Error(res.error.message ?? "Could not load sessions.");
      return (res.data ?? []) as unknown as SessionRow[];
    },
    enabled: Boolean(userId),
  });
  const sessions = sessionsQuery.data ?? null;

  const handleRevoke = async (row: SessionRow) => {
    setError(null);
    setPending(row.id);
    try {
      const res = await authClient.revokeSession({ token: row.token });
      if (res.error) {
        setError(res.error.message ?? "Could not revoke session.");
        return;
      }
      // Revoking the current session signs us out — bounce to landing.
      if (row.token === session.data?.session.token) {
        await session.refetch();
        navigate("/");
        return;
      }
      await queryClient.invalidateQueries({ queryKey: sessionsQueryKey, exact: true });
    } catch (e) {
      setError(e instanceof Error ? e.message : "Failed to revoke session.");
    } finally {
      setPending(null);
    }
  };

  const handleRevokeOthers = async () => {
    setError(null);
    setPending("others");
    try {
      const res = await authClient.revokeOtherSessions();
      if (res.error) {
        setError(res.error.message ?? "Could not revoke other sessions.");
        return;
      }
      await queryClient.invalidateQueries({ queryKey: sessionsQueryKey, exact: true });
    } catch (e) {
      setError(e instanceof Error ? e.message : "Failed to revoke other sessions.");
    } finally {
      setPending(null);
    }
  };

  if (session.isPending || !session.data) {
    return <AccountSessionsPageSkeleton />;
  }

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

  return (
    <div className="mx-auto max-w-3xl">
      <BackLink to="/account">Account</BackLink>
      <PageHeader
        title="Sessions"
        description="Each row is a browser or device currently signed in. Revoke any you don't recognise."
      />
      <PageError message={error} onDismiss={() => setError(null)} />
      <Card>
        <div className="mb-4 flex flex-wrap items-end justify-between gap-x-4 gap-y-2">
          <h2 className="text-lg font-semibold text-zinc-100">Active sessions</h2>
          {sessions && otherCount > 0 ? (
            <ConfirmButton variant="ghost" size="sm" loading={pending === "others"} onConfirm={handleRevokeOthers}>
              <LogOut className="h-4 w-4" aria-hidden="true" />
              Sign out everywhere else
            </ConfirmButton>
          ) : null}
        </div>
        {sessions === null ? (
          <SessionRowsSkeleton count={3} />
        ) : (
          <div className="flex flex-col gap-3">
            {sessions.map((row) => {
              const isCurrent = row.token === currentToken;
              return (
                <PanelRow key={row.id} className="flex items-start justify-between">
                  <div className="flex min-w-0 items-start gap-3">
                    <Monitor className="mt-0.5 h-4 w-4 shrink-0 text-zinc-500" aria-hidden="true" />
                    <div className="min-w-0">
                      <p className="text-sm font-medium text-zinc-100">
                        {summariseUserAgent(row.userAgent)}
                        {isCurrent ? (
                          <span className="ml-2 inline-flex items-center rounded-md bg-zinc-700/50 px-1.5 py-0.5 text-[0.7rem] font-medium uppercase tracking-wider text-zinc-300">
                            this device
                          </span>
                        ) : null}
                      </p>
                      <p className="mt-0.5 text-xs text-zinc-500">
                        {row.ipAddress ?? "ip unknown"} · started {formatDateTime(row.createdAt)}
                      </p>
                    </div>
                  </div>
                  <ConfirmButton
                    variant="ghost"
                    size="sm"
                    loading={pending === row.id}
                    onConfirm={() => handleRevoke(row)}
                  >
                    Revoke
                  </ConfirmButton>
                </PanelRow>
              );
            })}
            {sessions.length === 0 ? <p className="text-sm text-zinc-500">No active sessions.</p> : null}
          </div>
        )}
      </Card>
    </div>
  );
};