/* 業務OS — Task detail / execution view */

function TaskDetailView({ taskId, onBack }) {
  const D = window.GYOMU;
  const task = D.todos.find(t => t.id === taskId);
  const steps = (D.taskSteps && D.taskSteps[taskId]) || null;
  if (!task) return null;

  const statusIcon = { done: 'check-circle', current: 'circle-dot', pending: 'circle' };
  const statusColor = { done: 'var(--success)', current: 'var(--accent)', pending: 'var(--text-4)' };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ flex: 1, overflowY: 'auto', padding: 16 }}>
        {/* Back button */}
        <div onClick={onBack} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--text-2)', cursor: 'pointer', marginBottom: 12, padding: '4px 0' }}
          onMouseEnter={e => e.currentTarget.style.color = 'var(--accent)'}
          onMouseLeave={e => e.currentTarget.style.color = 'var(--text-2)'}>
          <Icon name="arrow-left" size={13} />TODO に戻る
        </div>

        {/* Header */}
        <div style={{ marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <PriorityBadge p={task.p} />
            <span style={{ fontSize: 18, fontWeight: 600, color: 'var(--text-0)', letterSpacing: '-.01em' }}>{task.title}</span>
            <ModeBadge mode={task.mode} label={task.modeL} />
          </div>
          <div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 8 }}>{task.sub}</div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <CategoryLabel cat={task.cat} />
            <SourceBadge source={task.src} icon={task.srcI} />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: task.urgent ? 'var(--danger)' : 'var(--text-3)' }}>期限: {task.due}</span>
            {task.files.length > 0 && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginLeft: 8 }}>
                <Icon name="paperclip" size={11} style={{ color: 'var(--text-3)' }} />
                {task.files.map((f, i) => <span key={i} style={{ fontSize: 10, color: 'var(--info)', cursor: 'pointer' }}>{f.split('/').pop()}</span>)}
              </div>
            )}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 16 }}>
          {/* Left: Steps timeline */}
          <div>
            {steps && (
              <div style={{ background: 'var(--surface)', border: '1px solid var(--border-subtle)', borderRadius: 6, padding: '14px 16px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12 }}>
                  <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-2)' }}>実行ステップ</span>
                  <span style={{ fontSize: 9, color: 'var(--text-3)', fontWeight: 500 }}>/ スキル: {steps.skill}</span>
                  <div style={{ flex: 1 }} />
                  {/* Progress */}
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600, color: 'var(--accent)' }}>
                    {steps.steps.filter(s => s.status === 'done').length} / {steps.steps.length}
                  </span>
                </div>

                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  {steps.steps.map((step, i) => (
                    <div key={step.id} style={{ display: 'flex', gap: 12, position: 'relative', paddingBottom: i < steps.steps.length - 1 ? 16 : 0 }}>
                      {/* Timeline line */}
                      {i < steps.steps.length - 1 && (
                        <div style={{ position: 'absolute', left: 9, top: 22, width: 2, bottom: 0, background: step.status === 'done' ? 'var(--success)' : 'var(--border-subtle)' }} />
                      )}
                      {/* Icon */}
                      <div style={{ flexShrink: 0, paddingTop: 2 }}>
                        <Icon name={statusIcon[step.status]} size={20} style={{ color: statusColor[step.status] }} />
                      </div>
                      {/* Content */}
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                          <span style={{ fontSize: 12, fontWeight: step.status === 'current' ? 600 : 500, color: step.status === 'pending' ? 'var(--text-3)' : 'var(--text-0)' }}>
                            {step.label}
                          </span>
                          <span style={{
                            fontSize: 8, fontWeight: 600, padding: '1px 5px', borderRadius: 3,
                            background: step.agent === 'ai' ? 'rgba(46,125,214,.1)' : 'var(--bg-3)',
                            color: step.agent === 'ai' ? 'var(--info)' : 'var(--text-2)',
                          }}>{step.agent === 'ai' ? 'AI' : '人'}</span>
                          {step.time && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text-3)' }}>{step.time}</span>}
                        </div>
                        <div style={{ fontSize: 10, color: 'var(--text-2)', lineHeight: 1.5 }}>{step.desc}</div>
                        {/* Action buttons for current step */}
                        {step.status === 'current' && (
                          <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
                            {task.mode === 'approve' && <Btn primary small>承認して次へ</Btn>}
                            {task.mode === 'collaborate' && <Btn primary small style={{ background: 'var(--stage-s0)', borderColor: 'var(--stage-s0)' }}>確認完了</Btn>}
                            {task.mode === 'ai' && <Btn primary small style={{ background: 'var(--info)', borderColor: 'var(--info)' }}>実行</Btn>}
                            {task.mode === 'human' && <Btn primary small>対応開始</Btn>}
                            <Btn small>スキップ</Btn>
                            <Btn small>AIに相談</Btn>
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* AI analysis */}
            <div style={{ background: 'var(--surface)', border: '1px solid var(--border-subtle)', borderRadius: 6, padding: '14px 16px', marginTop: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                <Icon name="zap" size={13} style={{ color: 'var(--info)' }} />
                <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-2)' }}>AI分析・推奨</span>
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-1)', lineHeight: 1.7, padding: '8px 10px', background: 'var(--bg-3)', borderRadius: 4, borderLeft: '3px solid var(--info)' }}>
                {task.aiSum}
              </div>
            </div>
          </div>

          {/* Right: Context panel */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {/* KPIs */}
            {steps && steps.context && (
              <div style={{ background: 'var(--surface)', border: '1px solid var(--border-subtle)', borderRadius: 6, padding: '14px 16px' }}>
                <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-3)', marginBottom: 8 }}>コンテキスト</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {steps.context.map((c, i) => (
                    <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                      <span style={{ fontSize: 10, color: 'var(--text-2)' }}>{c.label}</span>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, color: c.color }}>{c.value}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Related files */}
            {task.files.length > 0 && (
              <div style={{ background: 'var(--surface)', border: '1px solid var(--border-subtle)', borderRadius: 6, padding: '14px 16px' }}>
                <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-3)', marginBottom: 8 }}>関連ファイル</div>
                {task.files.map((f, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 0', fontSize: 11, color: 'var(--info)', cursor: 'pointer' }}>
                    <Icon name="file" size={12} />{f}
                  </div>
                ))}
              </div>
            )}

            {/* Actions */}
            <div style={{ background: 'var(--surface)', border: '1px solid var(--border-subtle)', borderRadius: 6, padding: '14px 16px' }}>
              <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-3)', marginBottom: 8 }}>アクション</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <Btn><Icon name="pencil" size={12} />編集</Btn>
                <Btn><Icon name="clock" size={12} />リスケジュール</Btn>
                <Btn><Icon name="user-plus" size={12} />担当変更</Btn>
                <Btn danger small><Icon name="x" size={12} style={{ color: '#fff' }} />キャンセル</Btn>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.TaskDetailView = TaskDetailView;