import React, { useState, useEffect } from 'react';
import './App.css';
import TaskForm from './components/TaskForm';
import TaskList from './components/TaskList';
import TaskStats from './components/TaskStats';

function App() {
  const [tasks, setTasks] = useState([]);
  const [filter, setFilter] = useState('all');

  // Soo rar hawlaha marka ay app-ku furmo
  useEffect(() => {
    const savedTasks = localStorage.getItem('tasks');
    if (savedTasks) {
      setTasks(JSON.parse(savedTasks));
    }
  }, []);

  // Kaydi hawlaha mar kasta oo ay is beddelaan
  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  // Ku dar hawl cusub
  const addTask = (taskText) => {
    const newTask = {
      id: Date.now(),
      text: taskText,
      completed: false,
      createdAt: new Date().toISOString(),
    };
    setTasks([...tasks, newTask]);
  };

  // Beddel heerka dhammaystirka
  const toggleTask = (id) => {
    setTasks(tasks.map(task =>
      task.id === id ? { ...task, completed: !task.completed } : task
    ));
  };

  // Tirtir hawl
  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  // Sax hawl
  const editTask = (id, newText) => {
    setTasks(tasks.map(task =>
      task.id === id ? { ...task, text: newText } : task
    ));
  };

  // Nadiifi hawlaha la dhammaystiray
  const clearCompleted = () => {
    setTasks(tasks.filter(task => !task.completed));
  };

  // Shaandhee hawlaha
  const filteredTasks = tasks.filter(task => {
    if (filter === 'active') return !task.completed;
    if (filter === 'completed') return task.completed;
    return true;
  });

  return (
    <div className="app">
      <header className="app-header">
        <h1>⚛️ React Task Manager</h1>
        <p>Ku habboonow oo sii ahaaw mid wax soo saar leh</p>
      </header>

      <main className="app-main">
        <TaskForm onAddTask={addTask} />
        
        <TaskStats
          total={tasks.length}
          completed={tasks.filter(t => t.completed).length}
          active={tasks.filter(t => !t.completed).length}
        />

        <div className="filter-buttons">
          <button
            className={filter === 'all' ? 'active' : ''}
            onClick={() => setFilter('all')}
          >
            Dhamaan
          </button>
          <button
            className={filter === 'active' ? 'active' : ''}
            onClick={() => setFilter('active')}
          >
            Firfircoon
          </button>
          <button
            className={filter === 'completed' ? 'active' : ''}
            onClick={() => setFilter('completed')}
          >
            La dhammeeyay
          </button>
        </div>

        <TaskList
          tasks={filteredTasks}
          onToggleTask={toggleTask}
          onDeleteTask={deleteTask}
          onEditTask={editTask}
        />

        {tasks.some(t => t.completed) && (
          <button className="clear-completed" onClick={clearCompleted}>
            Nadiifi kuwa la dhammeeyay
          </button>
        )}
      </main>
    </div>
  );
}

export default App;

import React, { useState } from 'react';
import './TaskForm.css';

function TaskForm({ onAddTask }) {
  const [taskText, setTaskText] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Hubinta xogta
    if (!taskText.trim()) {
      setError('Hawshu ma noqon karto mid madhan');
      return;
    }

    if (taskText.length > 100) {
      setError('Hawshu way dheeraatay (ugu badnaan 100 xaraf)');
      return;
    }

    // Ku dar hawl
    onAddTask(taskText.trim());
    
    // Nadiifi foomka
    setTaskText('');
    setError('');
  };

  return (
    <form className="task-form" onSubmit={handleSubmit}>
      <div className="input-group">
        <input
          type="text"
          value={taskText}
          onChange={(e) => {
            setTaskText(e.target.value);
            setError('');
          }}
          placeholder="Maxaad doonaysaa inaad qabato?"
          className={error ? 'error' : ''}
          maxLength={100}
        />
        <button type="submit">
          Ku dar hawl
        </button>
      </div>
      {error && <p className="error-message">{error}</p>}
      <p className="char-count">
        {taskText.length}/100 xaraf
      </p>
    </form>
  );
}

export default TaskForm;

import React from 'react';
import TaskItem from './TaskItem';
import './TaskList.css';

function TaskList({ tasks, onToggleTask, onDeleteTask, onEditTask }) {
  if (tasks.length === 0) {
    return (
      <div className="empty-state">
        <div className="empty-icon">📝</div>
        <h3>Weli hawlo ma jiraan</h3>
        <p>Kudar hawl si aad u bilaabato!</p>
      </div>
    );
  }

  return (
    <ul className="task-list">
      {tasks.map(task => (
        <TaskItem
          key={task.id}
          task={task}
          onToggle={onToggleTask}
          onDelete={onDeleteTask}
          onEdit={onEditTask}
        />
      ))}
    </ul>
  );
}

export default TaskList;

