/* 業務OS — TODO tab (with detail view navigation) */

function TodoTab({ onOpenDetail }) {
  const D = window.GYOMU;
  const [selectedTask, setSelectedTask] = useState(null);
  const sorted = [...D.todos].sort((a, b) => {
    const po = { P1: 0, P2: 1, P3: 2 };
    return (po[a.p] || 9) - (po[b.p] || 9);
  });
  const sel = sorted.find(t => t.id === selectedTask);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ flex: 1, overflowY: 'auto', padding: 16 }}>
        {/* Morning header */}
        <div style={{ marginBottom: 14 }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 4 }}>MORNING REVIEW</div>
          <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--text-0)', letterSpacing: '-.01em', marginBottom: 4 }}>朝の業務棚卸し</div>
          <div style={{ fontSize: 11, color: 'var(--text-2)' }}>Outlook + Salesforce + 前日残タスクをマージしました</div>
        </div>

        <div style={{ marginBottom: 14 }}><StatsSummary stats={D.stats} /></div>

        <SectionHead title="今日の予定" titleEn="Schedule" count={D.calendar.length} />
        <CalendarStrip events={D.calendar} style={{ marginBottom: 16 }} />

        <SectionHead title="今日のTODO" titleEn="Tasks" count={sorted.length} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {sorted.map(task => (
            <TaskCard key={task.id} task={task} selected={selectedTask === task.id}
              onClick={() => setSelectedTask(selectedTask === task.id ? null : task.id)} />
          ))}
        </div>
      </div>

      {/* Detail bar */}
      {sel && (
        <div style={{ borderTop: '2px solid var(--accent)', padding: '12px 16px', background: 'var(--surface)', flexShrink: 0 }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                <PriorityBadge p={sel.p} />
                <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-0)' }}>{sel.title}</span>
                <ModeBadge mode={sel.mode} label={sel.modeL} />
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-2)', lineHeight: 1.6, padding: '6px 8px', background: 'var(--bg-3)', borderRadius: 4, borderLeft: '3px solid var(--info)' }}>
                <Icon name="zap" size={10} style={{ color: 'var(--info)', marginRight: 4 }} />{sel.aiSum}
              </div>
              {sel.files.length > 0 && (
                <div style={{ marginTop: 6, display: 'flex', gap: 6, alignItems: 'center' }}>
                  <Icon name="paperclip" size={10} style={{ color: 'var(--text-3)' }} />
                  {sel.files.map((f, i) => <span key={i} style={{ fontSize: 10, color: 'var(--info)', cursor: 'pointer' }}>{f.split('/').pop()}</span>)}
                </div>
              )}
            </div>
            <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
              {sel.mode === 'approve' && <Btn primary onClick={() => onOpenDetail(sel.id)}>承認</Btn>}
              {sel.mode === 'ai' && <Btn primary style={{ background: 'var(--info)', borderColor: 'var(--info)' }} onClick={() => onOpenDetail(sel.id)}>実行</Btn>}
              {sel.mode === 'collaborate' && <Btn primary style={{ background: 'var(--stage-s0)', borderColor: 'var(--stage-s0)' }} onClick={() => onOpenDetail(sel.id)}>開始</Btn>}
              {sel.mode === 'human' && <Btn primary onClick={() => onOpenDetail(sel.id)}>対応開始</Btn>}
              <Btn onClick={() => onOpenDetail(sel.id)}>詳細</Btn>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.TodoTab = TodoTab;