/* My Tasks view — everything assigned to the signed-in user.
   Reads myTasks.events (events where I'm an owner) and myTasks.subtasks
   (sub-tasks that resolve to me, either directly or via inheritance).
   Clicking a row opens the right-side detail panel via openEvent. */

const UMy = window.mcalUtils;

function MyTasksView({ myOwnerId, myTasks, options, today, openEvent, update, user }) {
  if (!myOwnerId) {
    return (
      <div className="mytasks">
        <div className="mytasks-empty">
          We can't tell who you are yet. Try refreshing the page after Google sign-in completes.
        </div>
      </div>
    );
  }

  const ownerRecord = (options.owners || []).find(o => o.id === myOwnerId);
  const displayName = ownerRecord ? ownerRecord.name : (user && user.name) || 'You';

  const events = myTasks.events || [];
  const subs = myTasks.subtasks || [];

  // Sort: today's tasks first, then upcoming chronological, then done last.
  const sortValue = (date, stage) => {
    if (stage === 'done') return 'z' + date;
    if (date < today) return 'a' + date;       // overdue
    return 'b' + date;                          // upcoming
  };
  const evRows = events
    .map(ev => ({ kind: 'event', ev, sortKey: sortValue(ev.start, ev.stage) }))
    .sort((a, b) => a.sortKey < b.sortKey ? -1 : a.sortKey > b.sortKey ? 1 : 0);
  const subRows = subs
    .map(({ ev, st }) => ({ kind: 'subtask', ev, st, sortKey: sortValue(st.date, st.stage || 'ideation') }))
    .sort((a, b) => a.sortKey < b.sortKey ? -1 : a.sortKey > b.sortKey ? 1 : 0);

  if (evRows.length === 0 && subRows.length === 0) {
    return (
      <div className="mytasks">
        <div className="mytasks-empty">
          Nothing assigned to {displayName} yet. Open any task and add yourself as an owner.
        </div>
      </div>
    );
  }

  return (
    <div className="mytasks">
      {evRows.length > 0 && (
        <section>
          <div className="mytasks-section-head">
            <h3>Tasks · {displayName}</h3>
            <span className="mytasks-section-count">{evRows.length}</span>
          </div>
          {evRows.map(r => (
            <TaskCard
              key={r.ev.id}
              ev={r.ev}
              options={options}
              today={today}
              onOpen={() => openEvent(r.ev.id)}
              onToggleDone={() => update(r.ev.id, { stage: r.ev.stage === 'done' ? 'ready' : 'done' })}
            />
          ))}
        </section>
      )}
      {subRows.length > 0 && (
        <section>
          <div className="mytasks-section-head">
            <h3>Sub-tasks · {displayName}</h3>
            <span className="mytasks-section-count">{subRows.length}</span>
          </div>
          {subRows.map(r => (
            <SubtaskCard
              key={r.ev.id + '_' + r.st.id}
              ev={r.ev}
              st={r.st}
              options={options}
              today={today}
              onOpen={() => openEvent(r.ev.id, r.st.id)}
              onToggleDone={() => {
                const nextStage = (r.st.stage || 'ideation') === 'done' ? 'ready' : 'done';
                const next = (r.ev.subtasks || []).map(s => s.id === r.st.id ? { ...s, stage: nextStage } : s);
                update(r.ev.id, { subtasks: next });
              }}
            />
          ))}
        </section>
      )}
    </div>
  );
}

function TaskCard({ ev, options, today, onOpen, onToggleDone }) {
  const cls = ['mytasks-card'];
  if (ev.tbd && ev.stage !== 'done') cls.push('tbd');
  if (ev.needsReview && ev.stage !== 'done') cls.push('needs-review');
  if (ev.stage === 'done') cls.push('done');
  const catColor = UMy.colorOf(options, 'categories', ev.category);
  return (
    <div className={cls.join(' ')} style={{ borderLeftColor: catColor }} onClick={onOpen}>
      <div className="mytasks-date">
        {UMy.shortDate(ev.start)}
        {ev.end !== ev.start && (
          <span style={{ color: 'var(--fg-4)' }}> → {UMy.shortDate(ev.end)}</span>
        )}
      </div>
      <div className="mytasks-body">
        <div className="mytasks-title">{ev.title ? (window.mcalRichText ? window.mcalRichText(ev.title, options) : ev.title) : 'Untitled'}</div>
        <div className="mytasks-meta">
          <window.mcalStageChip stageId={ev.stage} options={options} full />
          <span className="sep">·</span>
          <span>{UMy.nameOf(options, 'channels', ev.channel)}</span>
          <span className="sep">·</span>
          <span>{UMy.nameOf(options, 'categories', ev.category)}</span>
          {(ev.subtasks || []).length > 0 && (
            <>
              <span className="sep">·</span>
              <span>{ev.subtasks.length} sub-task{ev.subtasks.length > 1 ? 's' : ''}</span>
            </>
          )}
        </div>
      </div>
      <div className="mytasks-right">
        <button
          className="iconbtn sm"
          title={ev.stage === 'done' ? 'Mark not done' : 'Mark done'}
          onClick={e => { e.stopPropagation(); onToggleDone(); }}
        >{ev.stage === 'done' ? '↶' : '✓'}</button>
      </div>
    </div>
  );
}

function SubtaskCard({ ev, st, options, today, onOpen, onToggleDone }) {
  const cls = ['mytasks-card', 'is-subtask'];
  const stStage = st.stage || 'ideation';
  if (stStage === 'done') cls.push('done');
  const effCategory = (st.category !== undefined && st.category !== null && st.category !== '') ? st.category : ev.category;
  const catColor = UMy.colorOf(options, 'categories', effCategory);
  return (
    <div className={cls.join(' ')} style={{ borderLeftColor: catColor }} onClick={onOpen}>
      <div className="mytasks-date">
        {UMy.shortDate(st.date)}
      </div>
      <div className="mytasks-body">
        <div className="mytasks-title">{st.title ? (window.mcalRichText ? window.mcalRichText(st.title, options) : st.title) : 'Untitled'}</div>
        <div className="mytasks-meta">
          <window.mcalStageChip stageId={stStage} options={options} full />
          <span className="sep">·</span>
          <span style={{ color: 'var(--fg-4)' }}>↳ {ev.title ? (window.mcalRichText ? window.mcalRichText(ev.title, options) : ev.title) : 'Untitled'}</span>
        </div>
      </div>
      <div className="mytasks-right">
        <button
          className="iconbtn sm"
          title={stStage === 'done' ? 'Mark not done' : 'Mark done'}
          onClick={e => { e.stopPropagation(); onToggleDone(); }}
        >{stStage === 'done' ? '↶' : '✓'}</button>
      </div>
    </div>
  );
}

window.mcalMyTasks = { MyTasksView: React.memo(MyTasksView) };