veza/apps/web/src/components/settings/security/SessionManagement.tsx

import React, { useState, useEffect } from 'react';
import { Card } from '../../ui/card';
import { Button } from '../../ui/button';
import { Smartphone, Monitor, Clock } from 'lucide-react';
import { useToast } from '../../../context/ToastContext';
import { sessionService, Session } from '../../../services/sessionService';
import { logger } from '@/utils/logger';

export const SessionManagement: React.FC = () => {
  const { addToast } = useToast();
  const [sessions, setSessions] = useState<Session[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadSessions();
  }, []);

  const loadSessions = async () => {
    try {
      setLoading(true);
      const res = await sessionService.getSessions();
      setSessions(res.sessions);
    } catch (error) {
      logger.error('Error loading sessions', {
        error: error instanceof Error ? error.message : String(error),
        stack: error instanceof Error ? error.stack : undefined,
      });
    } finally {
      setLoading(false);
    }
  };

  const handleRevoke = async (id: string) => {
    try {
      await sessionService.revokeSession(id);
      setSessions((prev) => prev.filter((s) => s.id !== id));
      addToast('Session revoked successfully', 'success');
    } catch (error) {
      addToast('Failed to revoke session', 'error');
    }
  };

  const handleRevokeAll = async () => {
    try {
      await sessionService.logoutAll();
      // Ideally reload or clear all except current, but for safety re-fetch
      loadSessions();
      addToast('All other sessions have been logged out', 'success');
    } catch (error) {
      addToast('Failed to log out all devices', 'error');
    }
  };

  if (loading)
    return (
      <div className="text-center p-4 text-gray-500">Loading sessions...</div>
    );

  return (
    <Card variant="default">
      <div className="flex justify-between items-center mb-6">
        <div>
          <h3 className="text-xl font-bold text-white">Active Sessions</h3>
          <p className="text-sm text-gray-400">
            Manage devices logged into your account.
          </p>
        </div>
        <Button
          variant="ghost"
          className="text-kodo-red hover:bg-kodo-red/10 border-kodo-red/30"
          onClick={handleRevokeAll}
        >
          Log Out All Other Devices
        </Button>
      </div>

      <div className="space-y-4">
        {sessions.map((session) => {
          // Simple heuristics for icon since backend might not provide device type explicitly yet
          const isMobile = session.user_agent.toLowerCase().includes('mobile');
          return (
            <div
              key={session.id}
              className="flex flex-col md:flex-row md:items-center justify-between p-4 bg-kodo-ink rounded-xl border border-kodo-steel hover:border-kodo-cyan/30 transition-colors"
            >
              <div className="flex items-start gap-4">
                <div
                  className={`p-3 rounded-full ${session.is_current ? 'bg-kodo-cyan/10 text-kodo-cyan' : 'bg-kodo-slate text-gray-400'}`}
                >
                  {isMobile ? (
                    <Smartphone className="w-6 h-6" />
                  ) : (
                    <Monitor className="w-6 h-6" />
                  )}
                </div>
                <div>
                  <div className="flex items-center gap-2">
                    <h4 className="font-bold text-white text-sm">
                      {session.ip_address}
                    </h4>
                    {session.is_current && (
                      <span className="bg-kodo-lime/10 text-kodo-lime text-[10px] px-2 py-0.5 rounded border border-kodo-lime/30 font-bold">
                        CURRENT DEVICE
                      </span>
                    )}
                  </div>
                  <p className="text-xs text-gray-400 mt-1 truncate max-w-xs">
                    {session.user_agent}
                  </p>
                  <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
                    <span className="flex items-center gap-1">
                      <Clock className="w-3 h-3" /> Active:{' '}
                      {new Date(session.last_activity).toLocaleString()}
                    </span>
                  </div>
                </div>
              </div>

              {!session.is_current && (
                <Button
                  variant="ghost"
                  size="sm"
                  className="mt-4 md:mt-0 text-gray-400 hover:text-white border border-kodo-steel hover:bg-white/5"
                  onClick={() => handleRevoke(session.id)}
                >
                  Revoke Access
                </Button>
              )}
            </div>
          );
        })}
        {sessions.length === 0 && (
          <p className="text-gray-500 text-sm">No active sessions found.</p>
        )}
      </div>
    </Card>
  );
};