'use client';

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Session, sessionService } from '@/lib/services/session.service';
import { Button } from '@/components/ui/button';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { toast } from 'sonner';
import { Loader2, Trash2, Monitor } from 'lucide-react';
import { format } from 'date-fns';
import { getApiErrorMessage } from '@/types/api-error';

export default function SessionManagementPage() {
  const queryClient = useQueryClient();

  const {
    data: sessions,
    isLoading,
    error,
  } = useQuery<Session[]>({
    queryKey: ['sessions'],
    queryFn: sessionService.getActiveSessions,
  });
  const sessionList = Array.isArray(sessions) ? sessions : [];

  const revokeMutation = useMutation({
    mutationFn: sessionService.revokeSession,
    onSuccess: () => {
      toast.success('Session revoked successfully');
      queryClient.invalidateQueries({ queryKey: ['sessions'] });
    },
    onError: (mutationError: unknown) => {
      toast.error('Failed to revoke session', {
        description: getApiErrorMessage(mutationError, 'Unknown error'),
      });
    },
  });

  const handleRevoke = (id: number) => {
    if (confirm('Are you sure you want to revoke this session?')) {
      revokeMutation.mutate(id);
    }
  };

  if (isLoading) {
    return (
      <div className="flex h-[400px] w-full items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="p-8 text-center text-red-500">
        {getApiErrorMessage(error, 'Failed to load sessions. Please try again.')}
      </div>
    );
  }

  return (
    <div className="space-y-6 p-6">
      <div className="flex flex-col gap-2">
        <h1 className="text-2xl font-bold tracking-tight">Active Sessions</h1>
        <p className="text-sm text-muted-foreground">Monitor and manage active user sessions across all devices.</p>
      </div>

      <div className="rounded-md border bg-card">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>User</TableHead>
              <TableHead>Device Info</TableHead>
              <TableHead>Last Active</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {sessionList.map((session) => (
              <TableRow key={session.id}>
                <TableCell>
                  <div className="flex flex-col">
                    <span className="font-medium">{session.user.username}</span>
                    <span className="text-xs text-muted-foreground">
                      {session.user.firstName} {session.user.lastName}
                    </span>
                  </div>
                </TableCell>
                <TableCell>
                  <div className="flex flex-col gap-1">
                    <div className="flex items-center gap-2 text-sm">
                      <Monitor className="h-3 w-3" />
                      {session.deviceName || 'Unknown Device'}
                    </div>
                    <span className="text-xs text-muted-foreground">{session.ipAddress || 'Unknown IP'}</span>
                  </div>
                </TableCell>
                <TableCell className="text-sm">
                  {session.lastActive ? format(new Date(session.lastActive), 'PP pp') : '-'}
                </TableCell>
                <TableCell className="text-right">
                  <Button
                    variant="destructive"
                    size="sm"
                    className="h-8"
                    onClick={() => handleRevoke(session.id)}
                    disabled={revokeMutation.isPending}
                  >
                    <Trash2 className="mr-2 h-3.5 w-3.5" />
                    Revoke
                  </Button>
                </TableCell>
              </TableRow>
            ))}
            {sessionList.length === 0 && (
              <TableRow>
                <TableCell colSpan={4} className="h-24 text-center text-muted-foreground">
                  No active sessions found.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}