/**
 * @ai-summary Security settings screen for mobile application
 */

import React from 'react';
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
import { MobileContainer } from '../../../shared-minimal/components/mobile/MobileContainer';
import { useNavigationStore } from '../../../core/store';
import { useSecurityStatus, useRequestPasswordReset } from '../hooks/useSecurity';

export const SecurityMobileScreen: React.FC = () => {
  const { goBack } = useNavigationStore();
  const { data: securityStatus, isLoading, error } = useSecurityStatus();
  const passwordResetMutation = useRequestPasswordReset();

  const handlePasswordReset = () => {
    passwordResetMutation.mutate();
  };

  const handleBack = () => {
    goBack();
  };

  if (isLoading) {
    return (
      <MobileContainer>
        <div className="space-y-4 pb-20 p-4">
          {/* Header */}
          <div className="flex items-center mb-6">
            <button
              onClick={handleBack}
              className="mr-4 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
              style={{ minHeight: '44px', minWidth: '44px' }}
            >
              <svg className="w-6 h-6 text-slate-600 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
              </svg>
            </button>
            <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Security</h1>
          </div>

          <GlassCard padding="md">
            <div className="flex justify-center py-8">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
            </div>
          </GlassCard>
        </div>
      </MobileContainer>
    );
  }

  if (error) {
    return (
      <MobileContainer>
        <div className="space-y-4 pb-20 p-4">
          {/* Header */}
          <div className="flex items-center mb-6">
            <button
              onClick={handleBack}
              className="mr-4 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
              style={{ minHeight: '44px', minWidth: '44px' }}
            >
              <svg className="w-6 h-6 text-slate-600 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
              </svg>
            </button>
            <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Security</h1>
          </div>

          <GlassCard padding="md">
            <div className="text-center py-8">
              <p className="text-red-600 mb-4">Failed to load security settings</p>
              <button
                onClick={() => window.location.reload()}
                className="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg dark:bg-primary-600 dark:hover:bg-primary-700"
              >
                Retry
              </button>
            </div>
          </GlassCard>
        </div>
      </MobileContainer>
    );
  }

  return (
    <MobileContainer>
      <div className="space-y-4 pb-20 p-4">
        {/* Header */}
        <div className="flex items-center mb-6">
          <button
            onClick={handleBack}
            className="mr-4 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
            style={{ minHeight: '44px', minWidth: '44px' }}
          >
            <svg className="w-6 h-6 text-slate-600 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
          </button>
          <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Security</h1>
        </div>

        {/* Email Verification Status */}
        <GlassCard padding="md">
          <h2 className="text-lg font-semibold text-slate-800 dark:text-white mb-4">Account Verification</h2>

          <div className="space-y-4">
            <div>
              <p className="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Email Address</p>
              <p className="text-sm text-slate-800 dark:text-white">{securityStatus?.email || 'Not available'}</p>
            </div>

            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Email Verification</p>
                <p className="text-sm text-slate-800 dark:text-white">
                  {securityStatus?.emailVerified ? 'Verified' : 'Not verified'}
                </p>
              </div>
              <span
                className={`px-3 py-1 rounded-full text-xs font-medium ${
                  securityStatus?.emailVerified
                    ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
                    : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300'
                }`}
              >
                {securityStatus?.emailVerified ? 'Verified' : 'Pending'}
              </span>
            </div>
          </div>
        </GlassCard>

        {/* Password Management */}
        <GlassCard padding="md">
          <h2 className="text-lg font-semibold text-slate-800 dark:text-white mb-4">Password</h2>

          <div className="space-y-4">
            <p className="text-sm text-slate-600 dark:text-slate-400">
              Click below to receive an email with a link to reset your password.
            </p>

            <button
              onClick={handlePasswordReset}
              disabled={passwordResetMutation.isPending}
              className="w-full py-3 px-4 bg-primary-500 text-white rounded-lg font-medium hover:bg-primary-600 transition-colors disabled:opacity-50 flex items-center justify-center dark:bg-primary-600 dark:hover:bg-primary-700"
              style={{ minHeight: '44px' }}
            >
              {passwordResetMutation.isPending ? (
                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
              ) : (
                'Reset Password'
              )}
            </button>

            {passwordResetMutation.isSuccess && (
              <div className="p-3 bg-green-50 text-green-800 rounded-lg text-sm dark:bg-green-900/20 dark:text-green-300">
                Password reset email sent! Please check your inbox.
              </div>
            )}
          </div>
        </GlassCard>

        {/* Passkeys Information */}
        <GlassCard padding="md">
          <h2 className="text-lg font-semibold text-slate-800 dark:text-white mb-4">Passkeys</h2>

          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Passkey Authentication</p>
                <p className="text-sm text-slate-800 dark:text-white">
                  {securityStatus?.passkeysEnabled ? 'Available' : 'Not available'}
                </p>
              </div>
              <span
                className={`px-3 py-1 rounded-full text-xs font-medium ${
                  securityStatus?.passkeysEnabled
                    ? 'bg-primary-100 text-primary-800 dark:bg-primary-900/30 dark:text-primary-300'
                    : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
                }`}
              >
                {securityStatus?.passkeysEnabled ? 'Available' : 'N/A'}
              </span>
            </div>

            <div className="p-3 bg-blue-50 text-blue-800 rounded-lg text-sm dark:bg-blue-900/20 dark:text-blue-300">
              <p className="font-medium mb-1">About Passkeys</p>
              <p>
                Passkeys are a secure, passwordless way to sign in using your device's biometric authentication (fingerprint, face recognition) or PIN.
              </p>
              <p className="mt-2">
                You can register a passkey during the sign-in process. When you see the option to "Create a passkey," follow the prompts to set up passwordless authentication.
              </p>
            </div>
          </div>
        </GlassCard>
      </div>
    </MobileContainer>
  );
};

export default SecurityMobileScreen;
