'use client';

import { useEffect } from 'react';
import OfflinePinVerify from '@/components/offline/OfflinePinVerify';
import { useTranslations } from 'next-intl';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faWifi, faArrowLeft } from '@fortawesome/free-solid-svg-icons';

export default function OfflineLoginPage() {
    const t = useTranslations();

    async function handlePinSuccess(userId: string):Promise<void> {

        // Initialize database with user's encryption key
        if (window.electron) {
            try {
                // Get encryption key
                const encryptionKey = await window.electron.getUserEncryptionKey(userId);
                if (encryptionKey) {
                    // Initialize database
                    await window.electron.dbInitialize(userId, encryptionKey);

                    // Navigate to main page
                    window.location.href = '/';
                }
            } catch (error) {
                console.error('[OfflineLogin] Error initializing database:', error);
            }
        }
    }

    function handleBackToOnline():void {
        if (window.electron) {
            window.electron.logout();
        }
    }

    useEffect(():void => {
        // Check if we have offline capability
        async function checkOfflineCapability() {
            if (window.electron) {
                const offlineStatus = await window.electron.offlineModeGet();
                if (!offlineStatus.hasPin) {
                    window.location.href = '/login/login';
                }
            }
        }

        checkOfflineCapability().then();
    }, []);

    return (
        <main className="flex min-h-screen flex-col items-center justify-center bg-background text-textPrimary">
            <div className="w-full max-w-md px-4">
                {/* Offline indicator */}
                <div className="mb-6 flex items-center justify-center">
                    <div className="px-4 py-2 bg-warning/10 border border-warning/30 rounded-full flex items-center gap-2">
                        <FontAwesomeIcon icon={faWifi} className="w-4 h-4 text-warning" />
                        <span className="text-sm text-warning font-medium">{t('offline.mode.title')}</span>
                    </div>
                </div>

                {/* Logo */}
                <div className="flex justify-center mb-8">
                    <img
                        src="/logo.png"
                        alt="ERitors"
                        className="object-contain w-full max-w-[240px] h-[80px]"
                    />
                </div>

                {/* PIN Verify Component */}
                <OfflinePinVerify
                    onSuccess={handlePinSuccess}
                    onCancel={handleBackToOnline}
                />

                {/* Back to online link */}
                <div className="mt-6 text-center">
                    <button
                        onClick={handleBackToOnline}
                        className="text-sm text-muted hover:text-textPrimary transition-colors inline-flex items-center gap-2"
                    >
                        <FontAwesomeIcon icon={faArrowLeft} className="w-3 h-3" />
                        {t('offline.mode.backToOnline')}
                    </button>
                </div>
            </div>
        </main>
    );
}