﻿// DailyWord Component - Displays word of the day with definition and examples
function DailyWord() {
    const [wordData, setWordData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        fetchDailyWord();
    }, []);

    const fetchDailyWord = async () => {
        try {
            setLoading(true);
            // Using Random Word API + Dictionary API
            const wordResponse = await fetch('https://random-word-api.herokuapp.com/word');
            const words = await wordResponse.json();
            const word = words[0];

            // Fetch definition
            const defResponse = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
            const defData = await defResponse.json();

            if (defData && defData[0]) {
                const entry = defData[0];
                const meaning = entry.meanings[0];

                setWordData({
                    word: word,
                    phonetic: entry.phonetic || '',
                    partOfSpeech: meaning.partOfSpeech || 'noun',
                    definition: meaning.definitions[0].definition,
                    example: meaning.definitions[0].example || null
                });
            } else {
                // Fallback word if API fails
                setWordData({
                    word: 'serendipity',
                    phonetic: '/ˌserənˈdipitē/',
                    partOfSpeech: 'noun',
                    definition: 'The occurrence and development of events by chance in a happy or beneficial way.',
                    example: 'A fortunate stroke of serendipity brought the two old friends together after years apart.'
                });
            }
        } catch (err) {
            console.error('Error fetching daily word:', err);
            // Set fallback word on error
            setWordData({
                word: 'serendipity',
                phonetic: '/ˌserənˈdipitē/',
                partOfSpeech: 'noun',
                definition: 'The occurrence and development of events by chance in a happy or beneficial way.',
                example: 'A fortunate stroke of serendipity brought the two old friends together after years apart.'
            });
        } finally {
            setLoading(false);
        }
    };

    if (loading) {
        return (
            <div className="card">
                <h3 style={{ marginBottom: '16px' }}>📚 Daily Word</h3>
                <p style={{ color: 'var(--text-secondary)' }}>Loading...</p>
            </div>
        );
    }

    if (error || !wordData) {
        return (
            <div className="card">
                <h3 style={{ marginBottom: '16px' }}>📚 Daily Word</h3>
                <p style={{ color: 'var(--text-secondary)' }}>Failed to load word of the day</p>
            </div>
        );
    }

    return (
        <div className="card">
            <h3 style={{ marginBottom: '16px' }}>📚 Daily Word</h3>
            <div style={{ padding: '12px', background: 'var(--bg-tertiary)', borderRadius: '8px', marginBottom: '12px' }}>
                <h2 style={{ margin: '0 0 8px 0', fontSize: '28px', color: 'var(--primary)' }}>
                    {wordData.word}
                </h2>
                {wordData.phonetic && (
                    <p style={{ margin: '0 0 8px 0', fontSize: '14px', color: 'var(--text-secondary)', fontStyle: 'italic' }}>
                        {wordData.phonetic}
                    </p>
                )}
                <p style={{ margin: '0', fontSize: '12px', color: 'var(--text-secondary)', textTransform: 'uppercase', fontWeight: '600' }}>
                    {wordData.partOfSpeech}
                </p>
            </div>
            <div style={{ marginBottom: '12px' }}>
                <p style={{ margin: '0 0 4px 0', fontSize: '12px', color: 'var(--text-secondary)', fontWeight: '600' }}>
                    DEFINITION:
                </p>
                <p style={{ margin: '0', fontSize: '14px', lineHeight: '1.6' }}>
                    {wordData.definition}
                </p>
            </div>
            {wordData.example && (
                <div style={{ padding: '12px', background: 'var(--bg-secondary)', borderLeft: '3px solid var(--primary)', borderRadius: '4px' }}>
                    <p style={{ margin: '0 0 4px 0', fontSize: '12px', color: 'var(--text-secondary)', fontWeight: '600' }}>
                        EXAMPLE:
                    </p>
                    <p style={{ margin: '0', fontSize: '14px', fontStyle: 'italic', lineHeight: '1.6' }}>
                        "{wordData.example}"
                    </p>
                </div>
            )}
        </div>
    );
}

// Export to global registry
window.DailyWord = DailyWord;
