/* === Tasks screen === */

const TASK_PRIORITIES = [
  { id: 'I',   label: 'I',   tone: 'low'  },
  { id: 'II',  label: 'II',  tone: 'med'  },
  { id: 'III', label: 'III', tone: 'high' },
];
const TASK_PRIORITY_TONE = { I: 'low', II: 'med', III: 'high' };

function formatDue(iso, done) {
  if (!iso) return null;
  if (done) return { label: monthDay(iso), tone: 'done' };
  const days = daysUntil(iso);
  if (days < 0)  return { label: `${Math.abs(days)}d overdue`, tone: 'overdue' };
  if (days === 0) return { label: 'Due today',          tone: 'soon' };
  if (days === 1) return { label: 'Due tomorrow',       tone: 'soon' };
  if (days <= 7)  return { label: `Due in ${days}d`,    tone: 'soon' };
  return            { label: `Due ${monthDay(iso)}`,    tone: 'normal' };
}

function MemberChip({ member }) {
  if (!member) return null;
  const color = TAG_COLORS[member.color] || 'var(--ink-2)';
  return (
    <span className="task-member-chip" style={{ color, borderColor: color + '40', background: color + '12' }}>
      <span className="task-member-dot" style={{ background: color }} />
      {member.name}
    </span>
  );
}

function GroupChip({ group }) {
  if (!group) return null;
  const color = TAG_COLORS[group.color] || 'var(--ink-2)';
  return (
    <span className="task-group-chip" style={{ color, borderColor: color + '40', background: color + '12' }}>
      <span className="task-group-dot" style={{ background: color }} />
      {group.name}
    </span>
  );
}

