// src/pages/DashboardPage.tsx
import { useState } from 'react'
import { useAuth } from '../context/AuthContext'
import { useTodos } from '../hooks/useTodos'
import Navbar from '../components/Navbar'
import TodoForm from '../components/todos/TodoForm'
import TodoList from '../components/todos/TodoList'

type FilterType = 'all' | 'pending' | 'completed'

const DashboardPage = () => {
    const { user } = useAuth()
    const { todos, isLoading, createTodo, toggleTodo, deleteTodo, updateTodo } = useTodos()
    const [filter, setFilter] = useState<FilterType>('all')

    const filteredTodos = todos.filter(todo => {
        if (filter === 'completed') return todo.completed
        if (filter === 'pending') return !todo.completed
        return true
    })

    const filters: { label: string; value: FilterType; count: number }[] = [
        { label: 'All',       value: 'all',       count: todos.length },
        { label: 'Pending',   value: 'pending',   count: todos.filter(t => !t.completed).length },
        { label: 'Completed', value: 'completed', count: todos.filter(t => t.completed).length },
    ]

    return (
        <div className="min-h-screen bg-gray-50">
            <Navbar />

            <main className="max-w-3xl mx-auto px-4 py-8">

                <div className="mb-8">
                    <h1 className="text-2xl font-bold text-gray-900">
                        Good day, {user?.name}! 
                    </h1>
                    <p className="text-gray-500 text-sm mt-1">
                        You have {todos.filter(t => !t.completed).length} pending todos
                    </p>
                </div>

                <TodoForm onSubmit={createTodo} />

                <div className="flex gap-2 mb-4">
                    {filters.map(f => (
                        <button
                            key={f.value}
                            onClick={() => setFilter(f.value)}
                            className={`
                                px-4 py-2 rounded-lg text-sm font-medium transition
                                flex items-center gap-2
                                ${filter === f.value
                                    ? 'bg-blue-600 text-white'
                                    : 'bg-white text-gray-600 border border-gray-200 hover:border-gray-300'
                                }
                            `}
                        >
                            {f.label}
                            <span className={`
                                text-xs px-1.5 py-0.5 rounded-full
                                ${filter === f.value
                                    ? 'bg-blue-500 text-white'
                                    : 'bg-gray-100 text-gray-500'
                                }
                            `}>
                                {f.count}
                            </span>
                        </button>
                    ))}
                </div>

                <TodoList
                    todos={filteredTodos}
                    onToggle={toggleTodo}
                    onDelete={deleteTodo}
                    onUpdate={updateTodo}
                    isLoading={isLoading}
                />

            </main>
        </div>
    )
}

export default DashboardPage