/**
 * 04 - Events - טיפול באירועים ב-React
 * 
 * React משתמשת במערכת אירועים דומה ל-HTML,
 * אבל עם שמות ב-camelCase והעברת פונקציות.
 */

import React, { useState } from 'react';

// ============================================
// onClick - לחיצה
// ============================================

function ClickExample() {
    const [clicks, setClicks] = useState(0);

    const handleClick = () => {
        setClicks(c => c + 1);
    };

    const handleDoubleClick = () => {
        alert('לחיצה כפולה!');
    };

    return (
        <div className="click-example">
            <h3>אירועי לחיצה</h3>
            <button onClick={handleClick}>
                לחצת {clicks} פעמים
            </button>
            <button onDoubleClick={handleDoubleClick}>
                לחץ לחיצה כפולה
            </button>
        </div>
    );
}

// ============================================
// onChange - שינוי ערך
// ============================================

function InputExample() {
    const [text, setText] = useState('');
    const [number, setNumber] = useState(0);
    const [selected, setSelected] = useState('');

    return (
        <div className="input-example">
            <h3>אירועי שינוי</h3>

            <div>
                <input
                    type="text"
                    value={text}
                    onChange={(e) => setText(e.target.value)}
                    placeholder="הקלד טקסט..."
                />
                <span>הקלדת: {text}</span>
            </div>

            <div>
                <input
                    type="number"
                    value={number}
                    onChange={(e) => setNumber(Number(e.target.value))}
                />
                <span>מספר: {number} (×2 = {number * 2})</span>
            </div>

            <div>
                <select value={selected} onChange={(e) => setSelected(e.target.value)}>
                    <option value="">בחר אפשרות</option>
                    <option value="א">אפשרות א'</option>
                    <option value="ב">אפשרות ב'</option>
                    <option value="ג">אפשרות ג'</option>
                </select>
                <span>בחרת: {selected}</span>
            </div>
        </div>
    );
}

// ============================================
// onSubmit - שליחת טופס
// ============================================

function FormExample() {
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        message: ''
    });
    const [submitted, setSubmitted] = useState(false);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({ ...prev, [name]: value }));
    };

    const handleSubmit = (e) => {
        e.preventDefault(); // מונע רענון הדף!
        console.log('נתוני הטופס:', formData);
        setSubmitted(true);
    };

    const handleReset = () => {
        setFormData({ name: '', email: '', message: '' });
        setSubmitted(false);
    };

    if (submitted) {
        return (
            <div className="form-success">
                <h3>✅ הטופס נשלח!</h3>
                <p>שם: {formData.name}</p>
                <p>אימייל: {formData.email}</p>
                <p>הודעה: {formData.message}</p>
                <button onClick={handleReset}>שלח שוב</button>
            </div>
        );
    }

    return (
        <form onSubmit={handleSubmit} onReset={handleReset}>
            <h3>טופס יצירת קשר</h3>

            <input
                name="name"
                value={formData.name}
                onChange={handleChange}
                placeholder="שם מלא"
                required
            />

            <input
                name="email"
                type="email"
                value={formData.email}
                onChange={handleChange}
                placeholder="אימייל"
                required
            />

            <textarea
                name="message"
                value={formData.message}
                onChange={handleChange}
                placeholder="הודעה"
                rows={4}
            />

            <div>
                <button type="submit">שלח</button>
                <button type="reset">נקה</button>
            </div>
        </form>
    );
}

// ============================================
// אירועי מקלדת
// ============================================

function KeyboardExample() {
    const [lastKey, setLastKey] = useState('');
    const [isEnterPressed, setIsEnterPressed] = useState(false);

    const handleKeyDown = (e) => {
        setLastKey(e.key);
        if (e.key === 'Enter') {
            setIsEnterPressed(true);
            setTimeout(() => setIsEnterPressed(false), 500);
        }
    };

    return (
        <div className="keyboard-example">
            <h3>אירועי מקלדת</h3>
            <input
                type="text"
                onKeyDown={handleKeyDown}
                placeholder="לחץ על מקשים..."
            />
            <p>מקש אחרון: <kbd>{lastKey}</kbd></p>
            {isEnterPressed && <p style={{ color: 'green' }}>Enter נלחץ! ✓</p>}
        </div>
    );
}

// ============================================
// אירועי עכבר
// ============================================

function MouseExample() {
    const [position, setPosition] = useState({ x: 0, y: 0 });
    const [isHovering, setIsHovering] = useState(false);

    const handleMouseMove = (e) => {
        setPosition({
            x: e.clientX,
            y: e.clientY
        });
    };

    return (
        <div className="mouse-example">
            <h3>אירועי עכבר</h3>

            <div
                onMouseMove={handleMouseMove}
                style={{
                    width: '200px',
                    height: '100px',
                    backgroundColor: '#f0f0f0',
                    padding: '10px'
                }}
            >
                הזז את העכבר כאן
                <p>מיקום: X={position.x}, Y={position.y}</p>
            </div>

            <div
                onMouseEnter={() => setIsHovering(true)}
                onMouseLeave={() => setIsHovering(false)}
                style={{
                    width: '200px',
                    height: '50px',
                    backgroundColor: isHovering ? '#3498db' : '#bdc3c7',
                    color: isHovering ? 'white' : 'black',
                    padding: '10px',
                    transition: 'all 0.3s'
                }}
            >
                {isHovering ? 'העכבר מעל! 🎯' : 'עבור עם העכבר'}
            </div>
        </div>
    );
}

// ============================================
// אירועי פוקוס
// ============================================

function FocusExample() {
    const [isFocused, setIsFocused] = useState(false);

    return (
        <div className="focus-example">
            <h3>אירועי פוקוס</h3>
            <input
                type="text"
                onFocus={() => setIsFocused(true)}
                onBlur={() => setIsFocused(false)}
                placeholder="לחץ כאן..."
                style={{
                    borderColor: isFocused ? '#3498db' : '#ddd',
                    borderWidth: '2px'
                }}
            />
            <p>{isFocused ? '🔵 בפוקוס' : '⚪ לא בפוקוס'}</p>
        </div>
    );
}

// ============================================
// העברת פרמטרים נוספים
// ============================================

function ParametersExample() {
    const [selected, setSelected] = useState(null);
    const items = ['תפוח', 'בננה', 'תפוז', 'אבטיח'];

    const handleItemClick = (item, index) => {
        console.log(`נבחר: ${item} (אינדקס ${index})`);
        setSelected(item);
    };

    return (
        <div className="parameters-example">
            <h3>העברת פרמטרים</h3>
            <ul>
                {items.map((item, index) => (
                    <li
                        key={item}
                        onClick={() => handleItemClick(item, index)}
                        style={{
                            cursor: 'pointer',
                            backgroundColor: selected === item ? '#3498db' : 'transparent',
                            color: selected === item ? 'white' : 'black',
                            padding: '5px'
                        }}
                    >
                        {item}
                    </li>
                ))}
            </ul>
            <p>נבחר: {selected || 'לא נבחר'}</p>
        </div>
    );
}

// ============================================
// קומפוננטה ראשית
// ============================================

function App() {
    return (
        <div className="app" style={{ padding: '20px' }}>
            <h1>דוגמאות אירועים</h1>

            <ClickExample />
            <hr />

            <InputExample />
            <hr />

            <FormExample />
            <hr />

            <KeyboardExample />
            <hr />

            <MouseExample />
            <hr />

            <FocusExample />
            <hr />

            <ParametersExample />
        </div>
    );
}

export default App;