/**
 * 08 - Todo App - אפליקציית משימות מלאה
 * 
 * דוגמה מקיפה שמשלבת את כל מה שלמדנו:
 * - Components
 * - Props
 * - State
 * - Events
 * - Conditional rendering
 * - Lists
 */

import React, { useState, useEffect } from 'react';

// ============================================
// סגנונות (inline styles)
// ============================================

const styles = {
    app: {
        maxWidth: '500px',
        margin: '0 auto',
        padding: '20px',
        fontFamily: 'Arial, sans-serif',
        direction: 'rtl'
    },
    header: {
        textAlign: 'center',
        marginBottom: '20px'
    },
    title: {
        color: '#2c3e50',
        fontSize: '2rem',
        margin: 0
    },
    inputContainer: {
        display: 'flex',
        gap: '10px',
        marginBottom: '20px'
    },
    input: {
        flex: 1,
        padding: '12px',
        fontSize: '16px',
        border: '2px solid #ddd',
        borderRadius: '8px',
        outline: 'none'
    },
    addButton: {
        padding: '12px 24px',
        backgroundColor: '#3498db',
        color: 'white',
        border: 'none',
        borderRadius: '8px',
        fontSize: '16px',
        cursor: 'pointer'
    },
    filters: {
        display: 'flex',
        justifyContent: 'center',
        gap: '10px',
        marginBottom: '20px'
    },
    filterButton: (isActive) => ({
        padding: '8px 16px',
        backgroundColor: isActive ? '#3498db' : 'white',
        color: isActive ? 'white' : '#333',
        border: '1px solid #ddd',
        borderRadius: '20px',
        cursor: 'pointer'
    }),
    todoList: {
        listStyle: 'none',
        padding: 0
    },
    todoItem: (completed) => ({
        display: 'flex',
        alignItems: 'center',
        gap: '12px',
        padding: '16px',
        marginBottom: '8px',
        backgroundColor: completed ? '#f8f9fa' : 'white',
        border: '1px solid #ddd',
        borderRadius: '8px',
        transition: 'all 0.2s'
    }),
    checkbox: {
        width: '24px',
        height: '24px',
        cursor: 'pointer'
    },
    todoText: (completed) => ({
        flex: 1,
        fontSize: '16px',
        textDecoration: completed ? 'line-through' : 'none',
        color: completed ? '#999' : '#333'
    }),
    deleteButton: {
        padding: '8px 12px',
        backgroundColor: '#e74c3c',
        color: 'white',
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer'
    },
    editInput: {
        flex: 1,
        padding: '8px',
        fontSize: '16px',
        border: '2px solid #3498db',
        borderRadius: '4px'
    },
    footer: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '16px 0',
        borderTop: '1px solid #ddd',
        color: '#666'
    },
    clearButton: {
        padding: '8px 16px',
        backgroundColor: 'transparent',
        color: '#e74c3c',
        border: '1px solid #e74c3c',
        borderRadius: '4px',
        cursor: 'pointer'
    },
    emptyState: {
        textAlign: 'center',
        padding: '40px',
        color: '#999'
    }
};

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

function TodoItem({ todo, onToggle, onDelete, onEdit }) {
    const [isEditing, setIsEditing] = useState(false);
    const [editText, setEditText] = useState(todo.text);

    const handleSave = () => {
        if (editText.trim()) {
            onEdit(todo.id, editText.trim());
            setIsEditing(false);
        }
    };

    const handleKeyPress = (e) => {
        if (e.key === 'Enter') {
            handleSave();
        } else if (e.key === 'Escape') {
            setEditText(todo.text);
            setIsEditing(false);
        }
    };

    return (
        <li style={styles.todoItem(todo.completed)}>
            <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => onToggle(todo.id)}
                style={styles.checkbox}
            />

            {isEditing ? (
                <>
                    <input
                        type="text"
                        value={editText}
                        onChange={(e) => setEditText(e.target.value)}
                        onKeyDown={handleKeyPress}
                        onBlur={handleSave}
                        style={styles.editInput}
                        autoFocus
                    />
                </>
            ) : (
                <>
                    <span
                        style={styles.todoText(todo.completed)}
                        onDoubleClick={() => !todo.completed && setIsEditing(true)}
                    >
                        {todo.text}
                    </span>

                    {!todo.completed && (
                        <button
                            onClick={() => setIsEditing(true)}
                            style={{
                                background: 'transparent',
                                border: 'none',
                                cursor: 'pointer',
                                fontSize: '16px'
                            }}
                        >
                            ✏️
                        </button>
                    )}
                </>
            )}

            <button
                onClick={() => onDelete(todo.id)}
                style={styles.deleteButton}
            >
                🗑️
            </button>
        </li>
    );
}

// ============================================
// קומפוננטת פילטרים
// ============================================

function TodoFilters({ filter, onFilterChange, counts }) {
    const filters = [
        { key: 'all', label: `הכל (${counts.all})` },
        { key: 'active', label: `פעילות (${counts.active})` },
        { key: 'completed', label: `הושלמו (${counts.completed})` }
    ];

    return (
        <div style={styles.filters}>
            {filters.map(f => (
                <button
                    key={f.key}
                    onClick={() => onFilterChange(f.key)}
                    style={styles.filterButton(filter === f.key)}
                >
                    {f.label}
                </button>
            ))}
        </div>
    );
}

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

