'use client';

import { useState, useEffect } from 'react';
import { useLanguage } from '@/context/LanguageContext';
import { useAuth } from '@/context/AuthContext';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import { dashboardApi, authApi, UserProfile, UserSession } from '@/lib/api';
import toast from 'react-hot-toast';

export default function SecurityTab() {
  const { locale: language } = useLanguage();
  const { logout } = useAuth();
  
  const [profile, setProfile] = useState<UserProfile | null>(null);
  const [sessions, setSessions] = useState<UserSession[]>([]);
  const [loading, setLoading] = useState(true);
  const [changingPassword, setChangingPassword] = useState(false);
  const [settingPassword, setSettingPassword] = useState(false);
  
  const [passwordForm, setPasswordForm] = useState({
    currentPassword: '',
    newPassword: '',
    confirmPassword: '',
  });
  
  const [newPasswordForm, setNewPasswordForm] = useState({
    password: '',
    confirmPassword: '',
  });

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

  const loadData = async () => {
    try {
      const [profileRes, sessionsRes] = await Promise.all([
        dashboardApi.getProfile(),
        dashboardApi.getSessions(),
      ]);
      setProfile(profileRes.profile);
      setSessions(sessionsRes.sessions);
    } catch (error) {
      toast.error(language === 'es' ? 'Error al cargar datos' : 'Failed to load data');
    } finally {
      setLoading(false);
    }
  };

  const handleChangePassword = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
      toast.error(language === 'es' ? 'Las contraseñas no coinciden' : 'Passwords do not match');
      return;
    }
    
    if (passwordForm.newPassword.length < 10) {
      toast.error(language === 'es' ? 'La contraseña debe tener al menos 10 caracteres' : 'Password must be at least 10 characters');
      return;
    }
    
    setChangingPassword(true);
    
    try {
      await authApi.changePassword(passwordForm.currentPassword, passwordForm.newPassword);
      toast.success(language === 'es' ? 'Contraseña actualizada' : 'Password updated');
      setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' });
    } catch (error: any) {
      toast.error(error.message || (language === 'es' ? 'Error al cambiar contraseña' : 'Failed to change password'));
    } finally {
      setChangingPassword(false);
    }
  };

  const handleSetPassword = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (newPasswordForm.password !== newPasswordForm.confirmPassword) {
      toast.error(language === 'es' ? 'Las contraseñas no coinciden' : 'Passwords do not match');
      return;
    }
    
    if (newPasswordForm.password.length < 10) {
      toast.error(language === 'es' ? 'La contraseña debe tener al menos 10 caracteres' : 'Password must be at least 10 characters');
      return;
    }
    
    setSettingPassword(true);
    
    try {
      await dashboardApi.setPassword(newPasswordForm.password);
      toast.success(language === 'es' ? 'Contraseña establecida' : 'Password set');
      setNewPasswordForm({ password: '', confirmPassword: '' });
      loadData(); // Reload to update profile
    } catch (error: any) {
      toast.error(error.message || (language === 'es' ? 'Error al establecer contraseña' : 'Failed to set password'));
    } finally {
      setSettingPassword(false);
    }
  };

  const handleUnlinkGoogle = async () => {
    if (!confirm(language === 'es' 
      ? '¿Estás seguro de que quieres desvincular tu cuenta de Google?' 
      : 'Are you sure you want to unlink your Google account?'
    )) {
      return;
    }
    
    try {
      await dashboardApi.unlinkGoogle();
      toast.success(language === 'es' ? 'Google desvinculado' : 'Google unlinked');
      loadData();
    } catch (error: any) {
      toast.error(error.message || (language === 'es' ? 'Error' : 'Failed'));
    }
  };

  const handleRevokeSession = async (sessionId: string) => {
    try {
      await dashboardApi.revokeSession(sessionId);
      setSessions(sessions.filter((s) => s.id !== sessionId));
      toast.success(language === 'es' ? 'Sesión cerrada' : 'Session revoked');
    } catch (error) {
      toast.error(language === 'es' ? 'Error' : 'Failed');
    }
  };

  const handleRevokeAllSessions = async () => {
    if (!confirm(language === 'es' 
      ? '¿Cerrar todas las sesiones? Serás desconectado.' 
      : 'Log out of all sessions? You will be logged out.'
    )) {
      return;
    }
    
    try {
      await dashboardApi.revokeAllSessions();
      toast.success(language === 'es' ? 'Todas las sesiones cerradas' : 'All sessions revoked');
      logout();
    } catch (error) {
      toast.error(language === 'es' ? 'Error' : 'Failed');
    }
  };

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleString(language === 'es' ? 'es-ES' : 'en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      timeZone: 'America/Asuncion',
    });
  };

  if (loading) {
    return (
      <div className="flex justify-center py-12">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-secondary-blue"></div>
      </div>
    );
  }

  return (
    <div className="max-w-2xl space-y-6">
      {/* Authentication Methods */}
      <Card className="p-6">
        <h3 className="text-lg font-semibold mb-4">
          {language === 'es' ? 'Métodos de Autenticación' : 'Authentication Methods'}
        </h3>
        
        <div className="space-y-4">
          {/* Password Status */}
          <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
            <div className="flex items-center gap-3">
              <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
                profile?.hasPassword ? 'bg-green-100 text-green-600' : 'bg-gray-200 text-gray-500'
              }`}>
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
              </div>
              <div>
                <p className="font-medium">
                  {language === 'es' ? 'Contraseña' : 'Password'}
                </p>
                <p className="text-sm text-gray-500">
                  {profile?.hasPassword
                    ? (language === 'es' ? 'Configurada' : 'Set')
                    : (language === 'es' ? 'No configurada' : 'Not set')}
                </p>
              </div>
            </div>
            {profile?.hasPassword && (
              <span className="text-green-600 text-sm font-medium">
                {language === 'es' ? 'Activo' : 'Active'}
              </span>
            )}
          </div>

          {/* Google Status */}
          <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
            <div className="flex items-center gap-3">
              <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
                profile?.hasGoogleLinked ? 'bg-red-100 text-red-600' : 'bg-gray-200 text-gray-500'
              }`}>
                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                  <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                  <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                  <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                </svg>
              </div>
              <div>
                <p className="font-medium">Google</p>
                <p className="text-sm text-gray-500">
                  {profile?.hasGoogleLinked
                    ? (language === 'es' ? 'Vinculado' : 'Linked')
                    : (language === 'es' ? 'No vinculado' : 'Not linked')}
                </p>
              </div>
            </div>
            {profile?.hasGoogleLinked && profile?.hasPassword && (
              <Button variant="outline" size="sm" onClick={handleUnlinkGoogle}>
                {language === 'es' ? 'Desvincular' : 'Unlink'}
              </Button>
            )}
          </div>
        </div>
      </Card>

      {/* Password Management */}
      <Card className="p-6">
        <h3 className="text-lg font-semibold mb-4">
          {profile?.hasPassword
            ? (language === 'es' ? 'Cambiar Contraseña' : 'Change Password')
            : (language === 'es' ? 'Establecer Contraseña' : 'Set Password')}
        </h3>
        
        {profile?.hasPassword ? (
          <form onSubmit={handleChangePassword} className="space-y-4">
            <Input
              id="currentPassword"
              type="password"
              label={language === 'es' ? 'Contraseña Actual' : 'Current Password'}
              value={passwordForm.currentPassword}
              onChange={(e) => setPasswordForm({ ...passwordForm, currentPassword: e.target.value })}
              required
            />
            <Input
              id="newPassword"
              type="password"
              label={language === 'es' ? 'Nueva Contraseña' : 'New Password'}
              value={passwordForm.newPassword}
              onChange={(e) => setPasswordForm({ ...passwordForm, newPassword: e.target.value })}
              required
            />
            <p className="text-xs text-gray-500 -mt-2">
              {language === 'es' ? 'Mínimo 10 caracteres' : 'Minimum 10 characters'}
            </p>
            <Input
              id="confirmPassword"
              type="password"
              label={language === 'es' ? 'Confirmar Contraseña' : 'Confirm Password'}
              value={passwordForm.confirmPassword}
              onChange={(e) => setPasswordForm({ ...passwordForm, confirmPassword: e.target.value })}
              required
            />
            <Button type="submit" isLoading={changingPassword}>
              {language === 'es' ? 'Cambiar Contraseña' : 'Change Password'}
            </Button>
          </form>
        ) : (
          <form onSubmit={handleSetPassword} className="space-y-4">
            <p className="text-sm text-gray-600 mb-4">
              {language === 'es'
                ? 'Actualmente inicias sesión con Google. Establece una contraseña para más opciones de acceso.'
                : 'You currently sign in with Google. Set a password for more access options.'}
            </p>
            <Input
              id="password"
              type="password"
              label={language === 'es' ? 'Nueva Contraseña' : 'New Password'}
              value={newPasswordForm.password}
              onChange={(e) => setNewPasswordForm({ ...newPasswordForm, password: e.target.value })}
              required
            />
            <p className="text-xs text-gray-500 -mt-2">
              {language === 'es' ? 'Mínimo 10 caracteres' : 'Minimum 10 characters'}
            </p>
            <Input
              id="confirmNewPassword"
              type="password"
              label={language === 'es' ? 'Confirmar Contraseña' : 'Confirm Password'}
              value={newPasswordForm.confirmPassword}
              onChange={(e) => setNewPasswordForm({ ...newPasswordForm, confirmPassword: e.target.value })}
              required
            />
            <Button type="submit" isLoading={settingPassword}>
              {language === 'es' ? 'Establecer Contraseña' : 'Set Password'}
            </Button>
          </form>
        )}
      </Card>

      {/* Active Sessions */}
      <Card className="p-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-semibold">
            {language === 'es' ? 'Sesiones Activas' : 'Active Sessions'}
          </h3>
          {sessions.length > 1 && (
            <Button variant="outline" size="sm" onClick={handleRevokeAllSessions}>
              {language === 'es' ? 'Cerrar Todas' : 'Logout All'}
            </Button>
          )}
        </div>
        
        {sessions.length === 0 ? (
          <p className="text-sm text-gray-600">
            {language === 'es' ? 'No hay sesiones activas' : 'No active sessions'}
          </p>
        ) : (
          <div className="space-y-3">
            {sessions.map((session, index) => (
              <div
                key={session.id}
                className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
              >
                <div>
                  <p className="font-medium text-sm">
                    {session.userAgent
                      ? session.userAgent.substring(0, 50) + (session.userAgent.length > 50 ? '...' : '')
                      : (language === 'es' ? 'Dispositivo desconocido' : 'Unknown device')}
                  </p>
                  <p className="text-xs text-gray-500">
                    {language === 'es' ? 'Última actividad:' : 'Last active:'} {formatDate(session.lastActiveAt)}
                    {session.ipAddress && ` • ${session.ipAddress}`}
                  </p>
                </div>
                {index !== 0 && (
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => handleRevokeSession(session.id)}
                  >
                    {language === 'es' ? 'Cerrar' : 'Revoke'}
                  </Button>
                )}
                {index === 0 && (
                  <span className="text-xs text-green-600 font-medium">
                    {language === 'es' ? 'Esta sesión' : 'This session'}
                  </span>
                )}
              </div>
            ))}
          </div>
        )}
      </Card>

      {/* Danger Zone */}
      <Card className="p-6 border-red-200 bg-red-50">
        <h3 className="text-lg font-semibold text-red-800 mb-4">
          {language === 'es' ? 'Zona de Peligro' : 'Danger Zone'}
        </h3>
        <p className="text-sm text-red-700 mb-4">
          {language === 'es'
            ? 'Si deseas eliminar tu cuenta, contacta al soporte.'
            : 'If you want to delete your account, please contact support.'}
        </p>
        <Button variant="outline" size="sm" className="border-red-300 text-red-700 hover:bg-red-100" disabled>
          {language === 'es' ? 'Eliminar Cuenta' : 'Delete Account'}
        </Button>
      </Card>
    </div>
  );
}