/**
 * 03 - State - ניהול מצב בקומפוננטה
 * 
 * useState הוא Hook שמאפשר לנו לשמור ולעדכן
 * נתונים שמשתנים לאורך זמן בקומפוננטה.
 */

import React, { useState } from 'react';

// ============================================
// מונה פשוט
// ============================================

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div className="counter">
            <h2>מונה: {count}</h2>
            <button onClick={() => setCount(count + 1)}>➕ הוסף</button>
            <button onClick={() => setCount(count - 1)}>➖ הפחת</button>
            <button onClick={() => setCount(0)}>🔄 אפס</button>
        </div>
    );
}

// ============================================
// Toggle (החלפת מצב)
// ============================================

function Toggle() {
    const [isOn, setIsOn] = useState(false);

    return (
        <div className="toggle">
            <p>מצב: {isOn ? '🔵 פועל' : '⚪ כבוי'}</p>
            <button onClick={() => setIsOn(!isOn)}>
                {isOn ? 'כבה' : 'הפעל'}
            </button>
        </div>
    );
}

// ============================================
// State עם מחרוזת (Input)
// ============================================

function NameInput() {
    const [name, setName] = useState('');

    return (
        <div className="name-input">
            <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="הקלד את שמך..."
            />
            <p>שלום, {name || 'אורח'}!</p>
        </div>
    );
}

// ============================================
// State עם אובייקט
// ============================================

function UserForm() {
    const [user, setUser] = useState({
        firstName: '',
        lastName: '',
        email: ''
    });

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

    return (
        <div className="user-form">
            <h3>טופס משתמש</h3>
            <input
                placeholder="שם פרטי"
                value={user.firstName}
                onChange={handleChange('firstName')}
            />
            <input
                placeholder="שם משפחה"
                value={user.lastName}
                onChange={handleChange('lastName')}
            />
            <input
                placeholder="אימייל"
                type="email"
                value={user.email}
                onChange={handleChange('email')}
            />
            <div className="preview">
                <p>שם מלא: {user.firstName} {user.lastName}</p>
                <p>אימייל: {user.email}</p>
            </div>
        </div>
    );
}

// ============================================
// State עם מערך
// ============================================

function ShoppingList() {
    const [items, setItems] = useState([
        'חלב',
        'לחם',
        'ביצים'
    ]);
    const [newItem, setNewItem] = useState('');

    const addItem = () => {
        if (newItem.trim()) {
            setItems([...items, newItem.trim()]);
            setNewItem('');
        }
    };

    const removeItem = (index) => {
        setItems(items.filter((_, i) => i !== index));
    };

    return (
        <div className="shopping-list">
            <h3>רשימת קניות</h3>
            <div>
                <input
                    value={newItem}
                    onChange={(e) => setNewItem(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && addItem()}
                    placeholder="הוסף פריט..."
                />
                <button onClick={addItem}>➕</button>
            </div>
            <ul>
                {items.map((item, index) => (
                    <li key={index}>
                        {item}
                        <button onClick={() => removeItem(index)}>❌</button>
                    </li>
                ))}
            </ul>
            <p>סה"כ: {items.length} פריטים</p>
        </div>
    );
}

// ============================================
// מספר States בקומפוננטה אחת
// ============================================

function MultipleStates() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('');
    const [isVisible, setIsVisible] = useState(true);

    return (
        <div className="multiple-states">
            <h3>מספר States</h3>

            <div>
                <p>מונה: {count}</p>
                <button onClick={() => setCount(c => c + 1)}>+1</button>
            </div>

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

            <div>
                <button onClick={() => setIsVisible(!isVisible)}>
                    {isVisible ? 'הסתר' : 'הצג'}
                </button>
                {isVisible && <p>אני נראה! 👀</p>}
            </div>
        </div>
    );
}

// ============================================
// Functional Updates (עדכון מבוסס קודם)
// ============================================

function FunctionalUpdates() {
    const [count, setCount] = useState(0);

    // ❌ שיטה בעייתית (לא מומלץ לעדכונים מרובים)
    const incrementBad = () => {
        setCount(count + 1);
        setCount(count + 1);
        setCount(count + 1);
        // התוצאה: +1 (לא +3!)
    };

    // ✅ שיטה נכונה - functional update
    const incrementGood = () => {
        setCount(prev => prev + 1);
        setCount(prev => prev + 1);
        setCount(prev => prev + 1);
        // התוצאה: +3
    };

    return (
        <div className="functional-updates">
            <h3>Functional Updates</h3>
            <p>מונה: {count}</p>
            <button onClick={incrementBad}>+3 (שיטה בעייתית)</button>
            <button onClick={incrementGood}>+3 (שיטה נכונה)</button>
            <button onClick={() => setCount(0)}>אפס</button>
        </div>
    );
}

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

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

            <section>
                <Counter />
            </section>

            <hr />

            <section>
                <Toggle />
            </section>

            <hr />

            <section>
                <NameInput />
            </section>

            <hr />

            <section>
                <UserForm />
            </section>

            <hr />

            <section>
                <ShoppingList />
            </section>

            <hr />

            <section>
                <MultipleStates />
            </section>

            <hr />

            <section>
                <FunctionalUpdates />
            </section>
        </div>
    );
}

export default App;