import { ConfirmationModal, DeleteIcon, IconButton, Placeholder } from "@cv/ui";
import { useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import {
  useActiveSessionsQuery,
  useDeleteSessionMutation,
} from "@/generated/graphql";
import { clearAuthCookies } from "@/utils/cookies";

export const ActiveSessions = () => {
  const queryClient = useQueryClient();
  const { data, isLoading, error } = useActiveSessionsQuery();
  const deleteSessionMutation = useDeleteSessionMutation({
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: useActiveSessionsQuery.getKey(),
      });
    },
  });

  const [sessionToDelete, setSessionToDelete] = useState<{
    id: string;
    isCurrent: boolean;
  } | null>(null);

  if (isLoading) {
    return (
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-ctp-text">Active Sessions</h3>
        <Placeholder variant="loading" message="Loading sessions..." />
      </div>
    );
  }

  if (error) {
    return (
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-ctp-text">Active Sessions</h3>
        <Placeholder variant="error" message="Error loading sessions" />
      </div>
    );
  }

  const sessions = data?.activeSessions ?? [];

  if (sessions.length === 0) {
    return (
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-ctp-text">Active Sessions</h3>
        <Placeholder variant="empty" message="No active sessions" />
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold text-ctp-text">Active Sessions</h3>
      <div className="space-y-3">
        {sessions.map((session) => (
          <div
            key={session.id}
            className={`rounded-lg border p-4 ${
              session.isCurrentSession
                ? "border-ctp-blue bg-ctp-blue/10"
                : "border-ctp-surface0 bg-ctp-crust/40"
            }`}
          >
            <div className="flex items-start justify-between">
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <h4 className="font-medium text-ctp-text">
                    {session.deviceName ?? "Unknown Device"}
                  </h4>
                  {session.isCurrentSession && (
                    <span className="rounded-full bg-ctp-blue px-2 py-0.5 text-xs font-medium text-ctp-base">
                      Current Session
                    </span>
                  )}
                  {session.deviceType && (
                    <span className="rounded-full bg-ctp-surface0 px-2 py-0.5 text-xs text-ctp-subtext0">
                      {session.deviceType}
                    </span>
                  )}
                </div>
                <div className="mt-2 space-y-1 text-sm text-ctp-subtext0">
                  {session.city && session.country && (
                    <p>
                      {session.city}, {session.country}
                    </p>
                  )}
                  <p>
                    Last active: {new Date(session.createdAt).toLocaleString()}
                  </p>
                  <p>Expires: {new Date(session.expiresAt).toLocaleString()}</p>
                </div>
              </div>
              <IconButton
                variant="ghost"
                size="sm"
                icon={<DeleteIcon />}
                label="Delete session"
                onClick={() =>
                  setSessionToDelete({
                    id: session.id,
                    isCurrent: session.isCurrentSession,
                  })
                }
              />
            </div>
          </div>
        ))}
      </div>
      <ConfirmationModal
        isOpen={sessionToDelete !== null}
        onClose={() => setSessionToDelete(null)}
        onConfirm={() => {
          if (sessionToDelete) {
            deleteSessionMutation.mutate(
              { sessionId: sessionToDelete.id },
              {
                onSuccess: async () => {
                  setSessionToDelete(null);
                  if (sessionToDelete.isCurrent) {
                    await clearAuthCookies();
                    queryClient.clear();
                    window.location.href = "/auth/login";
                  }
                },
              },
            );
          }
        }}
        title="Delete Session"
        message={
          sessionToDelete?.isCurrent
            ? "Are you sure you want to delete your current session? You will be logged out and redirected to the login page."
            : "Are you sure you want to delete this session? You will be logged out from this device."
        }
        confirmText="Delete"
        cancelText="Cancel"
        variant="danger"
      />
    </div>
  );
};