// Tasks page — aggregates role-scoped work-in-progress.
const { useState: useStateTk, useMemo: useMemoTk } = React;

function ageInDays(iso) {
  if (!iso) return 0;
  return Math.max(0, Math.round((new Date('2026-05-15') - new Date(iso)) / 86400000));
}
function ageLabel(iso) {
  const d = ageInDays(iso);
  if (d === 0) return 'today';
  if (d === 1) return 'yesterday';
  return `${d} days ago`;
}

function buildTasks(user, store) {
  const tasks = [];
  const role = user.role;
  const domain = user.domain;

  // SAF workflow tasks — pulled from the shared store so they sync with Forms + Budget
  const safs = store ? store.getSAFs() : Object.values(window.AppData.TRANSACTIONS).flat();
  safs.forEach(saf => {
    const teamId = saf.teamId;
    const team = window.AppData.TEAMS.find(t => t.id === teamId);
    const wf = saf.workflow || {};

      // Submitted, awaiting Stoney
      if (saf.status === 'submitted' && (role === 'super_admin' || (role === 'staff_admin' && domain === 'fields') || role === 'cs_president')) {
        tasks.push({
          id: 'saf-stoney-' + saf.id,
          kind: 'saf',
          urgency: ageInDays(wf.submitted?.at) > 4 ? 'high' : 'mid',
          icon: 'FileText', iconStyle: 'gold',
          title: 'Stoney sign-off needed',
          sub: `${team?.name} · ${saf.vendor?.name || saf.desc} · $${saf.amount.toLocaleString()}`,
          age: wf.submitted?.at,
          actor: role === 'staff_admin' ? 'You' : 'Stoney',
          target: { route: 'team:' + teamId, tab: 'budget' },
          primary: (role === 'staff_admin' && domain === 'fields') || role === 'super_admin' ? { label: 'Print + sign', next: null } : null,
        });
      }

      // Stoney signed, awaiting Val
      if (saf.status === 'stoney-signed' && (role === 'super_admin' || (role === 'staff_admin' && domain === 'courts') || role === 'cs_president')) {
        tasks.push({
          id: 'saf-val-' + saf.id,
          kind: 'saf',
          urgency: ageInDays(wf.stoneySigned?.at) > 3 ? 'high' : 'mid',
          icon: 'CheckCircle', iconStyle: 'gold',
          title: 'Val confirmation needed',
          sub: `${team?.name} · ${saf.vendor?.name || saf.desc} · $${saf.amount.toLocaleString()}`,
          age: wf.stoneySigned?.at,
          actor: role === 'staff_admin' ? 'You' : 'Val',
          target: { route: 'team:' + teamId, tab: 'budget' },
          primary: (role === 'staff_admin' && domain === 'courts') || role === 'super_admin' ? { label: 'Review', next: null } : null,
        });
      }

      // Val confirmed, ready to post
      if (saf.status === 'val-confirmed' && (role === 'super_admin' || (role === 'staff_admin' && domain === 'courts'))) {
        tasks.push({
          id: 'saf-post-' + saf.id,
          kind: 'saf',
          urgency: 'high',
          icon: 'Send', iconStyle: 'success',
          title: 'Post funds + notify president',
          sub: `${team?.name} · ${saf.vendor?.name || saf.desc} · $${saf.amount.toLocaleString()}`,
          age: wf.valConfirmed?.at,
          actor: 'You',
          target: { route: 'team:' + teamId, tab: 'budget' },
          primary: { label: 'Post + update sheet', next: null },
        });
      }

      // Returned to team — president visibility
      if (saf.status === 'returned' && (role === 'cs_president' || role === 'super_admin')) {
        tasks.push({
          id: 'saf-returned-' + saf.id,
          kind: 'saf',
          urgency: 'mid',
          icon: 'RefreshCw', iconStyle: 'crimson',
          title: 'SAF returned to team',
          sub: `${team?.name} · ${wf.returned?.reason || 'Needs officer revision'}`,
          age: wf.returned?.at,
          actor: 'Team officer',
          target: { route: 'team:' + teamId, tab: 'budget' },
          primary: { label: 'Open', next: null },
        });
      }
    });

  // Event approvals
  window.AppData.EVENTS_PENDING.forEach(ev => {
    if (role === 'super_admin' || role === 'staff_admin' || role === 'cs_president') {
      tasks.push({
        id: 'ev-' + ev.id,
        kind: 'event',
        urgency: ev.daysAway < 14 ? 'high' : 'mid',
        icon: 'Calendar', iconStyle: ev.daysAway < 14 ? 'crimson' : 'blue',
        title: `Approve event · ${ev.team}`,
        sub: `${ev.name} · ${ev.location} · in ${ev.daysAway} days`,
        age: ev.submittedAt,
        actor: 'You',
        target: { route: 'events' },
        primary: { label: 'Review', next: null },
      });
    }
  });

  // Facility approvals — domain-aware
  const courts = ['Court 1','Court 2','Court 3','Court 4'];
  const fields = ['IM Field 1','IM Field 2'];
  window.AppData.RESERVATIONS.filter(r => r.status === 'pending').forEach(r => {
    const isField = fields.includes(r.facility);
    const isCourt = courts.includes(r.facility);
    const relevant = role === 'super_admin'
      || role === 'cs_president'
      || (role === 'staff_admin' && domain === 'fields' && isField)
      || (role === 'staff_admin' && domain === 'courts' && isCourt);
    if (!relevant) return;
    tasks.push({
      id: 'fac-' + r.id,
      kind: 'facility',
      urgency: 'mid',
      icon: 'Facility', iconStyle: isField ? 'success' : 'blue',
      title: `Approve ${r.facility}`,
      sub: `${r.team} · ${r.kind} · ${['Mon','Tue','Wed','Thu','Fri','Sat','Sun'][r.day]} ${r.startHr}:00`,
      age: '2026-05-12',
      actor: 'You',
      target: { route: 'events' },
      primary: { label: 'Review', next: null },
    });
  });

  // Forms awaiting review
  (window.AppData.FORMS || []).forEach(f => {
    if ((f.status === 'submitted' || f.status === 'review') &&
        (role === 'super_admin' || role === 'staff_admin' || role === 'cs_president')) {
      tasks.push({
        id: 'form-' + f.id,
        kind: 'form',
        urgency: ageInDays(f.submittedAt) > 5 ? 'high' : 'mid',
        icon: 'FileText', iconStyle: 'warning',
        title: 'Review form submission',
        sub: `${f.team} · ${(window.AppData.FORM_TYPES.find(t => t.id === f.type) || {}).label} · ${f.detail}`,
        age: f.submittedAt,
        actor: 'You',
        target: { route: 'forms' },
        primary: { label: 'Open', next: null },
      });
    }
  });

  // Non-compliant teams (missing roster)
  window.AppData.TEAMS.forEach(team => {
    if (!team.rosterFiled && (role === 'super_admin' || role === 'cs_president')) {
      tasks.push({
        id: 'roster-' + team.id,
        kind: 'roster',
        urgency: 'high',
        icon: 'Upload', iconStyle: 'crimson',
        title: 'Roster CSV needed',
        sub: `${team.name} · no roster on file, starter packs not sent`,
        age: '2026-05-07',
        actor: 'You',
        target: { route: 'team:' + team.id, tab: 'roster' },
        primary: { label: 'Upload roster', next: null },
      });
    }
  });

  // Sort: high urgency first, then by age desc
  tasks.sort((a, b) => {
    const u = { high: 0, mid: 1, low: 2 };
    if (u[a.urgency] !== u[b.urgency]) return u[a.urgency] - u[b.urgency];
    return (a.age || '').localeCompare(b.age || '');
  });
  return tasks;
}