import React, { useState } from 'react';
import './TaskItem.css';

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

  const handleEdit = () => {
    if (editText.trim() && editText !== task.text) {
      onEdit(task.id, editText.trim());
    } else {
      setEditText(task.text);
    }
    setIsEditing(false);
  };

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      handleEdit();
    } else if (e.key === 'Escape') {
      setEditText(task.text);
      setIsEditing(false);
    }
  };

  return (
    <li className={`task-item ${task.completed ? 'completed' : ''}`}>
      <div className="task-content">
        <input
          type="checkbox"
          checked={task.completed}
          onChange={() => onToggle(task.id)}
          className="task-checkbox"
        />
        
        {isEditing ? (
          <input
            type="text"
            value={editText}
            onChange={(e) => setEditText(e.target.value)}
            onBlur={handleEdit}
            onKeyDown={handleKeyDown}
            className="task-edit-input"
            autoFocus
          />
        ) : (
          <span
            className="task-text"
            onDoubleClick={() => !task.completed && setIsEditing(true)}
          >
            {task.text}
          </span>
        )}
      </div>

      <div className="task-actions">
        {!task.completed && !isEditing && (
          <button
            onClick={() => setIsEditing(true)}
            className="btn-edit"
            title="Sax hawshan"
          >
            ✏️
          </button>
        )}
        <button
          onClick={() => onDelete(task.id)}
          className="btn-delete"
          title="Tirtir hawshan"
        >
          🗑️
        </button>
      </div>

      <div className="task-meta">
        <small>{new Date(task.createdAt).toLocaleDateString()}</small>
      </div>
    </li>
  );
}

export default TaskItem;

import React from 'react';
import './TaskStats.css';

function TaskStats({ total, completed, active }) {
  const completionRate = total > 0 ? Math.round((completed / total) * 100) : 0;

  return (
    <div className="task-stats">
      <div className="stat-card">
        <div className="stat-icon">📊</div>
        <div className="stat-content">
          <p className="stat-value">{total}</p>
          <p className="stat-label">Hawlaha oo dhan</p>
        </div>
      </div>

      <div className="stat-card">
        <div className="stat-icon">✅</div>
        <div className="stat-content">
          <p className="stat-value">{completed}</p>
          <p className="stat-label">La dhammeeyay</p>
        </div>
      </div>

      <div className="stat-card">
        <div className="stat-icon">⏳</div>
        <div className="stat-content">
          <p className="stat-value">{active}</p>
          <p className="stat-label">Firfircoon</p>
        </div>
      </div>

      <div className="stat-card">
        <div className="stat-icon">📈</div>
        <div className="stat-content">
          <p className="stat-value">{completionRate}%</p>
          <p className="stat-label">Heerka dhammeeynta</p>
        </div>
      </div>
    </div>
  );
}

export default TaskStats;

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

const TaskContext = createContext();

export function TaskProvider({ children }) {
  const [tasks, setTasks] = useState([]);
  const [filter, setFilter] = useState('all');

  // Soo rar hawlaha marka hore
  useEffect(() => {
    const saved = localStorage.getItem('tasks');
    if (saved) setTasks(JSON.parse(saved));
  }, []);

  // Kaydi hawlaha markay is beddelaan
  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  const addTask = (text) => {
    setTasks([...tasks, {
      id: Date.now(),
      text,
      completed: false,
      createdAt: new Date().toISOString(),
    }]);
  };

  const toggleTask = (id) => {
    setTasks(tasks.map(t =>
      t.id === id ? { ...t, completed: !t.completed } : t
    ));
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(t => t.id !== id));
  };

  const value = {
    tasks,
    filter,
    setFilter,
    addTask,
    toggleTask,
    deleteTask,
  };

  return (
    <TaskContext.Provider value={value}>
      {children}
    </TaskContext.Provider>
  );
}

export function useTasks() {
  const context = useContext(TaskContext);
  if (!context) {
    throw new Error('useTasks waa in lagu isticmaalaa gudaha TaskProvider');
  }
  return context;
}

import { useMemo } from 'react';

function TaskList({ tasks }) {
  const sortedTasks = useMemo(() => {
    return [...tasks].sort((a, b) => 
      new Date(b.createdAt) - new Date(a.createdAt)
    );
  }, [tasks]);

  return <div>{/* soo bandhig sortedTasks */}</div>;
}

import { useCallback } from 'react';

function App() {
  const handleTaskAdd = useCallback((text) => {
    // Ku dar hawl cusub
  }, []);

  return <TaskForm onAdd={handleTaskAdd} />;
}

import { useReducer } from 'react';

const taskReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TASK':
      return [...state, action.payload];
    case 'TOGGLE_TASK':
      return state.map(task =>
        task.id === action.payload
          ? { ...task, completed: !task.completed }
          : task
      );
    case 'DELETE_TASK':
      return state.filter(task => task.id !== action.payload);
    default:
      return state;
  }
};

