thrilltrack-explorer/src/components/settings/SecurityTab.tsx

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { Badge } from '@/components/ui/badge';
import { handleError, handleSuccess } from '@/lib/errorHandler';
import { useAuth } from '@/hooks/useAuth';
import { Shield, Key, Smartphone, Globe, Loader2, Monitor, Tablet, Trash2 } from 'lucide-react';
import { format } from 'date-fns';
import { Skeleton } from '@/components/ui/skeleton';
import { TOTPSetup } from '@/components/auth/TOTPSetup';
import { GoogleIcon } from '@/components/icons/GoogleIcon';
import { DiscordIcon } from '@/components/icons/DiscordIcon';
import { PasswordUpdateDialog } from './PasswordUpdateDialog';
import {
  getUserIdentities,
  checkDisconnectSafety,
  disconnectIdentity,
  connectIdentity,
  addPasswordToAccount
} from '@/lib/identityService';
import type { UserIdentity, OAuthProvider } from '@/types/identity';
import type { AuthSession } from '@/types/auth';
import { supabase } from '@/integrations/supabase/client';
import { logger } from '@/lib/logger';
import { SessionRevokeConfirmDialog } from './SessionRevokeConfirmDialog';

export function SecurityTab() {
  const { user } = useAuth();
  const navigate = useNavigate();
  const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
  const [identities, setIdentities] = useState<UserIdentity[]>([]);
  const [loadingIdentities, setLoadingIdentities] = useState(true);
  const [disconnectingProvider, setDisconnectingProvider] = useState<OAuthProvider | null>(null);
  const [hasPassword, setHasPassword] = useState(false);
  const [addingPassword, setAddingPassword] = useState(false);
  const [sessions, setSessions] = useState<AuthSession[]>([]);
  const [loadingSessions, setLoadingSessions] = useState(true);
  const [sessionToRevoke, setSessionToRevoke] = useState<{ id: string; isCurrent: boolean } | null>(null);

  // Load user identities on mount
  useEffect(() => {
    loadIdentities();
    fetchSessions();
  }, []);

  const loadIdentities = async () => {
    try {
      setLoadingIdentities(true);
      const fetchedIdentities = await getUserIdentities();
      setIdentities(fetchedIdentities);
      
      // Check if user has email/password auth
      const hasEmailProvider = fetchedIdentities.some(i => i.provider === 'email');
      setHasPassword(hasEmailProvider);
    } catch (error) {
      logger.error('Failed to load identities', {
        userId: user?.id,
        action: 'load_identities',
        error: error instanceof Error ? error.message : String(error)
      });
      handleError(error, { action: 'Load connected accounts', userId: user?.id });
    } finally {
      setLoadingIdentities(false);
    }
  };

  const handleSocialLogin = async (provider: OAuthProvider) => {
    try {
      const result = await connectIdentity(provider, '/settings?tab=security');
      
      if (!result.success) {
        handleError(
          new Error(result.error || 'Connection failed'),
          { action: `Connect ${provider} account` }
        );
      } else {
        handleSuccess('Redirecting...', `Connecting your ${provider} account...`);
      }
    } catch (error) {
      handleError(error, { action: `Connect ${provider} account` });
    }
  };

  const handleUnlinkSocial = async (provider: OAuthProvider) => {
    // Check if disconnect is safe
    const safetyCheck = await checkDisconnectSafety(provider);
    
    if (!safetyCheck.canDisconnect) {
      if (safetyCheck.reason === 'no_password_backup') {
        // Trigger password reset flow first
        await handleAddPassword();
        handleSuccess(
          "Password Required First",
          "Check your email for a password reset link. Once you've set a password, you can disconnect your social login."
        );
        return;
      }
      
      if (safetyCheck.reason === 'last_identity') {
        handleError(
          new Error("You cannot disconnect your only login method"),
          { action: "Disconnect social login" }
        );
        return;
      }
    }
    
    // Proceed with disconnect
    setDisconnectingProvider(provider);
    const result = await disconnectIdentity(provider);
    setDisconnectingProvider(null);
    
    if (result.success) {
      await loadIdentities(); // Refresh identities list
      handleSuccess("Disconnected", `Your ${provider} account has been successfully disconnected.`);
    } else {
      handleError(
        new Error(result.error || 'Disconnect failed'),
        { action: `Disconnect ${provider} account` }
      );
    }
  };

  const handleAddPassword = async () => {
    setAddingPassword(true);
    
    const result = await addPasswordToAccount();
    
    if (result.success) {
      handleSuccess(
        "Password Setup Email Sent!",
        `Check ${result.email} for a password reset link. Click it to set your password.`
      );
    } else {
      handleError(
        new Error(result.error || 'Failed to send email'),
        { action: 'Send password setup email' }
      );
    }
    
    setAddingPassword(false);
  };

  const fetchSessions = async () => {
    if (!user) return;
    
    const { data, error } = await supabase.rpc('get_my_sessions');
    
    if (error) {
      logger.error('Failed to fetch sessions', {
        userId: user.id,
        action: 'fetch_sessions',
        error: error.message
      });
      handleError(error, { action: 'Load sessions', userId: user.id });
    } else {
      setSessions((data as AuthSession[]) || []);
    }
    setLoadingSessions(false);
  };

  const initiateSessionRevoke = async (sessionId: string) => {
    // Get current session to check if revoking self
    const { data: { session: currentSession } } = await supabase.auth.getSession();
    const isCurrentSession = currentSession && sessions.some(s => 
      s.id === sessionId && s.refreshed_at === currentSession.access_token
    );
    
    setSessionToRevoke({ id: sessionId, isCurrent: !!isCurrentSession });
  };

  const confirmRevokeSession = async () => {
    if (!sessionToRevoke) return;
    
    const { error } = await supabase.rpc('revoke_my_session', { session_id: sessionToRevoke.id });
    
    if (error) {
      logger.error('Failed to revoke session', {
        userId: user?.id,
        action: 'revoke_session',
        sessionId: sessionToRevoke.id,
        error: error.message
      });
      handleError(error, { action: 'Revoke session', userId: user?.id });
    } else {
      handleSuccess('Success', 'Session revoked successfully');
      
      if (sessionToRevoke.isCurrent) {
        // Redirect to login after revoking current session
        setTimeout(() => {
          window.location.href = '/auth';
        }, 1000);
      } else {
        fetchSessions();
      }
    }
    
    setSessionToRevoke(null);
  };

  const getDeviceIcon = (userAgent: string | null) => {
    if (!userAgent) return <Monitor className="w-4 h-4" />;
    
    const ua = userAgent.toLowerCase();
    if (ua.includes('mobile') || ua.includes('android') || ua.includes('iphone')) {
      return <Smartphone className="w-4 h-4" />;
    }
    if (ua.includes('tablet') || ua.includes('ipad')) {
      return <Tablet className="w-4 h-4" />;
    }
    return <Monitor className="w-4 h-4" />;
  };

  const getBrowserName = (userAgent: string | null) => {
    if (!userAgent) return 'Unknown Browser';
    
    const ua = userAgent.toLowerCase();
    if (ua.includes('firefox')) return 'Firefox';
    if (ua.includes('chrome') && !ua.includes('edg')) return 'Chrome';
    if (ua.includes('safari') && !ua.includes('chrome')) return 'Safari';
    if (ua.includes('edg')) return 'Edge';
    return 'Unknown Browser';
  };

  // Get connected accounts with identity data
  const connectedAccounts = [
    {
      provider: 'google' as OAuthProvider,
      identity: identities.find(i => i.provider === 'google'),
      icon: <GoogleIcon className="w-5 h-5" />
    },
    {
      provider: 'discord' as OAuthProvider,
      identity: identities.find(i => i.provider === 'discord'),
      icon: <DiscordIcon className="w-5 h-5" />
    }
  ];
  return (
    <>
      <PasswordUpdateDialog
        open={passwordDialogOpen}
        onOpenChange={setPasswordDialogOpen}
        onSuccess={() => {
          handleSuccess('Password updated', 'Your password has been successfully changed.');
        }}
      />

      <div className="space-y-8">
        {/* Password Section - Conditional based on auth method */}
        <div className="space-y-4">
          <div className="flex items-center gap-2">
            <Key className="w-5 h-5" />
            <h3 className="text-lg font-medium">{hasPassword ? 'Change Password' : 'Add Password'}</h3>
          </div>
          
          <Card>
            <CardHeader>
              <CardDescription>
                {hasPassword ? (
                  <>Update your password to keep your account secure.</>
                ) : (
                  <>Add password authentication to your account for increased security and backup access.</>
                )}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {hasPassword ? (
                <Button onClick={() => setPasswordDialogOpen(true)}>
                  Change Password
                </Button>
              ) : (
                <Button onClick={handleAddPassword} disabled={addingPassword}>
                  {addingPassword ? (
                    <>
                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                      Sending Email...
                    </>
                  ) : (
                    'Add Password'
                  )}
                </Button>
              )}
            </CardContent>
          </Card>
        </div>

      <Separator />

      {/* Social Login Connections */}
      <div className="space-y-4">
        <div className="flex items-center gap-2">
          <Globe className="w-5 h-5" />
          <h3 className="text-lg font-medium">Connected Accounts</h3>
        </div>
        
        <Card>
          <CardHeader>
            <CardDescription>
              Manage your social login connections for easier access to your account.
              To enable social providers, configure them in your Supabase Auth settings.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {loadingIdentities ? (
              <div className="flex items-center justify-center p-8">
                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
              </div>
            ) : (
              connectedAccounts.map(account => {
                const isConnected = !!account.identity;
                const isDisconnecting = disconnectingProvider === account.provider;
                const email = account.identity?.identity_data?.email;

                return (
                  <div key={account.provider} className="flex items-center justify-between p-4 border rounded-lg">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 bg-muted rounded-full flex items-center justify-center">
                        {account.icon}
                      </div>
                      <div>
                        <p className="font-medium capitalize">{account.provider}</p>
                        {isConnected && email && (
                          <p className="text-sm text-muted-foreground">{email}</p>
                        )}
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      {isConnected ? (
                        <>
                          <Badge variant="secondary">Connected</Badge>
                          <Button 
                            variant="outline" 
                            size="sm" 
                            onClick={() => handleUnlinkSocial(account.provider)}
                            disabled={isDisconnecting}
                          >
                            {isDisconnecting ? (
                              <>
                                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                                Disconnecting...
                              </>
                            ) : (
                              'Disconnect'
                            )}
                          </Button>
                        </>
                      ) : (
                        <Button 
                          variant="outline" 
                          size="sm" 
                          onClick={() => handleSocialLogin(account.provider)}
                        >
                          Connect
                        </Button>
                      )}
                    </div>
                  </div>
                );
              })
            )}
          </CardContent>
        </Card>
      </div>

      <Separator />

      {/* Two-Factor Authentication */}
      <div className="space-y-4">
        <div className="flex items-center gap-2">
          <Smartphone className="w-5 h-5" />
          <h3 className="text-lg font-medium">Two-Factor Authentication</h3>
        </div>
        
        <TOTPSetup />
      </div>

      <Separator />

      {/* Active Sessions & Login History */}
      <div className="space-y-4">
        <div className="flex items-center gap-2">
          <Shield className="w-5 h-5" />
          <h3 className="text-lg font-medium">
            Active Sessions {sessions.length > 0 && `(${sessions.length})`}
          </h3>
        </div>
        
        <Card>
          <CardHeader>
            <CardDescription>
              Review and manage your active login sessions across all devices
            </CardDescription>
          </CardHeader>
          <CardContent>
            {loadingSessions ? (
              <div className="space-y-3">
                {[1, 2, 3].map(i => (
                  <div key={i} className="flex items-start justify-between p-3 border rounded-lg">
                    <div className="flex gap-3 flex-1">
                      <Skeleton className="w-4 h-4 rounded" />
                      <div className="flex-1 space-y-2">
                        <Skeleton className="h-4 w-32" />
                        <Skeleton className="h-3 w-48" />
                      </div>
                    </div>
                    <Skeleton className="w-20 h-8" />
                  </div>
                ))}
              </div>
            ) : sessions.length > 0 ? (
              <div className="space-y-3">
                {sessions.map((session) => (
                  <div key={session.id} className="flex items-start justify-between p-3 border rounded-lg">
                    <div className="flex gap-3">
                      {getDeviceIcon(session.user_agent)}
                      <div>
                        <p className="font-medium">
                          {getBrowserName(session.user_agent)}
                        </p>
                        <p className="text-sm text-muted-foreground">
                          {session.ip && (
                            <span title="Last 8 characters of hashed IP address for privacy">
                              {session.ip} •{' '}
                            </span>
                          )}
                          Last active: {format(new Date(session.refreshed_at || session.created_at), 'PPpp')}
                          {session.aal === 'aal2' && ' • MFA'}
                        </p>
                        {session.not_after && (
                          <p className="text-sm text-muted-foreground">
                            Expires: {format(new Date(session.not_after), 'PPpp')}
                          </p>
                        )}
                      </div>
                    </div>
                    <Button
                      variant="destructive"
                      size="sm"
                      onClick={() => initiateSessionRevoke(session.id)}
                    >
                      <Trash2 className="w-4 h-4 mr-2" />
                      Revoke
                    </Button>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center p-8 text-muted-foreground">
                <p className="text-sm">No active sessions found</p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      <SessionRevokeConfirmDialog
        open={!!sessionToRevoke}
        onOpenChange={(open) => !open && setSessionToRevoke(null)}
        onConfirm={confirmRevokeSession}
        isCurrentSession={sessionToRevoke?.isCurrent ?? false}
      />
    </div>
    </>
  );
}