/* Activities / Tasks — global triage list with filters & lifecycle.
   Spec: monolith-docs/activities/tasks.md */
const { useState: useStateAC, useMemo: useMemoAC } = React;

function taskDueTone(t) {
  if (t.status !== 'open') return 'none';
  const NOW = window.MonolitData.NOW;
  const today = new Date(NOW); today.setHours(0, 0, 0, 0);
  const due = new Date(t.due); due.setHours(0, 0, 0, 0);
  if (due < today) return 'overdue';
  if (due.getTime() === today.getTime()) return 'today';
  return 'future';
}

function Activities({ tasks, role, onCreate }) {
  const RB = window.MonolitRBAC;
  const [preset, setPreset] = useStateAC('my');
  const [query, setQuery] = useStateAC('');
  const isViewer = role === 'Viewer';

  const presets = [
    { id: 'my',         label: 'My tasks',    filter: t => t.owner && t.owner.id === RB.ME && t.status === 'open' },
    { id: 'all',        label: 'All open',    filter: t => t.status === 'open' },
    { id: 'overdue',    label: 'Overdue',     filter: t => t.status === 'open' && taskDueTone(t) === 'overdue' },
    { id: 'today',      label: 'Due today',   filter: t => t.status === 'open' && taskDueTone(t) === 'today' },
    { id: 'unassigned', label: 'Unassigned',  filter: t => !t.owner && t.status === 'open' },
    { id: 'done',       label: 'Completed',   filter: t => t.status === 'completed' },
    { id: 'cancelled',  label: 'Cancelled',   filter: t => t.status === 'cancelled' },
  ];

  const filtered = useMemoAC(() => {
    let r = tasks;
    const p = presets.find(p => p.id === preset);
    if (p) r = r.filter(p.filter);
    if (query) {
      const q = query.toLowerCase();
      r = r.filter(t => (t.title + t.entity.label + t.id).toLowerCase().includes(q));
    }
    // Overdue & upcoming first, then by due date
    return r.slice().sort((a, b) => new Date(a.due) - new Date(b.due));
  }, [tasks, preset, query]);

  const presetCount = (p) => tasks.filter(p.filter).length;

  return (
    <React.Fragment>
      <div className="mn-page-h">
        <div className="mn-page-title">
          <h1 className="title-1">Tasks</h1>
          <span className="mn-page-count">{filtered.length} shown</span>
        </div>
        <div className="mn-page-actions">
          <Button variant="ghost" size="md" icon="download">Export</Button>
          {RB.can(role, 'activities.create') ? <Button variant="primary" size="md" icon="plus" onClick={onCreate}>New task</Button> : null}
        </div>
      </div>

      {isViewer ? <div className="mn-robanner"><Icon name="eye" size="sm" />Read-only access — your role is Viewer.</div> : null}

      <div className="mn-presets">
        {presets.map((p) => (
          <button key={p.id} type="button"
                  className={'mn-preset' + (preset === p.id ? ' mn-preset--active' : '')}
                  onClick={() => setPreset(p.id)}>
            <span>{p.label}</span>
            <span className="mn-preset-c">{presetCount(p)}</span>
          </button>
        ))}
      </div>

      <div className="mn-toolbar">
        <div style={{ width: 320 }}>
          <Input fullWidth icon="search" placeholder="Search tasks…" value={query} onChange={setQuery} />
        </div>
        <Button variant="ghost" size="md" icon="user">Owner</Button>
        <Button variant="ghost" size="md" icon="flag">Priority</Button>
        <Button variant="ghost" size="md" icon="link">Related entity</Button>
      </div>

      <div className="mn-table-wrap">
        <table className="mn-table">
          <thead>
            <tr>
              <th style={{ width: 36 }}></th>
              <th>Task</th>
              <th style={{ width: 260 }}>Related to</th>
              <th style={{ width: 170 }}>Owner</th>
              <th style={{ width: 110 }}>Due</th>
              <th style={{ width: 95 }}>Priority</th>
              <th style={{ width: 120 }}>Status</th>
              <th style={{ width: 36 }}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((t) => {
              const tone = taskDueTone(t);
              return (
                <tr key={t.id} className={tone === 'overdue' ? 'mn-row--overdue' : undefined}>
                  <td onClick={(e) => e.stopPropagation()}>
                    <input className="mn-checkbox" type="checkbox" disabled={isViewer || t.status !== 'open'}
                           checked={t.status === 'completed'} readOnly title={t.status === 'open' ? 'Mark complete' : t.status} />
                  </td>
                  <td>
                    <div className="mn-cell-name-text">
                      <strong style={{ textDecoration: t.status === 'cancelled' ? 'line-through' : 'none', color: t.status !== 'open' ? 'var(--text-3)' : undefined }}>{t.title}</strong>
                      <span className="mn-mono" style={{ fontSize: 11 }}>{t.id}{t.reminder ? ' · reminder set' : ''}{t.cancelReason ? ` · ${t.cancelReason}` : ''}</span>
                    </div>
                  </td>
                  <td>
                    <span className="mn-row" style={{ gap: 6 }}>
                      <Icon name={t.entity.type === 'lead' ? 'users' : 'building-2'} size="xs" color="text-3" />
                      <span style={{ font: 'var(--font-weight-medium) 12px/16px var(--font-sans)', color: 'var(--text-2)' }}>{t.entity.label}</span>
                    </span>
                  </td>
                  <td>
                    {t.owner ? (
                      <div className="mn-cell-owner"><Avatar user={t.owner} size={22} /><span>{t.owner.name}</span></div>
                    ) : (
                      <span className="mn-chip mn-chip--noowner"><Icon name="user-x" size="xs" stroke="2" />Unassigned</span>
                    )}
                  </td>
                  <td>
                    <span className="mn-mono" style={{
                      fontSize: 12,
                      color: tone === 'overdue' ? 'var(--error-main)' : tone === 'today' ? 'var(--warning-main)' : 'var(--text-2)',
                      fontWeight: tone === 'overdue' || tone === 'today' ? 650 : 450,
                    }}>
                      {tone === 'today' ? 'Today' : new Date(t.due).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })}
                      {tone === 'overdue' ? ' · overdue' : ''}
                    </span>
                  </td>
                  <td><span className={`mn-chip mn-chip--pr-${t.priority}`}>{t.priority}</span></td>
                  <td>
                    <span className={`mn-chip mn-chip--tk-${t.status}`}>
                      <Icon name={t.status === 'open' ? 'circle' : t.status === 'completed' ? 'check' : 'x'} size="xs" stroke="2" />
                      {t.status === 'open' ? 'Open' : t.status === 'completed' ? 'Completed' : 'Cancelled'}
                    </span>
                  </td>
                  <td onClick={(e) => e.stopPropagation()}>
                    <IconButton icon="more-horizontal" size="sm" title={t.status === 'open' ? 'Complete · Cancel · Reassign' : 'Reopen'} />
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        {filtered.length === 0 ? (
          <div className="mn-empty">
            <Icon name="check-square" size="lg" />
            <div className="mn-empty-msg">No tasks in this view.</div>
          </div>
        ) : null}
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { Activities });