function TasksScreen({ user, onNavigate }) {
  const store = window.AppStore.useStore();
  const [showProcess, setShowProcess] = useStateTk(false);
  const allTasks = useMemoTk(() => buildTasks(user, store), [user, store]);
  const [filter, setFilter] = useStateTk('mine');
  const [kind, setKind] = useStateTk('all');

  const filtered = useMemoTk(() => {
    let list = allTasks;
    if (filter === 'mine') list = list.filter(t => t.actor === 'You');
    if (filter === 'urgent') list = list.filter(t => t.urgency === 'high');
    if (kind !== 'all') list = list.filter(t => t.kind === kind);
    return list;
  }, [allTasks, filter, kind]);

  const counts = useMemoTk(() => ({
    mine: allTasks.filter(t => t.actor === 'You').length,
    urgent: allTasks.filter(t => t.urgency === 'high').length,
    total: allTasks.length,
  }), [allTasks]);

  function handleClick(task) {
    if (!onNavigate) return;
    if (task.target.route.startsWith('team:')) {
      onNavigate(task.target.route);
    } else {
      onNavigate(task.target.route);
    }
  }

  const KIND_CHIPS = [
    { id: 'all', label: 'All' },
    { id: 'saf', label: 'SAF' },
    { id: 'event', label: 'Events' },
    { id: 'facility', label: 'Facilities' },
    { id: 'form', label: 'Forms' },
    { id: 'roster', label: 'Rosters' },
  ];

  return (
    <div data-screen-label="08 Tasks">
      <div className="page-head">
        <div>
          <h1 className="page-title">Tasks</h1>
          <div className="page-subtitle">
            {counts.mine} on you · {counts.urgent} urgent across the team · {counts.total} open total
          </div>
        </div>
        <div className="flex-gap-8">
          <button className="btn btn-secondary btn-sm" onClick={() => setShowProcess(true)}>
            <window.I.FileText size={13} /> Process PDF
          </button>
        </div>
      </div>

      {showProcess && <window.SAFProcessModal onClose={() => setShowProcess(false)} />}

      <div className="metric-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="card metric warning">
          <div className="metric-label">
            <span className="pill-icon"><window.I.Inbox size={14} /></span>
            On your plate
          </div>
          <div className="metric-value">{counts.mine}</div>
          <div className="metric-trend">routed to {user.name.split(' ')[0]}</div>
        </div>
        <div className="card metric danger">
          <div className="metric-label">
            <span className="pill-icon"><window.I.AlertTriangle size={14} /></span>
            Urgent
          </div>
          <div className="metric-value">{counts.urgent}</div>
          <div className="metric-trend">over 4 days old or under deadline</div>
        </div>
        <div className="card metric">
          <div className="metric-label">
            <span className="pill-icon"><window.I.FileText size={14} /></span>
            SAFs in pipeline
          </div>
          <div className="metric-value">{allTasks.filter(t => t.kind === 'saf').length}</div>
          <div className="metric-trend">across Stoney → Val → posting</div>
        </div>
        <div className="card metric">
          <div className="metric-label">
            <span className="pill-icon"><window.I.Calendar size={14} /></span>
            Events + facilities
          </div>
          <div className="metric-value">{allTasks.filter(t => t.kind === 'event' || t.kind === 'facility').length}</div>
          <div className="metric-trend">waiting on approval</div>
        </div>
      </div>

      <div className="card">
        <div className="flex-between" style={{ padding: '12px 18px', borderBottom: '1px solid var(--border)' }}>
          <div className="flex-gap-8">
            <button className={`btn btn-xs ${filter === 'mine' ? 'btn-secondary' : 'btn-ghost'}`} onClick={() => setFilter('mine')}>
              On you <span className="dim" style={{ marginLeft: 4 }}>{counts.mine}</span>
            </button>
            <button className={`btn btn-xs ${filter === 'urgent' ? 'btn-secondary' : 'btn-ghost'}`} onClick={() => setFilter('urgent')}>
              Urgent <span className="dim" style={{ marginLeft: 4 }}>{counts.urgent}</span>
            </button>
            <button className={`btn btn-xs ${filter === 'all' ? 'btn-secondary' : 'btn-ghost'}`} onClick={() => setFilter('all')}>
              All <span className="dim" style={{ marginLeft: 4 }}>{counts.total}</span>
            </button>
          </div>
          <div className="flex-gap-8" style={{ gap: 4 }}>
            {KIND_CHIPS.map(k => (
              <button key={k.id} className={`btn btn-xs ${kind === k.id ? 'btn-secondary' : 'btn-ghost'}`} onClick={() => setKind(k.id)}>
                {k.label}
              </button>
            ))}
          </div>
        </div>

        <div className="task-list">
          {filtered.length === 0 ? (
            <div className="empty" style={{ padding: '48px 20px' }}>
              <div className="empty-icon"><window.I.CheckCircle size={24} /></div>
              <div className="empty-title">Inbox zero</div>
              <div className="empty-msg">Nothing waiting on {user.name.split(' ')[0]} right now.</div>
            </div>
          ) : filtered.map(task => {
            const Ic = window.I[task.icon] || window.I.FileText;
            return (
              <div key={task.id} className="task-item">
                <span className={`task-icon ${task.iconStyle}`}><Ic size={16} /></span>
                <div className="task-body">
                  <div className="task-title">{task.title}</div>
                  <div className="task-sub">{task.sub}</div>
                </div>
                {task.urgency === 'high' && <span className="badge danger">Urgent</span>}
                <span className="task-age">{ageLabel(task.age)}</span>
                {task.primary && task.actor === 'You' ? (
                  <button className="btn btn-primary btn-sm" onClick={() => handleClick(task)}>
                    {task.primary.label}
                    <window.I.ChevronRight size={13} />
                  </button>
                ) : (
                  <button className="btn btn-secondary btn-sm" onClick={() => handleClick(task)}>
                    Open
                    <window.I.ChevronRight size={13} />
                  </button>
                )}
              </div>
            );
          })}
        </div>
      </div>

      <div className="tip mt-24">
        <window.I.Bell size={14} style={{ flexShrink: 0, marginTop: 1, color: 'var(--gold)' }} />
        <div>
          <strong style={{ color: 'var(--text)' }}>Automation coming soon.</strong>{' '}
          We'll auto-route SAFs to Stoney → Val, post a Slack/email reminder once a task sits longer than 48 hours, and update the team's Google sheet + ping the president the moment funds post. You tell us the rules; we run them.
        </div>
      </div>
    </div>
  );
}

window.TasksScreen = TasksScreen;