function TasksScreen({ state, setState, setOpenModal, setEditingTask }) {
  const { family } = state;
  const tasks = state.tasks || [];
  const taskGroups = state.taskGroups || [];
  const [expandedId, setExpandedId] = React.useState(null);
  const [filter, setFilter] = React.useState('open');
  const [groupFilter, setGroupFilter] = React.useState('all');
  const [priorityFilter, setPriorityFilter] = React.useState('all');

  const removeGroup = (groupId) => {
    const g = taskGroups.find(tg => tg.id === groupId);
    if (!g) return;
    if (!confirm(`Delete the group "${g.name}"? Tasks in it stay, but become ungrouped.`)) return;
    setState(s => ({
      ...s,
      taskGroups: (s.taskGroups || []).filter(tg => tg.id !== groupId),
      tasks: (s.tasks || []).map(t => t.groupId === groupId ? { ...t, groupId: null } : t),
    }));
    if (groupFilter === groupId) setGroupFilter('all');
  };

  const updateTask = (taskId, updater) => {
    setState(s => ({
      ...s,
      tasks: (s.tasks || []).map(t => t.id === taskId ? updater(t) : t),
    }));
  };

  const toggleTask = (taskId) => updateTask(taskId, t => {
    // Recurring tasks roll forward instead of completing.
    if (!t.done && t.recurrence && t.recurrence.type && t.dueDate) {
      const nextDue = advanceRecurrence(t.dueDate, t.recurrence.type, t.recurrence.interval);
      return {
        ...t,
        dueDate: nextDue,
        done: false,
        subtasks: (t.subtasks || []).map(st => ({ ...st, done: false })),
      };
    }
    return { ...t, done: !t.done };
  });

  const toggleSubtask = (taskId, subId) => updateTask(taskId, t => ({
    ...t,
    subtasks: (t.subtasks || []).map(st => st.id === subId ? { ...st, done: !st.done } : st),
  }));

  const addSubtask = (taskId, title, memberId) => {
    const trimmed = title.trim();
    if (!trimmed) return;
    const newSub = { id: 'st' + Date.now().toString(36), title: trimmed, memberId: memberId || null, done: false };
    updateTask(taskId, t => ({ ...t, subtasks: [...(t.subtasks || []), newSub] }));
  };

  const removeSubtask = (taskId, subId) => updateTask(taskId, t => ({
    ...t,
    subtasks: (t.subtasks || []).filter(st => st.id !== subId),
  }));

  const removeTask = (taskId) => {
    if (!confirm('Delete this task and all of its steps?')) return;
    setState(s => ({ ...s, tasks: (s.tasks || []).filter(t => t.id !== taskId) }));
  };

  // This week's range, Mon→Sun, derived from today.
  const weekStart = weekStartIso(isoDate(TODAY));
  const weekEnd = addDaysIso(weekStart, 6);

  // Filter + sort
  const priorityRank = { III: 0, II: 1, I: 2 };
  const filtered = tasks.filter(t => {
    if (groupFilter === 'none' && t.groupId) return false;
    if (groupFilter !== 'all' && groupFilter !== 'none' && t.groupId !== groupFilter) return false;
    if (priorityFilter !== 'all' && (t.priority || 'II') !== priorityFilter) return false;
    if (filter === 'open') return !t.done;
    if (filter === 'done') return t.done;
    if (filter === 'week') {
      return !!t.dueDate && t.dueDate >= weekStart && t.dueDate <= weekEnd;
    }
    return true;
  });
  filtered.sort((a, b) => {
    if (a.done !== b.done) return a.done ? 1 : -1;
    const pa = priorityRank[a.priority || 'II'] ?? 1;
    const pb = priorityRank[b.priority || 'II'] ?? 1;
    if (pa !== pb) return pa - pb;
    if (a.dueDate && b.dueDate) return a.dueDate.localeCompare(b.dueDate);
    if (a.dueDate) return -1;
    if (b.dueDate) return 1;
    return 0;
  });

  const counts = {
    open: tasks.filter(t => !t.done).length,
    done: tasks.filter(t => t.done).length,
    week: tasks.filter(t => t.dueDate && t.dueDate >= weekStart && t.dueDate <= weekEnd).length,
  };
  const priorityCounts = {
    I:   tasks.filter(t => !t.done && (t.priority || 'II') === 'I').length,
    II:  tasks.filter(t => !t.done && (t.priority || 'II') === 'II').length,
    III: tasks.filter(t => !t.done && (t.priority || 'II') === 'III').length,
  };

  return (
    <div style={{ padding: '20px 28px 28px', maxWidth: 920 }}>
      <div className="tasks-toolbar">
        <div className="tasks-filter">
          {[
            { id: 'week', label: 'This week' },
            { id: 'open', label: 'Open' },
            { id: 'done', label: 'Done' },
          ].map(f => (
            <button key={f.id}
              className={`tasks-filter-btn ${filter === f.id ? 'active' : ''}`}
              onClick={() => setFilter(f.id)}>
              <span>{f.label}</span>
              <span className="tasks-filter-count">{counts[f.id]}</span>
            </button>
          ))}
        </div>
        <button className="btn primary" onClick={() => setOpenModal('task')}>
          + New task
        </button>
      </div>

      <div className="tasks-priority-filter">
        <button
          className={`tasks-priority-chip ${priorityFilter === 'all' ? 'active' : ''}`}
          onClick={() => setPriorityFilter('all')}>
          All priorities
        </button>
        {TASK_PRIORITIES.map(p => (
          <button key={p.id}
            className={`tasks-priority-chip prio-${p.tone} ${priorityFilter === p.id ? 'active' : ''}`}
            onClick={() => setPriorityFilter(priorityFilter === p.id ? 'all' : p.id)}>
            <span className="task-prio-dot" />
            <span>Priority {p.label}</span>
            <span className="tasks-filter-count">{priorityCounts[p.id]}</span>
          </button>
        ))}
      </div>

      {taskGroups.length > 0 && (
        <div className="tasks-group-filter">
          <button
            className={`tasks-group-chip ${groupFilter === 'all' ? 'active' : ''}`}
            onClick={() => setGroupFilter('all')}>
            All groups
          </button>
          {taskGroups.map(g => {
            const color = TAG_COLORS[g.color] || 'var(--ink-2)';
            const active = groupFilter === g.id;
            return (
              <button key={g.id}
                className={`tasks-group-chip ${active ? 'active' : ''}`}
                style={active
                  ? { color, borderColor: color, background: color + '18' }
                  : { borderColor: color + '40' }}
                onClick={() => setGroupFilter(g.id)}>
                <span className="task-group-dot" style={{ background: color }} />
                {g.name}
                <span className="tasks-group-chip-x"
                  onClick={(e) => { e.stopPropagation(); removeGroup(g.id); }}
                  title="Delete group">×</span>
              </button>
            );
          })}
          <button
            className={`tasks-group-chip ${groupFilter === 'none' ? 'active' : ''}`}
            onClick={() => setGroupFilter('none')}>
            Ungrouped
          </button>
        </div>
      )}

      {filtered.length === 0 && (
        <div className="tasks-empty">
          <div className="tasks-empty-title">
            {filter === 'open' ? 'Nothing on the list'
              : filter === 'week' ? 'Nothing due this week'
              : filter === 'done' ? 'Nothing finished yet'
              : 'No tasks yet'}
          </div>
          <div className="tasks-empty-sub">
            {filter === 'open'
              ? 'Click "+ New task" to add something to do — give it a due date, assign a family member, and break it into steps.'
              : filter === 'week'
              ? 'No tasks fall between ' + weekStart + ' and ' + weekEnd + '.'
              : 'Switch to "open" to see what\'s outstanding.'}
          </div>
        </div>
      )}

      <div className="tasks-list">
        {filtered.map(t => (
          <TaskCard
            key={t.id}
            task={t}
            family={family}
            taskGroups={taskGroups}
            expanded={expandedId === t.id}
            onToggleExpand={() => setExpandedId(expandedId === t.id ? null : t.id)}
            onToggleDone={() => toggleTask(t.id)}
            onToggleSubtask={(subId) => toggleSubtask(t.id, subId)}
            onAddSubtask={(title, memberId) => addSubtask(t.id, title, memberId)}
            onRemoveSubtask={(subId) => removeSubtask(t.id, subId)}
            onDelete={() => removeTask(t.id)}
            onEdit={setEditingTask ? () => { setEditingTask(t); setOpenModal('task'); } : null}
          />
        ))}
      </div>
    </div>
  );
}

