// Tasks.jsx — Full tasks page (Fase 2.2)
const {
  useState: useTasksState,
  useEffect: useTasksEffect,
  useRef: useTasksRef,
  useCallback: useTasksCallback,
} = React;

function tasksDemo() {
  return window.EASYLIFE_DEMO?.enabled ? window.EASYLIFE_DEMO : null;
}

// Priority columns config (keys / colors are language-neutral)
const PRIORITY_COLS = [
  { key: 'do',       color: '#34d399', bg: 'rgba(52,211,153,0.15)',  icon: 'ti-flame'      },
  { key: 'schedule', color: '#fbbf24', bg: 'rgba(251,191,36,0.16)',  icon: 'ti-calendar'   },
  { key: 'delegate', color: '#38bdf8', bg: 'rgba(56,189,248,0.16)',  icon: 'ti-user-share' },
  { key: 'later',    color: '#94a3b8', bg: 'rgba(148,163,184,0.14)', icon: 'ti-moon'       },
];

// ── i18n ─────────────────────────────────────────────────────────
function getTasksLang() { return localStorage.getItem('el-lang') || 'no'; }

const TASKS_I18N = {
  no: {
    // Subnav
    today: 'I dag', week: 'Uke', done: 'Fullført',
    // Section headers
    bigWins: 'Store seire',
    importantDeadlines: 'Viktige frister',
    workQueue: 'Arbeidskø',
    // Composer
    whatToDo: 'Hva skal gjøres',
    addPlaceholder: 'Legg til en oppgave…',
    addBtn: 'Legg til',
    // Today card
    taskCount: n => `${n} oppgaver`,
    noTasksToday: f => `Ingen oppgaver i dag for ${f}`,
    tomorrowBtn: 'I morgen',
    todayBtn: 'I dag',
    noTasksTomorrow: f => `Ingen oppgaver i morgen for ${f}`,
    noTasksLater: f => `Ingen kommende oppgaver for ${f}`,
    // Work queue
    emptyCol: 'Tom',
    // Big wins
    noBigWins: 'Ingen store seire ennå',
    newBigWin: 'Ny stor seier…',
    // Deadlines
    noDeadlines: 'Ingen viktige frister',
    newDeadline: 'Ny viktig frist…',
    // Date picker
    dateBtn: 'Dato',
    removeDate: 'Fjern dato',
    noDate: 'Ingen dato',
    presetLabels: ['I dag', 'I morgen', 'Neste uke', 'Helgen'],
    weekdayLabels: ['M','T','O','T','F','L','S'],
    months: ['Januar','Februar','Mars','April','Mai','Juni','Juli','August','September','Oktober','November','Desember'],
    dayNames: ['Søn','Man','Tir','Ons','Tor','Fre','Lør'],
    // Relative dates
    relToday: 'I dag', relTomorrow: 'I morgen', relYesterday: 'I går',
    relDaysAgo: n => `${n}d siden`,
    relDayName: d => ['Søn','Man','Tir','Ons','Tor','Fre','Lør'][d.getDay()],
    relDateShort: d => `${['jan','feb','mar','apr','mai','jun','jul','aug','sep','okt','nov','des'][d.getMonth()]} ${d.getDate()}`,
    // Priority labels
    prioLabels: { do: 'Gjør nå', schedule: 'Planlegg', delegate: 'Deleger', later: 'Senere' },
    // Work / Personal
    workLabel: 'Jobb', personalLabel: 'Privat',
    // Done view
    doneTitle: 'Fullført',
    doneCount: n => `${n} fullførte oppgaver`,
    nothingDone: 'Ingenting fullført ennå',
    reopen: 'Gjenåpne',
    doneGroups: { today: 'I dag', yest: 'I går', week: 'Denne uken', older: 'Eldre' },
    // Week view
    weekPrefix: 'Uke',
    weekRange: '7-dagers oversikt',
    weekEmpty: 'Tom',
    // Deadline rows
    dlOverdue: n => `${n}d over`,
    dlToday: 'i dag',
    dlIn: n => `om ${n}d`,
    reschedule: 'Planlegg på nytt',
    deleteLbl: 'Slett',
    dlNotes: 'Notater…',
    // Loading
    loading: 'Laster oppgaver...',
  },
  en: {
    today: 'Today', week: 'Week', done: 'Done',
    bigWins: 'Big Wins',
    importantDeadlines: 'Important deadlines',
    workQueue: 'Work queue',
    whatToDo: 'What needs to be done',
    addPlaceholder: 'Add a task…',
    addBtn: 'Add',
    taskCount: n => `${n} tasks`,
    noTasksToday: f => `No tasks today for ${f}`,
    tomorrowBtn: 'Tomorrow',
    todayBtn: 'Today',
    noTasksTomorrow: f => `No tasks tomorrow for ${f}`,
    noTasksLater: f => `No upcoming tasks for ${f}`,
    emptyCol: 'Empty',
    noBigWins: 'No big wins yet',
    newBigWin: 'New big win…',
    noDeadlines: 'No important deadlines',
    newDeadline: 'New important deadline…',
    dateBtn: 'Date',
    removeDate: 'Remove date',
    noDate: 'No date',
    presetLabels: ['Today', 'Tomorrow', 'Next week', 'Weekend'],
    weekdayLabels: ['M','T','W','T','F','S','S'],
    months: ['January','February','March','April','May','June','July','August','September','October','November','December'],
    dayNames: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
    relToday: 'Today', relTomorrow: 'Tomorrow', relYesterday: 'Yesterday',
    relDaysAgo: n => `${n}d ago`,
    relDayName: d => ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][d.getDay()],
    relDateShort: d => `${['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'][d.getMonth()]} ${d.getDate()}`,
    prioLabels: { do: 'Do first', schedule: 'Schedule', delegate: 'Delegate', later: 'Later' },
    workLabel: 'Work', personalLabel: 'Personal',
    doneTitle: 'Done',
    doneCount: n => `${n} completed tasks`,
    nothingDone: 'Nothing completed yet',
    reopen: 'Reopen',
    doneGroups: { today: 'Today', yest: 'Yesterday', week: 'This week', older: 'Older' },
    weekPrefix: 'Week',
    weekRange: '7-day overview',
    weekEmpty: 'Empty',
    dlOverdue: n => `${n}d overdue`,
    dlToday: 'today',
    dlIn: n => `in ${n}d`,
    reschedule: 'Reschedule',
    deleteLbl: 'Delete',
    dlNotes: 'Notes…',
    loading: 'Loading tasks...',
  },
};

function tt(lang) { return TASKS_I18N[lang] || TASKS_I18N.no; }

