'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';
import * as tauri from '@/lib/tauri';

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

    async function handlePinSuccess(userId: string): Promise<void> {
        try {
            const encryptionKey = await tauri.getUserEncryptionKey(userId);
            if (encryptionKey) {
                await tauri.dbInitialize(userId, encryptionKey);
                await tauri.loginSuccess();
            }
        } catch (error) {
            console.error('[OfflineLogin] Error initializing database:', error);
        }
    }

    function handleBackToOnline(): void {
        tauri.logout();
    }

    useEffect((): void => {
        async function checkOfflineCapability() {
            const offlineStatus = await tauri.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>
    );
}