function TaskCard({ task, family, taskGroups = [], expanded, onToggleExpand, onToggleDone, onToggleSubtask, onAddSubtask, onRemoveSubtask, onDelete, onEdit }) {
  const [newSubTitle, setNewSubTitle] = React.useState('');
  const [newSubMember, setNewSubMember] = React.useState('');

  const subs = task.subtasks || [];
  const subDone = subs.filter(s => s.done).length;
  const subTotal = subs.length;
  const member = task.memberId ? family.find(m => m.id === task.memberId) : null;
  const group = task.groupId ? taskGroups.find(g => g.id === task.groupId) : null;
  const due = formatDue(task.dueDate, task.done);
  const recurrenceText = task.recurrence ? recurrenceLabel(task.recurrence.type, task.recurrence.interval) : null;
  const priority = task.priority || 'II';
  const priorityTone = TASK_PRIORITY_TONE[priority] || 'med';

  const submitSub = () => {
    if (!newSubTitle.trim()) return;
    onAddSubtask(newSubTitle, newSubMember);
    setNewSubTitle('');
    setNewSubMember('');
  };

  return (
    <div className={`task-card prio-${priorityTone} ${task.done ? 'done' : ''} ${expanded ? 'expanded' : ''}`}>
      <div className="task-card-head">
        <button
          className={`task-check ${task.done ? 'on' : ''}`}
          onClick={onToggleDone}
          aria-label={task.done ? 'Mark not done' : 'Mark done'}>
          {task.done ? '✓' : ''}
        </button>

        <div className="task-title-wrap" onClick={onToggleExpand}>
          <div className="task-title">{task.title}</div>
          <div className="task-meta">
            <span className={`task-prio prio-${priorityTone}`} title={`Priority ${priority}`}>{priority}</span>
            {due && <span className={`task-due ${due.tone}`}>{due.label}</span>}
            {recurrenceText && (
              <span className="task-recurrence" title="Repeats — checking off rolls the date forward">
                ↻ {recurrenceText}
              </span>
            )}
            {subTotal > 0 && (
              <span className="task-substat">
                <span className="task-substat-bar">
                  <span className="task-substat-fill" style={{ width: subTotal ? (subDone / subTotal * 100) + '%' : 0 }} />
                </span>
                {subDone}/{subTotal} steps
              </span>
            )}
            <GroupChip group={group} />
            <MemberChip member={member} />
          </div>
        </div>

        <div className="task-card-actions">
          {onEdit && (
            <button className="icon-btn" onClick={(e) => { e.stopPropagation(); onEdit(); }} title="Edit task" aria-label="Edit task">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M12 20h9"/>
                <path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
              </svg>
            </button>
          )}
          <button className="icon-btn" onClick={onToggleExpand} title={expanded ? 'Collapse' : 'Expand'}>
            {expanded ? '▾' : '▸'}
          </button>
          <button className="icon-btn danger" onClick={onDelete} title="Delete task">×</button>
        </div>
      </div>

      {expanded && (
        <div className="task-card-body">
          {task.note && <div className="task-note">{task.note}</div>}

          {subs.length > 0 && (
            <div className="subtask-list">
              {subs.map(s => {
                const sm = s.memberId ? family.find(m => m.id === s.memberId) : null;
                return (
                  <div key={s.id} className={`subtask-row ${s.done ? 'done' : ''}`}>
                    <button
                      className={`task-check small ${s.done ? 'on' : ''}`}
                      onClick={() => onToggleSubtask(s.id)}>
                      {s.done ? '✓' : ''}
                    </button>
                    <div className="subtask-title">{s.title}</div>
                    <MemberChip member={sm} />
                    <button className="icon-btn danger small" onClick={() => onRemoveSubtask(s.id)} title="Remove step">×</button>
                  </div>
                );
              })}
            </div>
          )}

          <div className="add-subtask">
            <input
              className="input"
              value={newSubTitle}
              onChange={e => setNewSubTitle(e.target.value)}
              onKeyDown={e => { if (e.key === 'Enter') submitSub(); }}
              placeholder="Add a step…" />
            <select className="select" value={newSubMember} onChange={e => setNewSubMember(e.target.value)}>
              <option value="">Unassigned</option>
              {family.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
            </select>
            <button className="btn" onClick={submitSub} disabled={!newSubTitle.trim()}>+ Step</button>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { TasksScreen, formatDue });