'use client';

import {useEffect} from 'react';
import OfflinePinVerify from '@/components/offline/OfflinePinVerify';
import {useTranslations} from '@/lib/i18n';
import {Wifi, ArrowLeft} from 'lucide-react';
import Button from '@/components/ui/Button';
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-tertiary text-text-primary p-4 font-['Lora']">
            <div className="w-full max-w-md px-4 py-10">
                <div className="flex justify-center mb-8">
                    <img src="/logo.png" alt="ERitors" className="object-contain" style={{width: 320, height: 107}}/>
                </div>

                <div className="text-center mb-6">
                    <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-warning/10 border border-warning/30 rounded-full mb-3">
                        <Wifi className="w-4 h-4 text-warning" strokeWidth={1.75}/>
                        <span className="text-sm text-warning font-medium">{t('offline.mode.title')}</span>
                    </div>
                </div>

                <div className="bg-darkest-background rounded-xl p-5 mb-4">
                    <OfflinePinVerify
                        onSuccess={handlePinSuccess}
                        onCancel={handleBackToOnline}
                    />
                </div>

                <Button variant="ghost" fullWidth icon={ArrowLeft} onClick={handleBackToOnline}>
                    {t('offline.mode.backToOnline')}
                </Button>
            </div>
        </main>
    );
}