const TasksView = ({ tasks, accounts, currentUser, onSelectAccount, onComplete, onDelete, onCreateTask }) => {
    const [filter, setFilter]       = React.useState('all');
    const [showNewTask, setShowNewTask] = React.useState(false);

    const today = new Date(); today.setHours(0, 0, 0, 0);
    const endOfWeek = new Date(today); endOfWeek.setDate(today.getDate() + 7);

    const overdueCt = tasks.filter(t => t.due_date && new Date(new Date(t.due_date).setHours(0,0,0,0)) < today).length;
    const todayCt   = tasks.filter(t => t.due_date && new Date(new Date(t.due_date).setHours(0,0,0,0)).getTime() === today.getTime()).length;
    const weekCt    = tasks.filter(t => {
        if (!t.due_date) return false;
        const d = new Date(new Date(t.due_date).setHours(0,0,0,0));
        return d >= today && d <= endOfWeek;
    }).length;

    const filtered = tasks.filter(t => {
        if (filter === 'all') return true;
        if (!t.due_date) return false;
        const d = new Date(new Date(t.due_date).setHours(0,0,0,0));
        if (filter === 'overdue') return d < today;
        if (filter === 'today')   return d.getTime() === today.getTime();
        if (filter === 'week')    return d >= today && d <= endOfWeek;
        return true;
    }).slice().sort((a, b) => {
        if (!a.due_date && !b.due_date) return 0;
        if (!a.due_date) return 1;
        if (!b.due_date) return -1;
        return new Date(a.due_date) - new Date(b.due_date);
    });

    const PRIORITY_COLOR = { urgent: '#dc2626', high: '#ef4444', medium: '#f59e0b', low: '#6b7280', normal: '#6b7280' };

    const handleCreate = async (formData) => {
        await onCreateTask(formData);
        setShowNewTask(false);
    };

    return (
        <div className="tasks-page">

            {/* ── Header ── */}
            <div className="tasks-page-header">
                <div>
                    <h1 className="tasks-page-title"><i className="fas fa-tasks" style={{ marginRight: '0.5rem', color: '#3b82f6' }}></i>Tasks</h1>
                    <p className="tasks-page-sub">{tasks.length} open {tasks.length === 1 ? 'task' : 'tasks'}{overdueCt > 0 ? ` · ${overdueCt} overdue` : ''}</p>
                </div>
                <button className="btn btn-primary" onClick={() => setShowNewTask(true)}>
                    <i className="fas fa-plus"></i> New Task
                </button>
            </div>

            {/* ── Filter chips ── */}
            <div className="tasks-filter-bar">
                {[
                    { id: 'all',     label: `All (${tasks.length})` },
                    { id: 'overdue', label: `Overdue (${overdueCt})`, danger: overdueCt > 0 },
                    { id: 'today',   label: `Due Today (${todayCt})` },
                    { id: 'week',    label: `This Week (${weekCt})` },
                ].map(f => (
                    <button
                        key={f.id}
                        className={`filter-chip ${filter === f.id ? 'active' : ''} ${f.danger && filter !== f.id ? 'danger' : ''}`}
                        onClick={() => setFilter(f.id)}
                    >
                        {f.label}
                    </button>
                ))}
            </div>

            {/* ── Task list ── */}
            <div className="tasks-list">
                {filtered.length === 0 ? (
                    <div className="empty-state" style={{ marginTop: '3rem' }}>
                        <i className="fas fa-calendar-check empty-state-icon"></i>
                        <h3 className="empty-state-title">
                            {filter === 'all' ? 'All caught up!' : 'No tasks match this filter'}
                        </h3>
                        <p className="empty-state-message">
                            {filter === 'all' ? 'No open tasks right now.' : 'Try a different filter or create a new task.'}
                        </p>
                    </div>
                ) : filtered.map(task => {
                    const account    = accounts.find(a => a.id === task.account_id);
                    const statusClass = getTaskStatusClass(task.due_date);
                    const prioColor  = PRIORITY_COLOR[task.priority] || '#6b7280';

                    return (
                        <div key={task.id} className={`task-row ${statusClass}`}>
                            {/* Priority bar */}
                            <div className="task-row-priority" style={{ background: prioColor }}></div>

                            {/* Body */}
                            <div className="task-row-body">
                                <div className="task-row-main">
                                    <button
                                        className="task-account-link"
                                        onClick={() => account && onSelectAccount(account)}
                                        title={account ? `Open ${account.name}` : 'Account not found'}
                                    >
                                        <i className="fas fa-building"></i>
                                        {account?.name || 'Unknown Account'}
                                    </button>
                                    <span className="task-row-divider">·</span>
                                    <span className="task-row-title">{task.title}</span>
                                </div>

                                {task.notes && (
                                    <div className="task-row-notes">{task.notes}</div>
                                )}

                                <div className="task-row-meta">
                                    <span className="task-prio-badge" style={{ background: prioColor }}>
                                        {task.priority}
                                    </span>
                                    <span className="badge secondary" style={{ fontSize: '0.7rem' }}>
                                        {task.task_type.replace(/_/g, ' ')}
                                    </span>
                                    {task.due_date && (
                                        <span className={`task-due-label ${statusClass}`}>
                                            <i className="fas fa-calendar-alt"></i> {formatDate(task.due_date)}
                                            {statusClass === 'overdue' && ' — Overdue'}
                                            {statusClass === 'today'   && ' — Due Today'}
                                        </span>
                                    )}
                                </div>
                            </div>

                            {/* Actions */}
                            <div className="task-row-actions">
                                <button className="btn btn-primary btn-small" onClick={() => onComplete(task.id)} title="Mark complete">
                                    <i className="fas fa-check"></i> Done
                                </button>
                                <button className="btn btn-danger btn-small" onClick={() => onDelete(task.id)} title="Delete task">
                                    <i className="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    );
                })}
            </div>

            {/* ── New Task Modal ── */}
            <Modal isOpen={showNewTask} onClose={() => setShowNewTask(false)} title="New Task">
                <TaskForm
                    accounts={accounts}
                    onSubmit={handleCreate}
                    onCancel={() => setShowNewTask(false)}
                />
            </Modal>
        </div>
    );
};