scrum-manager/src/TaskDrawer.tsx

import { useState } from 'react';
import type { Task, User, Status, Priority } from './data';
import { STATUS_LABELS, getUserById } from './data';
import { Avatar, Tag, ProgressBar } from './Shared';

interface DrawerProps {
    task: Task; currentUser: User; onClose: () => void;
    onUpdate: (updated: Task) => void;
    onAddDependency: (taskId: string, dep: { dependsOnUserId: string; description: string }) => void;
    onToggleDependency: (taskId: string, depId: string, resolved: boolean) => void;
    onRemoveDependency: (taskId: string, depId: string) => void;
    users: User[];
}

export function TaskDrawer({ task, currentUser, onClose, onUpdate, onAddDependency, onToggleDependency, onRemoveDependency, users }: DrawerProps) {
    const [commentText, setCommentText] = useState('');
    const [subtaskText, setSubtaskText] = useState('');
    const [depUser, setDepUser] = useState('');
    const [depDesc, setDepDesc] = useState('');

    const updateField = (field: string, value: any) => {
        const now = new Date().toISOString();
        const updated = {
            ...task, [field]: value,
            activity: [...task.activity, { id: `a${Date.now()}`, text: `🔄 ${currentUser.name} changed ${field} to ${value}`, timestamp: now }]
        };
        onUpdate(updated);
    };

    const toggleSubtask = (sid: string) => {
        const now = new Date().toISOString();
        const subtasks = task.subtasks.map(s => s.id === sid ? { ...s, done: !s.done } : s);
        const st = subtasks.find(s => s.id === sid)!;
        onUpdate({
            ...task, subtasks,
            activity: [...task.activity, { id: `a${Date.now()}`, text: `${st.done ? '✅' : '↩️'} ${currentUser.name} ${st.done ? 'completed' : 'unchecked'} subtask "${st.title}"`, timestamp: now }]
        });
    };

    const addSubtask = () => {
        if (!subtaskText.trim()) return;
        onUpdate({ ...task, subtasks: [...task.subtasks, { id: `s${Date.now()}`, title: subtaskText, done: false }] });
        setSubtaskText('');
    };

    const addComment = () => {
        if (!commentText.trim()) return;
        const now = new Date().toISOString();
        onUpdate({
            ...task,
            comments: [...task.comments, { id: `c${Date.now()}`, userId: currentUser.id, text: commentText, timestamp: now }],
            activity: [...task.activity, { id: `a${Date.now()}`, text: `💬 ${currentUser.name} added a comment`, timestamp: now }]
        });
        setCommentText('');
    };

    const handleAddDep = () => {
        if (!depDesc.trim()) return;
        onAddDependency(task.id, { dependsOnUserId: depUser, description: depDesc });
        setDepDesc('');
        setDepUser('');
    };

    const reporter = getUserById(users, task.reporter);
    const doneCount = task.subtasks.filter(s => s.done).length;
    const unresolvedDeps = (task.dependencies || []).filter(d => !d.resolved).length;

    return (
        <>
            <div className="drawer-backdrop" onClick={onClose} />
            <div className="drawer">
                <div className="drawer-header">
                    <span className="drawer-header-label">Task Detail</span>
                    <button className="drawer-close" onClick={onClose}>✕</button>
                </div>
                <div className="drawer-body">
                    <h2 className="drawer-title">{task.title}</h2>
                    <p className="drawer-desc">{task.description}</p>

                    <div className="drawer-meta">
                        <div>
                            <div className="drawer-meta-label">Assignee</div>
                            <div className="drawer-meta-val">
                                <Avatar userId={task.assignee} size={20} users={users} />
                                <select className="drawer-select" aria-label="Assignee" value={task.assignee} onChange={e => updateField('assignee', e.target.value)}>
                                    {users.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
                                </select>
                            </div>
                        </div>
                        <div>
                            <div className="drawer-meta-label">Reporter</div>
                            <div className="drawer-meta-val"><Avatar userId={task.reporter} size={20} users={users} /> {reporter?.name}</div>
                        </div>
                        <div>
                            <div className="drawer-meta-label">Status</div>
                            <select className="drawer-select" aria-label="Status" value={task.status} onChange={e => updateField('status', e.target.value)}>
                                {Object.entries(STATUS_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                            </select>
                        </div>
                        <div>
                            <div className="drawer-meta-label">Priority</div>
                            <select className="drawer-select" aria-label="Priority" value={task.priority} onChange={e => updateField('priority', e.target.value)}>
                                {['critical', 'high', 'medium', 'low'].map(p => <option key={p} value={p}>{p}</option>)}
                            </select>
                        </div>
                        <div>
                            <div className="drawer-meta-label">Due Date</div>
                            <input type="date" className="drawer-select" value={task.dueDate} onChange={e => updateField('dueDate', e.target.value)} />
                        </div>
                        <div>
                            <div className="drawer-meta-label">Tags</div>
                            <div className="drawer-tags">{task.tags.map(t => <Tag key={t} label={t} />)}</div>
                        </div>
                    </div>

                    {/* Dependencies Section */}
                    <div className="drawer-section">
                        <div className="drawer-section-title">
                            🔗 Dependencies
                            {unresolvedDeps > 0 && <span className="dep-unresolved-badge">{unresolvedDeps} blocking</span>}
                        </div>
                        {(task.dependencies || []).length === 0 && (
                            <div className="dep-empty">No dependencies yet</div>
                        )}
                        {(task.dependencies || []).map(dep => {
                            const depUser = getUserById(users, dep.dependsOnUserId);
                            return (
                                <div key={dep.id} className={`dep-item ${dep.resolved ? 'dep-resolved' : 'dep-unresolved'}`}>
                                    <button
                                        className={`dep-check ${dep.resolved ? 'checked' : ''}`}
                                        onClick={() => onToggleDependency(task.id, dep.id, !dep.resolved)}
                                        title={dep.resolved ? 'Mark unresolved' : 'Mark resolved'}
                                    >
                                        {dep.resolved ? '✓' : ''}
                                    </button>
                                    <div className="dep-info">
                                        {depUser && (
                                            <span className="dep-user">
                                                <Avatar userId={dep.dependsOnUserId} size={18} users={users} />
                                                <span>{depUser.name}</span>
                                            </span>
                                        )}
                                        <span className={`dep-desc ${dep.resolved ? 'done' : ''}`}>{dep.description}</span>
                                    </div>
                                    <button className="dep-remove" onClick={() => onRemoveDependency(task.id, dep.id)} title="Remove">✕</button>
                                </div>
                            );
                        })}
                        <div className="dep-add-row">
                            <select className="dep-add-select" value={depUser} onChange={e => setDepUser(e.target.value)}>
                                <option value="">Anyone</option>
                                {users.map(u => <option key={u.id} value={u.id}>{u.avatar} {u.name}</option>)}
                            </select>
                            <input className="dep-add-input" placeholder="Describe the dependency..." value={depDesc}
                                onChange={e => setDepDesc(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAddDep()} />
                            <button className="dep-add-btn" onClick={handleAddDep}>Add</button>
                        </div>
                    </div>

                    <div className="drawer-section">
                        <div className="drawer-section-title">Subtasks <span style={{ color: '#64748b', fontWeight: 400, fontSize: 12 }}>{doneCount} of {task.subtasks.length} complete</span></div>
                        {task.subtasks.length > 0 && <ProgressBar subtasks={task.subtasks} />}
                        {task.subtasks.map(s => (
                            <div key={s.id} className="subtask-row" onClick={() => toggleSubtask(s.id)}>
                                <input type="checkbox" className="subtask-checkbox" checked={s.done} readOnly />
                                <span className={`subtask-text ${s.done ? 'done' : ''}`}>{s.title}</span>
                            </div>
                        ))}
                        <div className="subtask-add">
                            <input placeholder="Add a subtask..." value={subtaskText} onChange={e => setSubtaskText(e.target.value)} onKeyDown={e => e.key === 'Enter' && addSubtask()} />
                            <button onClick={addSubtask}>Add</button>
                        </div>
                    </div>

                    <div className="drawer-section">
                        <div className="drawer-section-title">Comments</div>
                        {task.comments.map(c => {
                            const cu = getUserById(users, c.userId);
                            return (
                                <div key={c.id} className="comment-item">
                                    <Avatar userId={c.userId} size={26} users={users} />
                                    <div className="comment-bubble">
                                        <div className="comment-header">
                                            <span className="comment-name">{cu?.name}</span>
                                            <span className="comment-time">{new Date(c.timestamp).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</span>
                                        </div>
                                        <div className="comment-text">{c.text}</div>
                                    </div>
                                </div>
                            );
                        })}
                        <div className="comment-input-row">
                            <Avatar userId={currentUser.id} size={26} users={users} />
                            <input placeholder="Add a comment..." value={commentText} onChange={e => setCommentText(e.target.value)} onKeyDown={e => e.key === 'Enter' && addComment()} />
                            <button onClick={addComment}>Post</button>
                        </div>
                    </div>

                    <div className="drawer-section">
                        <div className="drawer-section-title">Activity</div>
                        {task.activity.map(a => (
                            <div key={a.id} className="activity-item">
                                <span className="activity-text">{a.text} · {new Date(a.timestamp).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</span>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </>
    );
}

interface ModalProps {
    onClose: () => void;
    onAdd: (task: Task) => void;
    defaultDate?: string;
    defaultStatus?: Status;
    users: User[];
    currentUser: User;
}

interface PendingDep {
    id: string;
    dependsOnUserId: string;
    description: string;
}

export function AddTaskModal({ onClose, onAdd, defaultDate, defaultStatus, users, currentUser }: ModalProps) {
    const [title, setTitle] = useState('');
    const [desc, setDesc] = useState('');
    const [assignee, setAssignee] = useState(currentUser.id);
    const [priority, setPriority] = useState<Priority>('medium');
    const [status, setStatus] = useState<Status>(defaultStatus || 'todo');
    const [dueDate, setDueDate] = useState(defaultDate || new Date().toISOString().split('T')[0]);
    const [tags, setTags] = useState('');
    const [error, setError] = useState(false);

    // Dependencies state
    const [deps, setDeps] = useState<PendingDep[]>([]);
    const [depUser, setDepUser] = useState('');
    const [depDesc, setDepDesc] = useState('');

    const addDep = () => {
        if (!depDesc.trim()) return;
        setDeps(prev => [...prev, { id: `pd${Date.now()}`, dependsOnUserId: depUser, description: depDesc }]);
        setDepDesc('');
        setDepUser('');
    };

    const removeDep = (id: string) => {
        setDeps(prev => prev.filter(d => d.id !== id));
    };

    const submit = () => {
        if (!title.trim()) { setError(true); return; }
        const task: Task = {
            id: `t${Date.now()}`, title, description: desc, status, priority,
            assignee, reporter: currentUser.id, dueDate,
            tags: tags ? tags.split(',').map(t => t.trim()).filter(Boolean) : [],
            subtasks: [], comments: [],
            activity: [{ id: `a${Date.now()}`, text: `📝 Task created`, timestamp: new Date().toISOString() }],
            dependencies: deps.map(d => ({ id: d.id, dependsOnUserId: d.dependsOnUserId, description: d.description, resolved: false })),
        };
        onAdd(task);
        onClose();
    };

    return (
        <div className="modal-backdrop" onClick={onClose}>
            <div className="modal" onClick={e => e.stopPropagation()}>
                <div className="modal-header"><h2>New Task</h2><button className="drawer-close" onClick={onClose}>✕</button></div>
                <div className="modal-body">
                    <div className="modal-field">
                        <label>Title *</label>
                        <input className={`modal-input ${error && !title.trim() ? 'error' : ''}`} placeholder="Task title" value={title} onChange={e => { setTitle(e.target.value); setError(false); }} />
                    </div>
                    <div className="modal-field">
                        <label>Description</label>
                        <textarea className="modal-input modal-input-textarea" placeholder="Describe the task..." rows={3} value={desc} onChange={e => setDesc(e.target.value)} />
                    </div>
                    <div className="modal-grid">
                        <div className="modal-field">
                            <label>Assign To</label>
                            <select className="modal-input" value={assignee} onChange={e => setAssignee(e.target.value)}>
                                {users.map(u => <option key={u.id} value={u.id}>{u.avatar} {u.name}</option>)}
                            </select>
                        </div>
                        <div className="modal-field">
                            <label>Priority</label>
                            <select className="modal-input" value={priority} onChange={e => setPriority(e.target.value as Priority)}>
                                {['critical', 'high', 'medium', 'low'].map(p => <option key={p} value={p}>{p}</option>)}
                            </select>
                        </div>
                        <div className="modal-field">
                            <label>Status</label>
                            <select className="modal-input" value={status} onChange={e => setStatus(e.target.value as Status)}>
                                {Object.entries(STATUS_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                            </select>
                        </div>
                        <div className="modal-field">
                            <label>Due Date</label>
                            <input className="modal-input" type="date" value={dueDate} onChange={e => setDueDate(e.target.value)} />
                        </div>
                    </div>
                    <div className="modal-field">
                        <label>Tags (comma separated)</label>
                        <input className="modal-input" placeholder="devops, backend, ..." value={tags} onChange={e => setTags(e.target.value)} />
                    </div>

                    {/* Dependencies Section */}
                    <div className="modal-field">
                        <label>🔗 Dependencies / Blockers</label>
                        <div className="modal-deps-list">
                            {deps.map(d => {
                                const u = getUserById(users, d.dependsOnUserId);
                                return (
                                    <div key={d.id} className="modal-dep-item">
                                        <span className="modal-dep-icon">⏳</span>
                                        {u && <span className="modal-dep-user">{u.avatar} {u.name}:</span>}
                                        <span className="modal-dep-desc">{d.description}</span>
                                        <button className="modal-dep-remove" onClick={() => removeDep(d.id)}>✕</button>
                                    </div>
                                );
                            })}
                        </div>
                        <div className="modal-dep-add">
                            <select className="modal-dep-select" value={depUser} onChange={e => setDepUser(e.target.value)}>
                                <option value="">Blocked by (anyone)</option>
                                {users.map(u => <option key={u.id} value={u.id}>{u.avatar} {u.name}</option>)}
                            </select>
                            <input className="modal-dep-input" placeholder="e.g. Need API endpoints from backend team"
                                value={depDesc} onChange={e => setDepDesc(e.target.value)} onKeyDown={e => e.key === 'Enter' && (e.preventDefault(), addDep())} />
                            <button className="modal-dep-btn" onClick={addDep} type="button">+ Add</button>
                        </div>
                    </div>
                </div>
                <div className="modal-footer">
                    <button className="btn-ghost" onClick={onClose}>Cancel</button>
                    <button className="btn-primary" onClick={submit}>Create Task</button>
                </div>
            </div>
        </div>
    );
}