function App() {
  const [tasks, dispatch] = useReducer(taskReducer, []);

  const addTask = (text) => {
    dispatch({ type: 'ADD_TASK', payload: { id: Date.now(), text } });
  };

  return <div>{/* Ku dhis UI-gaaga */}</div>;
}

import { useState, useEffect } from 'react';

function useApi(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

// Isticmaalka
function ProductList() {
  const { data, loading, error } = useApi('/api/products');

  if (loading) return <div>Fadlan sug...</div>;
  if (error) return <div>Khalad: {error.message}</div>;

  return <div>{/* soo bandhig alaabta */}</div>;
}

import { lazy, Suspense } from 'react';

const TaskList = lazy(() => import('./components/TaskList'));

function App() {
  return (
    <Suspense fallback={<div>Fadlan sug...</div>}>
      <TaskList />
    </Suspense>
  );
}

import { memo } from 'react';

const TaskItem = memo(({ task, onToggle, onDelete }) => {
  return <li>{/* wax ka qabso hawsha */}</li>;
}, (prevProps, nextProps) => {
  // Ku celceli kaliya haddii hawshu is beddesho
  return prevProps.task.id === nextProps.task.id &&
         prevProps.task.completed === nextProps.task.completed;
});

import { FixedSizeList } from 'react-window';

function LargeTaskList({ tasks }) {
  return (
    <FixedSizeList
      height={600}
      itemCount={tasks.length}
      itemSize={50}
    >
      {({ index, style }) => (
        <div style={style}>
          {tasks[index].text}
        </div>
      )}
    </FixedSizeList>
  );
}

import { render, screen, fireEvent } from '@testing-library/react';
import TaskForm from './TaskForm';

test('adds a new task', () => {
  const handleAdd = jest.fn();
  render(<TaskForm onAddTask={handleAdd} />);

  const input = screen.getByPlaceholderText(/maxaad doonaysaa inaad qabato/i);
  const button = screen.getByText(/ku dar hawl/i);

  fireEvent.change(input, { target: { value: 'Hawl cusub' } });
  fireEvent.click(button);

  expect(handleAdd).toHaveBeenCalledWith('Hawl cusub');
});

import React, { useState, useEffect } from 'react';
import './App.css';
import TaskForm from './components/TaskForm';
import TaskList from './components/TaskList';
import TaskStats from './components/TaskStats';

function App() {
  const [tasks, setTasks] = useState([]);
  const [filter, setFilter] = useState('all');

  // Load tasks from localStorage on mount
  useEffect(() => {
    const savedTasks = localStorage.getItem('tasks');
    if (savedTasks) {
      setTasks(JSON.parse(savedTasks));
    }
  }, []);

  // Save tasks to localStorage whenever they change
  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  // Add new task
  const addTask = (taskText) => {
    const newTask = {
      id: Date.now(),
      text: taskText,
      completed: false,
      createdAt: new Date().toISOString(),
    };
    setTasks([...tasks, newTask]);
  };

  // Toggle task completion
  const toggleTask = (id) => {
    setTasks(tasks.map(task =>
      task.id === id ? { ...task, completed: !task.completed } : task
    ));
  };

  // Delete task
  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  // Edit task
  const editTask = (id, newText) => {
    setTasks(tasks.map(task =>
      task.id === id ? { ...task, text: newText } : task
    ));
  };

  // Clear completed tasks
  const clearCompleted = () => {
    setTasks(tasks.filter(task => !task.completed));
  };

  // Filter tasks
  const filteredTasks = tasks.filter(task => {
    if (filter === 'active') return !task.completed;
    if (filter === 'completed') return task.completed;
    return true;
  });

  return (
    <div className="app">
      <header className="app-header">
        <h1>⚛️ React Task Manager</h1>
        <p>Stay organized and productive</p>
      </header>

      <main className="app-main">
        <TaskForm onAddTask={addTask} />
        
        <TaskStats
          total={tasks.length}
          completed={tasks.filter(t => t.completed).length}
          active={tasks.filter(t => !t.completed).length}
        />

        <div className="filter-buttons">
          <button
            className={filter === 'all' ? 'active' : ''}
            onClick={() => setFilter('all')}
          >
            All
          </button>
          <button
            className={filter === 'active' ? 'active' : ''}
            onClick={() => setFilter('active')}
          >
            Active
          </button>
          <button
            className={filter === 'completed' ? 'active' : ''}
            onClick={() => setFilter('completed')}
          >
            Completed
          </button>
        </div>

        <TaskList
          tasks={filteredTasks}
          onToggleTask={toggleTask}
          onDeleteTask={deleteTask}
          onEditTask={editTask}
        />

        {tasks.some(t => t.completed) && (
          <button className="clear-completed" onClick={clearCompleted}>
            Clear Completed
          </button>
        )}
      </main>
    </div>
  );
}

export default App;