function TodoInput({ onAdd }) {
    const [text, setText] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        if (text.trim()) {
            onAdd(text.trim());
            setText('');
        }
    };

    return (
        <form onSubmit={handleSubmit} style={styles.inputContainer}>
            <input
                type="text"
                value={text}
                onChange={(e) => setText(e.target.value)}
                placeholder="הוסף משימה חדשה..."
                style={styles.input}
            />
            <button type="submit" style={styles.addButton}>
                ➕ הוסף
            </button>
        </form>
    );
}

// ============================================
// קומפוננטת כותרת תחתונה
// ============================================

function TodoFooter({ activeCount, hasCompleted, onClearCompleted }) {
    return (
        <div style={styles.footer}>
            <span>
                {activeCount === 0
                    ? '🎉 כל המשימות הושלמו!'
                    : `נותרו ${activeCount} משימות`
                }
            </span>

            {hasCompleted && (
                <button
                    onClick={onClearCompleted}
                    style={styles.clearButton}
                >
                    נקה הושלמו
                </button>
            )}
        </div>
    );
}

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

function TodoApp() {
    // State - רשימת המשימות
    const [todos, setTodos] = useState(() => {
        // טעינה מ-localStorage אם קיים
        const saved = localStorage.getItem('todos');
        return saved ? JSON.parse(saved) : [
            { id: 1, text: 'ללמוד React', completed: true },
            { id: 2, text: 'לבנות פרויקט', completed: false },
            { id: 3, text: 'לתרגל Hooks', completed: false }
        ];
    });

    // State - פילטר נוכחי
    const [filter, setFilter] = useState('all');

    // שמירה ל-localStorage בכל שינוי
    useEffect(() => {
        localStorage.setItem('todos', JSON.stringify(todos));
    }, [todos]);

    // חישוב סטטיסטיקות
    const counts = {
        all: todos.length,
        active: todos.filter(t => !t.completed).length,
        completed: todos.filter(t => t.completed).length
    };

    // סינון לפי הפילטר הנוכחי
    const filteredTodos = todos.filter(todo => {
        if (filter === 'active') return !todo.completed;
        if (filter === 'completed') return todo.completed;
        return true; // 'all'
    });

    // פעולות על משימות
    const addTodo = (text) => {
        setTodos(prev => [
            ...prev,
            { id: Date.now(), text, completed: false }
        ]);
    };

    const toggleTodo = (id) => {
        setTodos(prev => prev.map(todo =>
            todo.id === id
                ? { ...todo, completed: !todo.completed }
                : todo
        ));
    };

    const deleteTodo = (id) => {
        setTodos(prev => prev.filter(todo => todo.id !== id));
    };

    const editTodo = (id, newText) => {
        setTodos(prev => prev.map(todo =>
            todo.id === id
                ? { ...todo, text: newText }
                : todo
        ));
    };

    const clearCompleted = () => {
        setTodos(prev => prev.filter(todo => !todo.completed));
    };

    return (
        <div style={styles.app}>
            {/* כותרת */}
            <header style={styles.header}>
                <h1 style={styles.title}>📝 רשימת משימות</h1>
            </header>

            {/* שדה הוספה */}
            <TodoInput onAdd={addTodo} />

            {/* פילטרים */}
            <TodoFilters
                filter={filter}
                onFilterChange={setFilter}
                counts={counts}
            />

            {/* רשימת משימות */}
            {filteredTodos.length === 0 ? (
                <div style={styles.emptyState}>
                    <p style={{ fontSize: '3rem' }}>📭</p>
                    <p>אין משימות להצגה</p>
                </div>
            ) : (
                <ul style={styles.todoList}>
                    {filteredTodos.map(todo => (
                        <TodoItem
                            key={todo.id}
                            todo={todo}
                            onToggle={toggleTodo}
                            onDelete={deleteTodo}
                            onEdit={editTodo}
                        />
                    ))}
                </ul>
            )}

            {/* כותרת תחתונה */}
            {todos.length > 0 && (
                <TodoFooter
                    activeCount={counts.active}
                    hasCompleted={counts.completed > 0}
                    onClearCompleted={clearCompleted}
                />
            )}
        </div>
    );
}

export default TodoApp;

// ============================================
// הערות:
// ============================================
/*
    אפליקציה זו מדגימה:
    
    ✅ Components - פירוק לקומפוננטות קטנות וממוקדות
    ✅ Props - העברת נתונים ופונקציות בין קומפוננטות
    ✅ State - ניהול רשימת משימות ופילטר
    ✅ Events - טיפול בקליקים, שינויים והגשת טופס
    ✅ Conditional Rendering - הצגה לפי מצב
    ✅ Lists - רינדור רשימת משימות עם map ו-key
    ✅ useEffect - שמירה ל-localStorage
    ✅ useState עם initializer function - טעינה מ-localStorage
    
    פיצ'רים:
    - הוספת משימה חדשה
    - סימון משימה כהושלמה
    - עריכת משימה (לחיצה כפולה)
    - מחיקת משימה
    - סינון לפי סטטוס
    - ניקוי משימות שהושלמו
    - שמירה אוטומטית ל-localStorage
*/