ERitors-Scribe-Desktop/components/TermsOfUse.tsx

import React from 'react';
import {ExternalLink, FileText} from 'lucide-react';
import Button from '@/components/ui/Button';
import {isDesktop} from '@/lib/configs';
import * as tauri from '@/lib/tauri';
import {useTranslations} from '@/lib/i18n';

interface TermsOfUseProps {
    onAccept: () => void;
}

export default function TermsOfUse({onAccept}: TermsOfUseProps) {
    const t = useTranslations();

    function handleAcceptTerm(): void {
        onAccept();
    }

    async function handleRefuse(): Promise<void> {
        if (isDesktop) {
            await tauri.logout();
        } else {
            window.location.href = 'https://eritors.com';
        }
    }

    return (
        <div
            className="fixed inset-0 z-50 bg-darkest-background/90 backdrop-blur-sm flex items-center justify-center p-6 font-['Lora']">
            <div
                className="bg-tertiary border border-primary/40 rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
                <div className="px-8 py-6 border-b border-secondary bg-gradient-to-r from-primary/10 to-primary/5">
                    <div className="flex items-center space-x-4">
                        <div className="bg-primary/20 p-3 rounded-xl">
                            <FileText className="text-primary w-6 h-6" strokeWidth={1.75}/>
                        </div>
                        <div>
                            <h2 className="text-text-primary font-bold text-2xl">{t('terms.title')}</h2>
                            <p className="text-text-secondary text-sm mt-1">{t('terms.subtitle')}</p>
                        </div>
                    </div>
                </div>
                <div className="px-8 py-8 overflow-y-auto max-h-[60vh]">
                    <div className="space-y-6">
                        <div className="bg-primary/5 border border-primary/20 rounded-xl p-6">
                            <h3 className="text-text-primary font-semibold text-lg mb-4">
                                {t('terms.mandatory')}
                            </h3>
                            <div className="text-text-secondary text-base leading-relaxed space-y-4">
                                <p dangerouslySetInnerHTML={{__html: t('terms.mandatoryDesc1')}}/>
                                <p>{t('terms.mandatoryDesc2')}</p>
                                <p>{t('terms.mandatoryDesc3')}</p>
                            </div>
                        </div>

                        <div className="bg-tertiary border border-secondary rounded-xl p-6">
                            <h3 className="text-text-primary font-semibold text-lg mb-4">
                                {t('terms.fullDoc')}
                            </h3>
                            <p className="text-text-secondary text-base leading-relaxed mb-4">
                                {t('terms.fullDocDesc')}
                            </p>
                            <a
                                href="/terms"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center space-x-2 text-primary hover:text-primary-light transition-colors duration-200 font-medium"
                            >
                                <span>{t('terms.fullDocLink')}</span>
                                <ExternalLink className="w-4 h-4" strokeWidth={1.75}/>
                            </a>
                        </div>

                        <div className="bg-warning/10 border border-warning/30 rounded-xl p-6">
                            <div className="flex items-start space-x-3">
                                <div className="bg-warning/20 p-2 rounded-lg mt-1">
                                    <FileText className="text-warning w-5 h-5" strokeWidth={1.75}/>
                                </div>
                                <div>
                                    <h4 className="text-text-primary font-semibold text-base mb-2">
                                        {t('terms.importance')}
                                    </h4>
                                    <p className="text-text-secondary text-sm leading-relaxed">
                                        {t('terms.importanceDesc')}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="px-8 py-6 bg-secondary border-t border-secondary rounded-b-2xl">
                    <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-2 text-text-secondary text-sm">
                            <FileText className="text-primary w-4 h-4" strokeWidth={1.75}/>
                            <span>{t('terms.required')}</span>
                        </div>
                        <div className="flex items-center space-x-4">
                            <button
                                onClick={handleRefuse}
                                className="text-muted hover:text-text-primary px-6 py-3 rounded-xl hover:bg-secondary transition-colors duration-150 text-sm font-medium"
                                type="button"
                            >
                                {t('terms.refuse')}
                            </button>
                            <Button variant="primary" size="lg" onClick={handleAcceptTerm}>
                                {t('terms.accept')}
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}