// ── Date helpers ─────────────────────────────────────────────────
function tasksYMD(d) {
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${y}-${m}-${day}`;
}
function tasksToday() {
  const d = new Date();
  d.setHours(0, 0, 0, 0);
  return d;
}
function tasksAddDays(d, n) {
  const r = new Date(d);
  r.setDate(r.getDate() + n);
  return r;
}
function tasksParseYMD(s) {
  if (!s) return null;
  const [y, m, d] = String(s).slice(0, 10).split('-').map(Number);
  return new Date(y, (m || 1) - 1, d || 1);
}
function tasksNextWeekend(t) {
  const day = t.getDay();
  const daysToSat = (6 - day + 7) % 7 || 7;
  return tasksAddDays(t, daysToSat);
}
function tasksDayDiff(a, b) {
  const ms = a.setHours(0, 0, 0, 0) - b.setHours(0, 0, 0, 0);
  return Math.round(ms / 86400000);
}

function tasksFormatRel(ds) {
  if (!ds) return '';
  const lang = getTasksLang();
  const T = tt(lang);
  const d = tasksParseYMD(ds);
  const diff = tasksDayDiff(new Date(d), new Date(tasksToday()));
  if (diff === 0) return T.relToday;
  if (diff === 1) return T.relTomorrow;
  if (diff === -1) return T.relYesterday;
  if (diff > 0 && diff < 7) return T.relDayName(d);
  if (diff < 0) return T.relDaysAgo(Math.abs(diff));
  return T.relDateShort(d);
}
function tasksDateClass(ds) {
  if (!ds) return '';
  const diff = tasksDayDiff(tasksParseYMD(ds), tasksToday());
  if (diff < 0) return 'ov';
  if (diff === 0) return 'td';
  return '';
}

// ── DatePicker popover ───────────────────────────────────────────
function TaskDatePicker({ anchor, value, onChange, onClose }) {
  const ref = useTasksRef(null);
  const today = tasksToday();
  const initial = value ? tasksParseYMD(value) : today;
  const [view, setView] = useTasksState({ y: initial.getFullYear(), m: initial.getMonth() });

  useTasksEffect(() => {
    function onDoc(e) {
      if (ref.current && !ref.current.contains(e.target) && !anchor?.contains(e.target)) onClose();
    }
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [anchor]);

  const [pos, setPos] = useTasksState({ top: 0, left: 0 });
  useTasksEffect(() => {
    if (!anchor) return;
    const r = anchor.getBoundingClientRect();
    let top = r.bottom + window.scrollY + 4;
    let left = r.left + window.scrollX;
    const width = 270;
    if (left + width > window.innerWidth - 8) left = window.innerWidth - width - 8;
    setPos({ top, left });
  }, [anchor]);

  const lang = getTasksLang();
  const T = tt(lang);

  const presetDates = [today, tasksAddDays(today, 1), tasksAddDays(today, 7), tasksNextWeekend(today)];
  const presetIcons = ['ti-circle-filled', 'ti-arrow-right', 'ti-calendar-event', 'ti-coffee'];

  const firstOfMonth = new Date(view.y, view.m, 1);
  let startOffset = firstOfMonth.getDay() - 1;
  if (startOffset < 0) startOffset = 6;
  const daysInMonth = new Date(view.y, view.m + 1, 0).getDate();
  const daysInPrevMonth = new Date(view.y, view.m, 0).getDate();
  const cells = [];
  for (let i = startOffset - 1; i >= 0; i--) {
    cells.push({ day: daysInPrevMonth - i, mu: true, d: new Date(view.y, view.m - 1, daysInPrevMonth - i) });
  }
  for (let d = 1; d <= daysInMonth; d++) {
    cells.push({ day: d, mu: false, d: new Date(view.y, view.m, d) });
  }
  const trailingNeeded = (Math.ceil(cells.length / 7) * 7) - cells.length;
  for (let i = 1; i <= trailingNeeded; i++) {
    cells.push({ day: i, mu: true, d: new Date(view.y, view.m + 1, i) });
  }

  function prevMonth() { setView(v => v.m === 0 ? { y: v.y - 1, m: 11 } : { y: v.y, m: v.m - 1 }); }
  function nextMonth() { setView(v => v.m === 11 ? { y: v.y + 1, m: 0 } : { y: v.y, m: v.m + 1 }); }
  function pick(d) { onChange(tasksYMD(d)); onClose(); }

  return ReactDOM.createPortal(
    <div
      ref={ref}
      className="popover dpk"
      style={{ position: 'absolute', top: pos.top, left: pos.left }}
      onClick={e => e.stopPropagation()}
    >
      <div className="dpp">
        {presetDates.map((pd, i) => (
          <button key={i} type="button" className="dpi" onClick={() => pick(pd)}>
            <i className={`ti ${presetIcons[i]}`}></i>
            <span>{T.presetLabels[i]}</span>
            <span className="dll">{T.dayNames[pd.getDay()]} {pd.getDate()}</span>
          </button>
        ))}
        {value && (
          <button type="button" className="dpi clr" onClick={() => { onChange(null); onClose(); }}>
            <i className="ti ti-x"></i>
            <span>{T.removeDate}</span>
          </button>
        )}
      </div>
      <div className="dpc">
        <div className="dpch">
          <button type="button" className="dpn" onClick={prevMonth}><i className="ti ti-chevron-left"></i></button>
          <div className="dpct">{T.months[view.m]} {view.y}</div>
          <button type="button" className="dpn" onClick={nextMonth}><i className="ti ti-chevron-right"></i></button>
        </div>
        <div className="dpg">
          {T.weekdayLabels.map((d, i) => <div key={`w${i}`} className="dpw">{d}</div>)}
          {cells.map((c, i) => {
            const ymdStr = tasksYMD(c.d);
            const cls = ['dpd'];
            if (c.mu) cls.push('mu');
            if (ymdStr === tasksYMD(today)) cls.push('tdy');
            if (value && ymdStr === value) cls.push('seld');
            return (
              <button key={`d${i}`} type="button" className={cls.join(' ')} onClick={() => pick(c.d)}>
                {c.day}
              </button>
            );
          })}
        </div>
      </div>
    </div>,
    document.body
  );
}

// ── Priority popover ─────────────────────────────────────────────
function TaskPrioPopover({ anchor, value, onChange, onClose }) {
  const ref = useTasksRef(null);
  const [pos, setPos] = useTasksState({ top: 0, left: 0 });

  useTasksEffect(() => {
    function onDoc(e) {
      if (ref.current && !ref.current.contains(e.target) && !anchor?.contains(e.target)) onClose();
    }
    function onKey(e) { if (e.key === 'Escape') onClose(); }
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [anchor]);

  useTasksEffect(() => {
    if (!anchor) return;
    const r = anchor.getBoundingClientRect();
    let top = r.bottom + window.scrollY + 4;
    let left = r.left + window.scrollX;
    const width = 180;
    if (left + width > window.innerWidth - 8) left = window.innerWidth - width - 8;
    setPos({ top, left });
  }, [anchor]);

  const lang = getTasksLang();
  const T = tt(lang);

  return ReactDOM.createPortal(
    <div ref={ref} className="prio-pop" style={{ top: pos.top, left: pos.left }}>
      {PRIORITY_COLS.map(p => (
        <button
          key={p.key}
          type="button"
          className={`prio-pop-item${value === p.key ? ' sel' : ''}`}
          onClick={() => { onChange(p.key); onClose(); }}
          style={value === p.key ? { color: p.color } : null}
        >
          <i className={`ti ${p.icon}`} style={{ color: p.color }}></i>
          <span>{T.prioLabels[p.key]}</span>
        </button>
      ))}
    </div>,
    document.body
  );
}

// ── Priority chip on row + composer ──────────────────────────────
function TaskPrioChip({ value, onClick, compact = false }) {
  const meta = PRIORITY_COLS.find(p => p.key === value) || PRIORITY_COLS[0];
  const lang = getTasksLang();
  const T = tt(lang);
  return (
    <button
      type="button"
      className={compact ? 'ct' : 'nct'}
      onClick={e => { e.stopPropagation(); onClick(e); }}
      style={{ color: meta.color }}
      title={T.prioLabels[meta.key]}
    >
      <i className={`ti ${meta.icon}`}></i>
      {!compact && <span>{T.prioLabels[meta.key]}</span>}
    </button>
  );
}

function Tasks({ uiMode }) {
  const [lang, setLang] = useTasksState(() => getTasksLang());
  const [view, setView] = useTasksState('today'); // 'today' | 'week' | 'done'
  const [filter] = useWpFilter(); // Global Work / Personal filter from topnav
  const [tasks, setTasks] = useTasksState([]);
  const [bigWins, setBigWins] = useTasksState([]);
  const [deadlines, setDeadlines] = useTasksState([]);
  const [loading, setLoading] = useTasksState(true);
  const [addText, setAddText] = useTasksState('');
  const [newTaskDate, setNewTaskDate] = useTasksState(tasksYMD(tasksToday()));
  const [newTaskPrio, setNewTaskPrio] = useTasksState('do');
  const [dragId, setDragId] = useTasksState(null);
  const [dragOver, setDragOver] = useTasksState(null);
  const [datePickerFor, setDatePickerFor] = useTasksState(null);
  const [prioPickerFor, setPrioPickerFor] = useTasksState(null);
  const [editTask, setEditTask] = useTasksState(null);
  const [isMobile, setIsMobile] = useTasksState(() => window.matchMedia('(max-width: 700px)').matches);
  const addInputRef = useTasksRef(null);

  const [bwAddText, setBwAddText] = useTasksState('');
  const [bwAdding, setBwAdding] = useTasksState(false);
  const [dlAddText, setDlAddText] = useTasksState('');
  const [dlAdding, setDlAdding] = useTasksState(false);
  const [dlAddDate, setDlAddDate] = useTasksState(tasksYMD(tasksToday()));
  const [dlAddDateAnchor, setDlAddDateAnchor] = useTasksState(null);
  const [expandedDlId, setExpandedDlId] = useTasksState(null);
  const [todayFlipped, setTodayFlipped] = useTasksState(false);
  const [todayCardDragOver, setTodayCardDragOver] = useTasksState(false);
  const [weekOffset, setWeekOffset] = useTasksState(0);
  const bwInputRef = useTasksRef(null);
  const dlInputRef = useTasksRef(null);

  const T = tt(lang);

  // Language change listener
  useTasksEffect(() => {
    const handler = e => setLang(e.detail || getTasksLang());
    window.addEventListener('el-lang-change', handler);
    return () => window.removeEventListener('el-lang-change', handler);
  }, []);

  useTasksEffect(() => {
    const mq = window.matchMedia('(max-width: 700px)');
    const handler = e => setIsMobile(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);

  // Mobile always renders Easy; otherwise use uiMode
  const effectiveMode = isMobile ? 'easy' : uiMode;

  useTasksEffect(() => { loadData(); }, []);

  async function loadData() {
    setLoading(true);
    try {
      const { data: taskData } = await supabaseClient
        .from('todo_tasks')
        .select('*')
        .order('position', { ascending: true })
        .order('created_at', { ascending: false });

      const sourceTasks = (taskData && taskData.length) ? taskData : (tasksDemo()?.tasks || []);
      setTasks(sourceTasks);

      const { data: bwData } = await supabaseClient
        .from('todo_tasks')
        .select('*')
        .eq('is_big_win', true)
        .is('completed_at', null)
        .limit(6);

      setBigWins((bwData && bwData.length) ? bwData : (tasksDemo()?.tasks || []).filter(t => t.is_big_win));

      // Important deadlines from dedicated table
      const { data: dlData } = await supabaseClient
        .from('important_deadlines')
        .select('*')
        .is('completed_at', null)
        .order('due_date', { ascending: true })
        .limit(20);

      setDeadlines(dlData || []);

    } catch (e) {
      const demo = tasksDemo();
      if (demo) {
        setTasks(demo.tasks);
        setBigWins(demo.tasks.filter(t => t.is_big_win));
        setDeadlines([]);
      }
    } finally {
      setLoading(false);
    }
  }

  async function addTask(e) {
    e.preventDefault();
    const text = addText.trim();
    if (!text) return;

    const dueDate = newTaskDate || null;
    setAddText('');
    setNewTaskDate(tasksYMD(tasksToday()));

    const prio = newTaskPrio || 'do';
    if (tasksDemo()) {
      const data = { id: `demo-task-${Date.now()}`, title: text, name: text, category: filter, completed: false, completed_at: null, priority: 'do', v2_priority: prio, due_date: dueDate };
      setTasks(prev => [data, ...prev]);
      return;
    }

    const uid = await window.ensureCurrentUserId();
    if (!uid) return;

    const { data } = await supabaseClient
      .from('todo_tasks')
      .insert({
        user_id: uid,
        name: text,
        category: filter.toLowerCase(),
        workflow: 'tasks_backlog',
        position: Date.now(),
        due_date: dueDate,
        v2_priority: prio,
      })
      .select()
      .single();

    if (data) setTasks(prev => [data, ...prev]);
  }

  async function addBigWinInline(text) {
    if (!text.trim()) return;
    const todayDate = tasksYMD(tasksToday());
    if (tasksDemo()) {
      const data = { id: `demo-bw-${Date.now()}`, title: text, name: text, category: filter, is_big_win: true, completed: false, completed_at: null, due_date: todayDate };
      setBigWins(prev => [...prev, data]);
      setTasks(prev => [...prev, data]);
      return;
    }
    const uid = await window.ensureCurrentUserId();
    if (!uid) return;
    const { data } = await supabaseClient.from('todo_tasks')
      .insert({ user_id: uid, name: text, category: filter.toLowerCase(), workflow: 'tasks_backlog', position: Date.now(), is_big_win: true, due_date: todayDate })
      .select().single();
    if (data) {
      setBigWins(prev => [...prev, { ...data, title: data.name }]);
      setTasks(prev => [...prev, { ...data, title: data.name }]);
    }
  }

  async function addDeadlineInline(text, dueDate) {
    if (!text.trim()) return;
    if (tasksDemo()) {
      const data = { id: `demo-dl-${Date.now()}`, title: text, category: filter, due_date: dueDate, completed: false, completed_at: null };
      setDeadlines(prev => [...prev, data]);
      return;
    }
    const uid = await window.ensureCurrentUserId();
    if (!uid) return;
    const { data } = await supabaseClient.from('important_deadlines')
      .insert({ user_id: uid, title: text, category: filter.toLowerCase(), due_date: dueDate })
      .select().single();
    if (data) setDeadlines(prev => [...prev, data]);
  }

  async function deleteDeadline(id) {
    setDeadlines(prev => prev.filter(d => d.id !== id));
    if (!tasksDemo()) await supabaseClient.from('important_deadlines').delete().eq('id', id);
  }

  async function setTaskDate(id, ymdValue) {
    setTasks(prev => prev.map(t => t.id === id ? { ...t, due_date: ymdValue } : t));
    if (!tasksDemo()) {
      await supabaseClient.from('todo_tasks').update({ due_date: ymdValue }).eq('id', id);
    }
  }

  async function toggleTask(id, completedAt) {
    const newVal = completedAt ? null : new Date().toISOString();
    setTasks(prev => prev.map(t => t.id === id ? { ...t, completed_at: newVal } : t));
    if (!tasksDemo()) {
      await supabaseClient.from('todo_tasks').update({ completed_at: newVal }).eq('id', id);
    }
  }

  async function deleteTask(id) {
    setTasks(prev => prev.filter(t => t.id !== id));
    if (!tasksDemo()) await supabaseClient.from('todo_tasks').delete().eq('id', id);
  }

  async function toggleBigWin(id, current) {
    const next = !current;
    setTasks(prev => prev.map(t => t.id === id ? { ...t, is_big_win: next } : t));
    if (!tasksDemo()) {
      supabaseClient.from('todo_tasks').update({ is_big_win: next }).eq('id', id).then(() => {}, () => {});
    }
  }

  async function setTaskPriority(id, prio) {
    setTasks(prev => prev.map(t => t.id === id ? { ...t, v2_priority: prio } : t));
    if (!tasksDemo()) {
      supabaseClient.from('todo_tasks').update({ v2_priority: prio }).eq('id', id).then(() => {}, () => {});
    }
  }

  async function saveTaskEdit(patch) {
    setTasks(prev => prev.map(t => t.id === patch.id ? { ...t, ...patch } : t));
    if (tasksDemo()) return;
    const { id, ...fields } = patch;
    await supabaseClient.from('todo_tasks').update(fields).eq('id', id);
  }

  // ── Drag and drop ──
  function handleDragStart(e, id) {
    setDragId(id);
    e.dataTransfer.effectAllowed = 'move';
  }

  function handleDragOver(e, id) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    setDragOver(id);
  }

  function handleDrop(e, targetId) {
    e.preventDefault();
    if (!dragId || dragId === targetId) { setDragOver(null); return; }

    let movedId = dragId;
    let reordered = null;
    setTasks(prev => {
      const arr = [...prev];
      const fromIdx = arr.findIndex(t => t.id === dragId);
      const toIdx = arr.findIndex(t => t.id === targetId);
      if (fromIdx === -1 || toIdx === -1) return prev;
      const [moved] = arr.splice(fromIdx, 1);
      arr.splice(toIdx, 0, moved);
      reordered = arr;
      return arr;
    });
    setDragId(null);
    setDragOver(null);

    if (reordered && !tasksDemo()) {
      const idx = reordered.findIndex(t => t.id === movedId);
      const prevPos = idx > 0 ? Number(reordered[idx - 1].position) || 0 : 0;
      const nextPos = idx < reordered.length - 1 ? Number(reordered[idx + 1].position) || prevPos + 2000 : prevPos + 2000;
      const newPos = Math.floor((prevPos + nextPos) / 2) || Date.now();
      supabaseClient.from('todo_tasks').update({ position: newPos }).eq('id', movedId).then(() => {}, () => {});
      setTasks(prev => prev.map(t => t.id === movedId ? { ...t, position: newPos } : t));
    }
  }

  // ── Work-queue column drop: change v2_priority, and clear today/overdue due_date ──
  const [colDragOver, setColDragOver] = useTasksState(null);

  function handleColDragOver(e, colKey) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    setColDragOver(colKey);
  }

  function handleColDrop(e, colKey) {
    e.preventDefault();
    setColDragOver(null);
    if (!dragId) return;
    const target = tasks.find(t => t.id === dragId);
    if (!target) { setDragId(null); return; }

    const updates = {};
    if ((target.v2_priority || 'do') !== colKey) updates.v2_priority = colKey;

    // When dragging from the today/overdue card to the work queue,
    // clear the due_date so the task moves out of the today view.
    const todayStr = tasksYMD(tasksToday());
    const taskDue = target.due_date || target.due_at;
    if (taskDue && String(taskDue).slice(0, 10) <= todayStr) {
      updates.due_date = null;
    }

    if (Object.keys(updates).length === 0) { setDragId(null); return; }
    setTasks(prev => prev.map(t => t.id === dragId ? { ...t, ...updates } : t));
    if (!tasksDemo()) {
      supabaseClient.from('todo_tasks').update(updates).eq('id', dragId).then(() => {}, () => {});
    }
    setDragId(null);
  }

  function handleTodayCardDrop(e) {
    e.preventDefault();
    if (!dragId) return;
    const target = tasks.find(t => t.id === dragId);
    if (!target) { setDragId(null); return; }
    const todayStr = tasksYMD(tasksToday());
    const due = target.due_date || target.due_at;
    if (String(due || '').slice(0, 10) === todayStr) { setDragId(null); return; }
    const updates = { due_date: todayStr };
    setTasks(prev => prev.map(t => t.id === dragId ? { ...t, ...updates } : t));
    if (!tasksDemo()) {
      supabaseClient.from('todo_tasks').update(updates).eq('id', dragId).then(() => {}, () => {});
    }
    setDragId(null);
  }

  // Filter tasks by category
  const filterKey = filter.toLowerCase();
  const todayYMD = tasksYMD(tasksToday());
  const inFilter = t =>
    (String(t.category || '').toLowerCase() === filterKey || t.category === 'none' || !t.category);
  const isOpen = t => !(t.completed_at || t.completed);

  const pOrder = { do: 0, schedule: 1, delegate: 2, later: 3 };

  // Tasks dated for today only
  const todayTasks = tasks.filter(t => {
    if (!isOpen(t) || !inFilter(t)) return false;
    const due = t.due_date || t.due_at;
    if (!due) return false;
    return String(due).slice(0, 10) === todayYMD;
  }).sort((a, b) => (pOrder[a.v2_priority || 'do'] || 0) - (pOrder[b.v2_priority || 'do'] || 0));

  // Overdue tasks (due before today)
  const overdueTasks = tasks.filter(t => {
    if (!isOpen(t) || !inFilter(t)) return false;
    const due = t.due_date || t.due_at;
    if (!due) return false;
    return String(due).slice(0, 10) < todayYMD;
  }).sort((a, b) => (pOrder[a.v2_priority || 'do'] || 0) - (pOrder[b.v2_priority || 'do'] || 0));

  const doneTasks = tasks.filter(t => !!(t.completed_at || t.completed));

  const weekTasks = React.useMemo(() => {
    const days = [];
    const now = new Date();
    const monday = new Date(now);
    monday.setDate(now.getDate() - ((now.getDay() + 6) % 7) + weekOffset * 7);
    const weekStart = new Date(monday);
    const weekEnd = new Date(monday);
    weekEnd.setDate(monday.getDate() + 7);

    for (let i = 0; i < 7; i++) {
      const d = new Date(monday);
      d.setDate(monday.getDate() + i);
      days.push({
        date: d,
        tasks: tasks.filter(t => {
          const dueValue = t.due_date || t.due_at;
          if (!dueValue) return false;
          const td = new Date(dueValue);
          return td.toDateString() === d.toDateString();
        }).sort((a, b) => (pOrder[a.v2_priority || 'do'] || 0) - (pOrder[b.v2_priority || 'do'] || 0)),
      });
    }
    return { days, weekStart, weekEnd };
  }, [tasks, weekOffset]);

  const tomorrowYMD = tasksYMD(tasksAddDays(tasksToday(), 1));
  const tomorrowTasks = tasks.filter(t => {
    if (!isOpen(t) || !inFilter(t)) return false;
    const due = t.due_date || t.due_at;
    return String(due || '').slice(0, 10) === tomorrowYMD;
  });

  const laterTasks = tasks.filter(t => {
    if (!isOpen(t) || !inFilter(t)) return false;
    const due = t.due_date || t.due_at;
    if (!due) return true;
    return String(due).slice(0, 10) > tomorrowYMD;
  });

  // Work queue tasks grouped by v2_priority
  const colTasks = React.useMemo(() => {
    const byCat = tasks.filter(t =>
      !(t.completed_at || t.completed) &&
      (String(t.category || '').toLowerCase() === filterKey || t.category === 'none' || !t.category)
    );
    return PRIORITY_COLS.map(col => ({
      ...col,
      label: T.prioLabels[col.key],
      items: byCat.filter(t => (t.v2_priority || 'do') === col.key),
    }));
  }, [tasks, filterKey, lang]);

  function groupDoneTasks(taskList) {
    const today = new Date(); today.setHours(0, 0, 0, 0);
    const yesterday = new Date(today); yesterday.setDate(today.getDate() - 1);
    const weekAgo = new Date(today); weekAgo.setDate(today.getDate() - 7);
    const groups = [
      { key: 'today', label: T.doneGroups.today, match: t => { const d = new Date(t.completed_at); d.setHours(0,0,0,0); return d.getTime() === today.getTime(); } },
      { key: 'yest',  label: T.doneGroups.yest,  match: t => { const d = new Date(t.completed_at); d.setHours(0,0,0,0); return d.getTime() === yesterday.getTime(); } },
      { key: 'week',  label: T.doneGroups.week,  match: t => { const d = new Date(t.completed_at); d.setHours(0,0,0,0); return d >= weekAgo && d.getTime() !== today.getTime() && d.getTime() !== yesterday.getTime(); } },
      { key: 'older', label: T.doneGroups.older, match: () => true },
    ];
    const assigned = new Set();
    return groups.map(g => ({
      ...g,
      items: taskList.filter(t => {
        if (assigned.has(t.id) || !g.match(t)) return false;
        assigned.add(t.id);
        return true;
      }),
    })).filter(g => g.items.length > 0);
  }

  const filterLabel = filter === 'Work' ? T.workLabel : T.personalLabel;
  const dateLabel = new Date().toLocaleDateString(lang === 'en' ? 'en-US' : 'no-NO', { weekday: 'long', day: 'numeric', month: 'long' });

  if (loading) {
    return (
      <div className="v2-page loading-spinner">
        <i className="ti ti-loader-2" style={{ animation: 'spin 1s linear infinite', fontSize: 20 }}></i>
        {T.loading}
        <style>{`@keyframes spin{to{transform:rotate(360deg)}}`}</style>
      </div>
    );
  }

  return (
    <div className="v2-page">
      {/* Sub-nav */}
      <div className="el-subnav">
        <div className="el-subnav-tabs">
          <button className={`el-stab${view === 'today' ? ' active' : ''}`} onClick={() => setView('today')}>
            <i className="ti ti-sun-high"></i>{T.today}
          </button>
          <button className={`el-stab${view === 'week' ? ' active' : ''}`} onClick={() => setView('week')}>
            <i className="ti ti-calendar-week"></i>{T.week}
          </button>
          <button className={`el-stab${view === 'done' ? ' active' : ''}`} onClick={() => setView('done')}>
            <i className="ti ti-circle-check"></i>{T.done}
          </button>
        </div>
        <span className="el-subnav-date" style={{ textTransform: 'capitalize' }}>{dateLabel}</span>
      </div>

      {/* ── Today view ── */}
      {view === 'today' && (
        <div>
          {/* Strategic section: Big Wins + Important Deadlines (Pro only) */}
          {effectiveMode === 'pro' && (
            <section style={{ marginBottom: 24 }}>
              <div className="wqx">
                {/* Big Wins */}
                <div className="wqs">
                  <div className="wqs-head">
                    <h3 className="wqs-title">{T.bigWins}</h3>
                    <button
                      className="wqs-add"
                      title={T.newBigWin}
                      onClick={() => { setBwAdding(true); setTimeout(() => bwInputRef.current?.focus(), 50); }}
                    >+</button>
                  </div>
                  <div className="wqs-list">
                    {bigWins.length === 0 ? (
                      <p className="wqs-empty">{T.noBigWins}</p>
                    ) : bigWins.map((w, i) => (
                      <div
                        key={w.id}
                        className={`bwr${w.completed_at ? ' done' : ''}`}
                        onContextMenu={e => window.openFocusMenu && window.openFocusMenu(e, {
                          id: w.id, text: w.name || w.title || '', type: 'bigwin',
                        })}
                      >
                        <span className="bwr-num">{i + 1}</span>
                        <span className="bwr-text">{w.name || w.title}</span>
                      </div>
                    ))}
                  </div>
                  {bwAdding && (
                    <div style={{ marginTop: 6, display: 'flex', gap: 6, alignItems: 'center' }}>
                      <input
                        ref={bwInputRef}
                        value={bwAddText}
                        onChange={e => setBwAddText(e.target.value)}
                        placeholder={T.newBigWin}
                        style={{ flex: 1, padding: '6px 10px', borderRadius: 8, border: '1px solid var(--accent-bd)', background: 'rgba(0,212,170,0.05)', color: 'var(--pri)', fontFamily: 'var(--font)', fontSize: 12, outline: 'none' }}
                        onKeyDown={e => {
                          if (e.key === 'Enter') { addBigWinInline(bwAddText); setBwAddText(''); setBwAdding(false); }
                          if (e.key === 'Escape') { setBwAdding(false); setBwAddText(''); }
                        }}
                        onBlur={() => { if (bwAddText.trim()) addBigWinInline(bwAddText); setBwAddText(''); setBwAdding(false); }}
                      />
                    </div>
                  )}
                </div>

                {/* Important Deadlines (Viktige frister) */}
                <div className="wqs">
                  <div className="wqs-head">
                    <h3 className="wqs-title">{T.importantDeadlines}</h3>
                    <button
                      className="wqs-add"
                      title={T.newDeadline}
                      onClick={() => { setDlAdding(true); setTimeout(() => dlInputRef.current?.focus(), 50); }}
                    >+</button>
                  </div>
                  <div className="wqs-list">
                    {deadlines.length === 0 ? (
                      <p className="wqs-empty">{T.noDeadlines}</p>
                    ) : deadlines.map(dl => {
                      const due = new Date(dl.due_date);
                      const now = new Date();
                      const diffDays = Math.ceil((due - now) / (1000 * 60 * 60 * 24));
                      let cls = '';
                      if (diffDays < 0) cls = 'overdue';
                      else if (diffDays <= 2) cls = 'urgent';
                      else if (diffDays <= 7) cls = 'soon';
                      const isExpanded = expandedDlId === dl.id;
                      return (
                        <div
                          key={dl.id}
                          className={`dlr ${cls}`}
                          onContextMenu={e => window.openFocusMenu && window.openFocusMenu(e, {
                            id: dl.id, text: dl.title || '', type: 'deadline',
                          })}
                          onClick={() => setExpandedDlId(isExpanded ? null : dl.id)}
                        >
                          <div className="dlr-row">
                            <span className="dlr-title">{dl.title}</span>
                            <span className="dlr-when">
                              {diffDays < 0 ? T.dlOverdue(Math.abs(diffDays)) : diffDays === 0 ? T.dlToday : T.dlIn(diffDays)}
                            </span>
                          </div>
                          {isExpanded && (
                            <div onClick={e => e.stopPropagation()} style={{ marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--surface-b)' }}>
                              <textarea
                                placeholder={T.dlNotes}
                                style={{ fontSize: 12, color: 'var(--sec)', background: 'transparent', border: 'none', outline: 'none', resize: 'none', width: '100%', padding: '4px 0', fontFamily: 'var(--font)', lineHeight: 1.5 }}
                                rows={2}
                              />
                              <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
                                <button
                                  style={{ fontSize: 11, padding: '4px 10px', borderRadius: 6, border: '1px solid var(--surface-b)', background: 'transparent', color: 'var(--sec)', cursor: 'pointer', fontFamily: 'var(--font)' }}
                                  onClick={e => { e.stopPropagation(); /* reschedule */ }}
                                >{T.reschedule}</button>
                                <button
                                  style={{ fontSize: 11, padding: '4px 10px', borderRadius: 6, border: 'none', background: 'rgba(239,68,68,0.12)', color: '#ef4444', cursor: 'pointer', fontFamily: 'var(--font)' }}
                                  onClick={e => { e.stopPropagation(); deleteDeadline(dl.id); setExpandedDlId(null); }}
                                >{T.deleteLbl}</button>
                              </div>
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                  {dlAdding && (
                    <div style={{ marginTop: 6, display: 'flex', flexDirection: 'column', gap: 6 }}>
                      <input
                        ref={dlInputRef}
                        value={dlAddText}
                        onChange={e => setDlAddText(e.target.value)}
                        placeholder={T.newDeadline}
                        style={{ flex: 1, padding: '6px 10px', borderRadius: 8, border: '1px solid var(--accent-bd)', background: 'rgba(0,212,170,0.05)', color: 'var(--pri)', fontFamily: 'var(--font)', fontSize: 12, outline: 'none' }}
                        onKeyDown={e => {
                          if (e.key === 'Enter') { addDeadlineInline(dlAddText, dlAddDate); setDlAddText(''); setDlAdding(false); }
                          if (e.key === 'Escape') { setDlAdding(false); setDlAddText(''); }
                        }}
                      />
                      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                        <button
                          type="button"
                          className={`ic dc${dlAddDate ? ' hd' : ''}`}
                          onClick={e => setDlAddDateAnchor(e.currentTarget)}
                          style={{ fontSize: 10 }}
                        >
                          <i className={`ti ${dlAddDate ? 'ti-calendar' : 'ti-calendar-plus'} ci`}></i>
                          <span>{dlAddDate ? tasksFormatRel(dlAddDate) : T.dateBtn}</span>
                        </button>
                        <button
                          type="button"
                          onClick={() => { addDeadlineInline(dlAddText, dlAddDate); setDlAddText(''); setDlAdding(false); }}
                          style={{ padding: '4px 12px', borderRadius: 8, border: 'none', background: 'var(--accent)', color: '#000', fontFamily: 'var(--font)', fontSize: 11, fontWeight: 700, cursor: 'pointer' }}
                        >{T.addBtn}</button>
                      </div>
                    </div>
                  )}
                </div>
              </div>
              <hr className="strategic-divider" style={{ border: 'none', borderTop: '1px solid var(--surface-b)', margin: '24px 0 28px' }} />
            </section>
          )}

          {/* Main layout: Today tasks + Work queue / Tomorrow+Later */}
          <div className="layout">
            {/* Left: Add task + Today card */}
            <div className="lc">
              {/* Add task composer */}
              <section className="cs">
                <div className="sh">
                  <div className="st">
                    <span className="mk">{T.whatToDo}</span>
                  </div>
                </div>
                <form onSubmit={addTask} className="comp">
                  <div className="ciw">
                    <input
                      ref={addInputRef}
                      value={addText}
                      onChange={e => setAddText(e.target.value)}
                      placeholder={T.addPlaceholder}
                      autoComplete="off"
                    />
                    {effectiveMode === 'pro' && (
                      <TaskPrioChip
                        value={newTaskPrio}
                        onClick={e => setPrioPickerFor({ newTask: true, anchor: e.currentTarget })}
                      />
                    )}
                    <button
                      type="button"
                      className={`ic dc${newTaskDate ? ' hd' : ''}`}
                      onClick={e => setDatePickerFor({ newTask: true, anchor: e.currentTarget })}
                      title={T.dateBtn}
                    >
                      <i className={`ti ${newTaskDate ? 'ti-calendar' : 'ti-calendar-plus'} ci`}></i>
                      <span>{newTaskDate ? tasksFormatRel(newTaskDate) : T.dateBtn}</span>
                      <i className="ti ti-chevron-down cv"></i>
                    </button>
                  </div>
                  <button type="submit" className="ab">
                    <span>{T.addBtn}</span>
                    <i className="ti ti-arrow-right"></i>
                  </button>
                </form>
              </section>

              {effectiveMode === 'pro' ? (
                /* Pro: flip card (Today front / Tomorrow back) */
                <div className="flip-container">
                  <div className={`flipper${todayFlipped ? ' flipped' : ''}`}>
                    {/* Front: Today */}
                    <div className="flip-face flip-front">
                      <section
                        className={`hero ha${todayCardDragOver ? ' card-drag-over' : ''}`}
                        onDragOver={e => { e.preventDefault(); setTodayCardDragOver(true); }}
                        onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget)) setTodayCardDragOver(false); }}
                        onDrop={e => { setTodayCardDragOver(false); handleTodayCardDrop(e); }}
                      >
                        <div className="sh" style={{ marginBottom: 14 }}>
                          <div className="st">
                            <i className="ti ti-sun-high fl"></i>
                            <h2>{T.today}</h2>
                          </div>
                        </div>
                        <div className="hdz">
                          <div className="hl">
                            {(todayTasks.length + overdueTasks.length) === 0 ? (
                              <p className="he">{T.noTasksToday(filterLabel)}</p>
                            ) : [...overdueTasks.map(t => ({ ...t, __overdue: true })), ...todayTasks].map(task => {
                              const due = task.due_date || task.due_at;
                              return (
                                <div
                                  key={task.id}
                                  className={`tr${task.completed_at ? ' done' : ''}${task.__overdue ? ' io' : ''}${dragOver === task.id ? ' dragging' : ''}`}
                                  draggable
                                  onDragStart={e => handleDragStart(e, task.id)}
                                  onDragOver={e => handleDragOver(e, task.id)}
                                  onDrop={e => handleDrop(e, task.id)}
                                  onDragEnd={() => { setDragId(null); setDragOver(null); }}
                                  onContextMenu={e => window.openFocusMenu && window.openFocusMenu(e, {
                                    id: task.id,
                                    text: task.name || task.title || '',
                                    type: task.__overdue ? 'deadline' : (task.is_big_win ? 'bigwin' : 'todo'),
                                  })}
                                >
                                  <button
                                    className={`ck${task.completed_at ? ' chk' : ''}`}
                                    onClick={() => toggleTask(task.id, task.completed_at)}
                                  />
                                  <div className="tm" style={{ cursor: 'pointer' }} onClick={() => setEditTask(task)}>
                                    <span className="tt">{task.name || task.title || '(uten tittel)'}</span>
                                    <div className="tme">
                                      <button
                                        type="button"
                                        className={`dt ${tasksDateClass(due)}`}
                                        onClick={e => { e.stopPropagation(); setDatePickerFor({ taskId: task.id, anchor: e.currentTarget }); }}
                                        style={due ? null : { opacity: 0.45, fontStyle: 'italic' }}
                                      >
                                        <i className={`ti ${due ? 'ti-calendar' : 'ti-calendar-plus'}`}></i>
                                        {due ? tasksFormatRel(due) : T.noDate}
                                      </button>
                                    </div>
                                  </div>
                                  <div className="ta">
                                    <>
                                      <button
                                        className={`task-star${task.is_big_win ? ' active' : ''}`}
                                        onClick={e => { e.stopPropagation(); toggleBigWin(task.id, task.is_big_win); }}
                                        title={task.is_big_win ? T.noBigWins : T.bigWins}
                                      >
                                        <i className={`ti ${task.is_big_win ? 'ti-star-filled' : 'ti-star'}`}></i>
                                      </button>
                                      <TaskPrioChip
                                        value={task.v2_priority || 'do'}
                                        onClick={e => setPrioPickerFor({ taskId: task.id, anchor: e.currentTarget })}
                                        compact
                                      />
                                    </>
                                    <button className="tdl" onClick={e => { e.stopPropagation(); deleteTask(task.id); }} title={T.deleteLbl}>
                                      <i className="ti ti-trash"></i>
                                    </button>
                                  </div>
                                </div>
                              );
                            })}
                          </div>
                        </div>
                        <button className="flip-toggle" onClick={() => setTodayFlipped(true)}>
                          <i className="ti ti-arrow-right"></i> {T.tomorrowBtn}
                        </button>
                      </section>
                    </div>
                    {/* Back: Tomorrow */}
                    <div className="flip-face flip-back">
                      <section className="hero ha">
                        <div className="sh" style={{ marginBottom: 14 }}>
                          <div className="st">
                            <i className="ti ti-arrow-right fl"></i>
                            <h2>{T.tomorrowBtn}</h2>
                          </div>
                          <span className="mk">{T.taskCount(tomorrowTasks.length)}</span>
                        </div>
                        <div className="hdz">
                          <div className="hl">
                            {tomorrowTasks.length === 0 ? (
                              <p className="he">{T.noTasksTomorrow(filterLabel)}</p>
                            ) : tomorrowTasks.map(task => {
                              const due = task.due_date || task.due_at;
                              return (
                                <div key={task.id} className={`tr${task.completed_at ? ' done' : ''}`}>
                                  <button
                                    className={`ck${task.completed_at ? ' chk' : ''}`}
                                    onClick={() => toggleTask(task.id, task.completed_at)}
                                  />
                                  <div className="tm" style={{ cursor: 'pointer' }} onClick={() => setEditTask(task)}>
                                    <span className="tt">{task.name || task.title || '(uten tittel)'}</span>
                                    <div className="tme">
                                      <button
                                        type="button"
                                        className={`dt ${tasksDateClass(due)}`}
                                        onClick={e => { e.stopPropagation(); setDatePickerFor({ taskId: task.id, anchor: e.currentTarget }); }}
                                        style={due ? null : { opacity: 0.45, fontStyle: 'italic' }}
                                      >
                                        <i className={`ti ${due ? 'ti-calendar' : 'ti-calendar-plus'}`}></i>
                                        {due ? tasksFormatRel(due) : T.noDate}
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              );
                            })}
                          </div>
                        </div>
                        <button className="flip-toggle" onClick={() => setTodayFlipped(false)}>
                          <i className="ti ti-arrow-left"></i> {T.todayBtn}
                        </button>
                      </section>
                    </div>
                  </div>
                </div>
              ) : (
                /* Easy: static today card with drag-to-today support */
                <section
                  className={`hero ha${todayCardDragOver ? ' card-drag-over' : ''}`}
                  onDragOver={e => { e.preventDefault(); setTodayCardDragOver(true); }}
                  onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget)) setTodayCardDragOver(false); }}
                  onDrop={e => { setTodayCardDragOver(false); handleTodayCardDrop(e); }}
                >
                  <div className="sh" style={{ marginBottom: 14 }}>
                    <div className="st">
                      <i className="ti ti-sun-high fl"></i>
                      <h2>{T.today}</h2>
                    </div>
                  </div>
                  <div className="hdz">
                    <div className="hl">
                      {(todayTasks.length + overdueTasks.length) === 0 ? (
                        <p className="he">{T.noTasksToday(filterLabel)}</p>
                      ) : [...overdueTasks.map(t => ({ ...t, __overdue: true })), ...todayTasks].map(task => {
                        const due = task.due_date || task.due_at;
                        return (
                          <div
                            key={task.id}
                            className={`tr${task.completed_at ? ' done' : ''}${task.__overdue ? ' io' : ''}${dragOver === task.id ? ' dragging' : ''}`}
                            draggable
                            onDragStart={e => handleDragStart(e, task.id)}
                            onDragOver={e => handleDragOver(e, task.id)}
                            onDrop={e => handleDrop(e, task.id)}
                            onDragEnd={() => { setDragId(null); setDragOver(null); }}
                            onContextMenu={e => window.openFocusMenu && window.openFocusMenu(e, {
                              id: task.id,
                              text: task.name || task.title || '',
                              type: task.__overdue ? 'deadline' : (task.is_big_win ? 'bigwin' : 'todo'),
                            })}
                          >
                            <button
                              className={`ck${task.completed_at ? ' chk' : ''}`}
                              onClick={() => toggleTask(task.id, task.completed_at)}
                            />
                            <div className="tm" style={{ cursor: 'pointer' }} onClick={() => setEditTask(task)}>
                              <span className="tt">{task.name || task.title || '(uten tittel)'}</span>
                              <div className="tme">
                                <button
                                  type="button"
                                  className={`dt ${tasksDateClass(due)}`}
                                  onClick={e => { e.stopPropagation(); setDatePickerFor({ taskId: task.id, anchor: e.currentTarget }); }}
                                  style={due ? null : { opacity: 0.45, fontStyle: 'italic' }}
                                >
                                  <i className={`ti ${due ? 'ti-calendar' : 'ti-calendar-plus'}`}></i>
                                  {due ? tasksFormatRel(due) : T.noDate}
                                </button>
                              </div>
                            </div>
                            <div className="ta">
                              <button className="tdl" onClick={e => { e.stopPropagation(); deleteTask(task.id); }} title={T.deleteLbl}>
                                <i className="ti ti-trash"></i>
                              </button>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </section>
              )}
            </div>

            <div className="divider"></div>

            {effectiveMode === 'pro' ? (
              /* Pro: work queue columns */
              <div className="wqw">
                <div className="sh" style={{ marginBottom: 18 }}>
                  <div className="st"><span className="mk">{T.workQueue}</span></div>
                </div>
                <div className="rc">
                  {colTasks.map(col => (
                    <div
                      key={col.key}
                      className={`col${colDragOver === col.key ? ' drag-over' : ''}`}
                      onDragOver={e => handleColDragOver(e, col.key)}
                      onDragLeave={e => {
                        if (!e.currentTarget.contains(e.relatedTarget)) {
                          setColDragOver(prev => prev === col.key ? null : prev);
                        }
                      }}
                      onDrop={e => handleColDrop(e, col.key)}
                    >
                      <div className="colh">
                        <span className="coll" style={{ background: col.bg, color: col.color }}>
                          <i className={`ti ${col.icon}`}></i>
                          <span className="lb">{col.label}</span>
                        </span>
                        <span className="colc">{col.items.length}</span>
                      </div>
                      <div className="colis">
                        {col.items.length === 0 ? (
                          <p className="cole">{T.emptyCol}</p>
                        ) : col.items.map(task => {
                          const due = task.due_date || task.due_at;
                          return (
                            <div
                              key={task.id}
                              className={`cr${task.completed_at ? ' done' : ''}`}
                              draggable
                              onDragStart={e => handleDragStart(e, task.id)}
                              onDragOver={e => e.preventDefault()}
                              onContextMenu={e => window.openFocusMenu && window.openFocusMenu(e, {
                                id: task.id,
                                text: task.name || task.title || '',
                                type: task.is_big_win ? 'bigwin' : 'todo',
                              })}
                            >
                              <button
                                className={`crc${task.completed_at ? ' chk' : ''}`}
                                onClick={() => toggleTask(task.id, task.completed_at)}
                              />
                              <div className="crm" onClick={() => setEditTask(task)} style={{ cursor: 'pointer', flexDirection: 'column', alignItems: 'flex-start', gap: 2 }}>
                                <span className="crt">{task.name || task.title}</span>
                                <button
                                  type="button"
                                  className={`dt ${tasksDateClass(due)}`}
                                  onClick={e => { e.stopPropagation(); setDatePickerFor({ taskId: task.id, anchor: e.currentTarget }); }}
                                  style={due ? null : { opacity: 0.45, fontStyle: 'italic' }}
                                >
                                  <i className={`ti ${due ? 'ti-calendar' : 'ti-calendar-plus'}`}></i>
                                  {due ? tasksFormatRel(due) : T.noDate}
                                </button>
                              </div>
                              <button
                                className={`task-star${task.is_big_win ? ' active' : ''}`}
                                onClick={e => { e.stopPropagation(); toggleBigWin(task.id, task.is_big_win); }}
                                title={task.is_big_win ? T.bigWins : T.bigWins}
                              >
                                <i className={`ti ${task.is_big_win ? 'ti-star-filled' : 'ti-star'}`}></i>
                              </button>
                              <button className="crd" onClick={e => { e.stopPropagation(); deleteTask(task.id); }}>
                                <i className="ti ti-trash"></i>
                              </button>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              /* Easy: Tomorrow + Later sections */
              <div className="wqw">
                <section className="hero ha">
                  <div className="sh" style={{ marginBottom: 14 }}>
                    <div className="st">
                      <i className="ti ti-arrow-right fl"></i>
                      <h2>{T.tomorrowBtn}</h2>
                    </div>
                  </div>
                  <div className="hdz">
                    <div className="hl">
                      {tomorrowTasks.length === 0 ? (
                        <p className="he">{T.noTasksTomorrow(filterLabel)}</p>
                      ) : tomorrowTasks.map(task => {
                        const due = task.due_date || task.due_at;
                        return (
                          <div
                            key={task.id}
                            className={`tr${task.completed_at ? ' done' : ''}`}
                            draggable
                            onDragStart={e => handleDragStart(e, task.id)}
                            onDragEnd={() => { setDragId(null); setDragOver(null); }}
                          >
                            <button
                              className={`ck${task.completed_at ? ' chk' : ''}`}
                              onClick={() => toggleTask(task.id, task.completed_at)}
                            />
                            <div className="tm" style={{ cursor: 'pointer' }} onClick={() => setEditTask(task)}>
                              <span className="tt">{task.name || task.title || '(uten tittel)'}</span>
                              <div className="tme">
                                <button
                                  type="button"
                                  className={`dt ${tasksDateClass(due)}`}
                                  onClick={e => { e.stopPropagation(); setDatePickerFor({ taskId: task.id, anchor: e.currentTarget }); }}
                                  style={due ? null : { opacity: 0.45, fontStyle: 'italic' }}
                                >
                                  <i className={`ti ${due ? 'ti-calendar' : 'ti-calendar-plus'}`}></i>
                                  {due ? tasksFormatRel(due) : T.noDate}
                                </button>
                              </div>
                            </div>
                            <div className="ta">
                              <button className="tdl" onClick={e => { e.stopPropagation(); deleteTask(task.id); }} title={T.deleteLbl}>
                                <i className="ti ti-trash"></i>
                              </button>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </section>
                <section className="hero ha">
                  <div className="sh" style={{ marginBottom: 14 }}>
                    <div className="st">
                      <i className="ti ti-moon fl"></i>
                      <h2>{T.prioLabels.later}</h2>
                    </div>
                  </div>
                  <div className="hdz">
                    <div className="hl">
                      {laterTasks.length === 0 ? (
                        <p className="he">{T.noTasksLater(filterLabel)}</p>
                      ) : laterTasks.map(task => {
                        const due = task.due_date || task.due_at;
                        return (
                          <div
                            key={task.id}
                            className={`tr${task.completed_at ? ' done' : ''}`}
                            draggable
                            onDragStart={e => handleDragStart(e, task.id)}
                            onDragEnd={() => { setDragId(null); setDragOver(null); }}
                          >
                            <button
                              className={`ck${task.completed_at ? ' chk' : ''}`}
                              onClick={() => toggleTask(task.id, task.completed_at)}
                            />
                            <div className="tm" style={{ cursor: 'pointer' }} onClick={() => setEditTask(task)}>
                              <span className="tt">{task.name || task.title || '(uten tittel)'}</span>
                              <div className="tme">
                                <button
                                  type="button"
                                  className={`dt ${tasksDateClass(due)}`}
                                  onClick={e => { e.stopPropagation(); setDatePickerFor({ taskId: task.id, anchor: e.currentTarget }); }}
                                  style={due ? null : { opacity: 0.45, fontStyle: 'italic' }}
                                >
                                  <i className={`ti ${due ? 'ti-calendar' : 'ti-calendar-plus'}`}></i>
                                  {due ? tasksFormatRel(due) : T.noDate}
                                </button>
                              </div>
                            </div>
                            <div className="ta">
                              <button className="tdl" onClick={e => { e.stopPropagation(); deleteTask(task.id); }} title={T.deleteLbl}>
                                <i className="ti ti-trash"></i>
                              </button>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </section>
              </div>
            )}
          </div>
        </div>
      )}

      {/* ── Week view ── */}
      {view === 'week' && (
        <div>
          <div className="wv-head">
            <button className="wv-nav" onClick={() => setWeekOffset(o => o - 1)}>
              <i className="ti ti-chevron-left"></i>
            </button>
            <div style={{ textAlign: 'center' }}>
              <h2>{T.weekPrefix} {weekTasks.weekStart ? (() => {
                const d = new Date(weekTasks.weekStart);
                const jan1 = new Date(d.getFullYear(), 0, 1);
                return Math.ceil(((d - jan1) / 86400000 + jan1.getDay() + 1) / 7);
              })() : ''}</h2>
              <p style={{ fontSize: 11, color: 'var(--sec)' }}>
                {weekTasks.weekStart && weekTasks.weekEnd
                  ? `${new Date(weekTasks.weekStart).toLocaleDateString(lang === 'en' ? 'en-US' : 'no-NO', { day: 'numeric', month: 'short' })} – ${new Date(weekTasks.weekEnd).toLocaleDateString(lang === 'en' ? 'en-US' : 'no-NO', { day: 'numeric', month: 'short' })}`
                  : T.weekRange}
              </p>
            </div>
            <button className="wv-nav" onClick={() => setWeekOffset(o => o + 1)}>
              <i className="ti ti-chevron-right"></i>
            </button>
          </div>
          <div className="wg">
            {weekTasks.days.map(({ date, tasks: dayTasks }) => {
              const isToday = date.toDateString() === new Date().toDateString();
              const locale = lang === 'en' ? 'en-US' : 'no-NO';
              const dayName = date.toLocaleDateString(locale, { weekday: 'short' }).toUpperCase();
              const dayNum = date.getDate();
              const month = date.toLocaleDateString(locale, { month: 'short' }).toUpperCase();
              return (
                <div key={date.toISOString()} className={`wc2${isToday ? ' ist' : ''}`}>
                  <div className="wch">
                    <div className="wcd">{dayName}</div>
                    <div className="wcdt">{dayNum}</div>
                    <div className="wcmo">{month}</div>
                    <span className="wccn">{dayTasks.filter(t => !t.completed_at).length || ''}</span>
                  </div>
                  <div className="wcts">
                    {dayTasks.length === 0 ? (
                      <p className="wce">{T.weekEmpty}</p>
                    ) : dayTasks.map(task => (
                      <div key={task.id} className={`wt${task.completed_at ? ' done' : ''}`}>
                        <button
                          className={`wtc${task.completed_at ? ' chk' : ''}`}
                          onClick={() => toggleTask(task.id, task.completed_at)}
                        />
                        <div className="wtb">
                          <span className="wtt">{task.name || task.title}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* ── Done view ── */}
      {view === 'done' && (
        <div>
          <div className="dv-head">
            <div>
              <h2>{T.doneTitle}</h2>
              <sub>{T.doneCount(doneTasks.length)}</sub>
            </div>
          </div>
          {doneTasks.length === 0 ? (
            <div style={{ padding: '60px 20px', textAlign: 'center' }}>
              <i className="ti ti-circle-check" style={{ fontSize: 32, display: 'block', marginBottom: 12, opacity: .25, color: 'var(--sec)' }}></i>
              <p style={{ fontSize: 14, fontStyle: 'italic', color: 'var(--sec)' }}>{T.nothingDone}</p>
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {groupDoneTasks(doneTasks).map(group => (
                <div key={group.key}>
                  <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.8px', textTransform: 'uppercase', color: 'var(--sec)', padding: '0 4px 6px', opacity: .7 }}>{group.label}</div>
                  {group.items.map(task => (
                    <div key={task.id} className="di">
                      <div className="dic"></div>
                      <span className="ditx">{task.name || task.title}</span>
                      <button
                        onClick={() => toggleTask(task.id, task.completed_at)}
                        style={{ border: 'none', background: 'transparent', color: 'var(--mut)', cursor: 'pointer', fontSize: 10, fontWeight: 700, fontFamily: 'var(--font)', padding: '4px 8px', borderRadius: 'var(--rs)', textTransform: 'uppercase', letterSpacing: '.8px', transition: 'all .15s', opacity: 0 }}
                        className="diu"
                        title={T.reopen}
                      >
                        {T.reopen}
                      </button>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      <style>{`@keyframes spin{to{transform:rotate(360deg)}}`}</style>

      {/* Date picker portal */}
      {datePickerFor && (
        <TaskDatePicker
          anchor={datePickerFor.anchor}
          value={datePickerFor.newTask ? newTaskDate : (tasks.find(t => t.id === datePickerFor.taskId)?.due_date || tasks.find(t => t.id === datePickerFor.taskId)?.due_at || null)}
          onChange={v => {
            if (datePickerFor.newTask) setNewTaskDate(v);
            else setTaskDate(datePickerFor.taskId, v);
          }}
          onClose={() => setDatePickerFor(null)}
        />
      )}

      {/* Deadline add — date picker portal */}
      {dlAddDateAnchor && (
        <TaskDatePicker
          anchor={dlAddDateAnchor}
          value={dlAddDate}
          onChange={v => { setDlAddDate(v); setDlAddDateAnchor(null); }}
          onClose={() => setDlAddDateAnchor(null)}
        />
      )}

      {/* Priority picker portal */}
      {prioPickerFor && (
        <TaskPrioPopover
          anchor={prioPickerFor.anchor}
          value={prioPickerFor.newTask ? newTaskPrio : (tasks.find(t => t.id === prioPickerFor.taskId)?.v2_priority || 'do')}
          onChange={v => {
            if (prioPickerFor.newTask) setNewTaskPrio(v);
            else setTaskPriority(prioPickerFor.taskId, v);
          }}
          onClose={() => setPrioPickerFor(null)}
        />
      )}

      {/* Task settings modal */}
      <TaskSettings
        isOpen={!!editTask}
        task={editTask}
        variant={isMobile ? 'mobile' : 'desktop'}
        onClose={() => setEditTask(null)}
        onSave={saveTaskEdit}
        onDelete={deleteTask}
      />
    </div>
  );
}