import React, { useState, useEffect } from 'react';
import ContextualHelp from './ContextualHelp';
import { useNavigate } from 'react-router-dom';

export default function App() {
    const [keyword, setKeyword] = useState('');
    const navigate = useNavigate();

    useEffect(() => {
        const handleF1 = (e) => {
            if (e.key === 'F1') {
                e.preventDefault();
                const active = document.activeElement;
                const helpKey = active?.getAttribute('data-help');
                setKeyword(helpKey || '');
            }
        };

        // ✅ Attach F1 listener to the body
        document.body.addEventListener('keydown', handleF1);
        return () => {
            document.body.removeEventListener('keydown', handleF1);
        };
    }, []);

    return (
        <div>
            <h1>Loan Application Form</h1>

            <input data-help="loan_approval" placeholder="Loan Type" />
            <input data-help="interest_rate" placeholder="Interest %" />

            {/* ✅ New field that triggers help for "supervisory_rating_model" */}
            <input
                data-help="Supervisory Rating Model"
                placeholder="Supervisory Rating Info"
                style={{ display: 'block', marginTop: '20px' }}
            />

            {keyword && (
                <ContextualHelp
                    keyword={keyword}
                    onClose={() => setKeyword('')}
                />
            )}

            {/* Floating button to go to editor */}
            <button
                onClick={() => navigate('/editor')}
                style={{
                    position: 'fixed',
                    bottom: '20px',
                    right: '20px',
                    padding: '10px 15px',
                    fontSize: '18px',
                    borderRadius: '50%',
                    backgroundColor: '#1976d2',
                    color: '#fff',
                    border: 'none',
                    cursor: 'pointer',
                }}
            >
                ✎
            </button>
        </div>
    );
}
