/* 業務OS — Briefing tab (業務の棚卸) */

function SourceCards({ premise }) {
  const sources = premise?.sources || [];
  const systemSources = premise?.systemSources || [];
  return (
    <div style={{ marginBottom: 20 }}>
      <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.06em', color: 'var(--text-3)', marginBottom: 8, textTransform: 'uppercase' }}>
        業務フロー — 3つの流入源
      </div>
      <div style={{ fontSize: 11, color: 'var(--text-2)', marginBottom: 10 }}>
        {systemSources.join(' · ')} から取り込み
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        {sources.map(src => (
          <div key={src.key} style={{
            padding: '10px 12px', background: 'var(--bg-3)', borderRadius: 6,
            border: '1px solid var(--border-subtle)', minHeight: 72,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
              <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-0)' }}>{src.label}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-3)' }}>{src.count}件</span>
            </div>
            <div style={{ fontSize: 9, color: 'var(--text-3)', marginBottom: 6 }}>{src.sub}</div>
            {src.count === 0 ? (
              <div style={{ fontSize: 10, color: 'var(--text-3)', fontStyle: 'italic' }}>{src.emptyNote || '該当なし'}</div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                {src.examples.slice(0, 2).map((ex, i) => (
                  <div key={i} style={{ fontSize: 10, color: 'var(--text-2)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{ex}</div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

function LogicDetailPanel({ detail, stepKey }) {
  if (!detail) return null;
  return (
    <div style={{
      margin: '0 0 4px 12px', padding: '12px 14px', background: 'var(--bg-3)',
      borderRadius: 6, borderLeft: '3px solid var(--info)', fontSize: 11, color: 'var(--text-1)', lineHeight: 1.6,
    }}>
      <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.06em', color: 'var(--text-3)', marginBottom: 8, textTransform: 'uppercase' }}>
        {detail.title}
      </div>

      {stepKey === 'intake' && detail.rows && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {detail.rows.map((row, i) => (
            <div key={i}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                <span style={{ fontWeight: 600, color: 'var(--text-0)' }}>{row.label}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--info)' }}>{row.value}</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
                {row.items.map((item, j) => (
                  <span key={j} style={{ fontSize: 10, padding: '2px 6px', background: 'var(--surface)', borderRadius: 3, color: 'var(--text-2)' }}>{item}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}

      {stepKey === 'organize' && (
        <>
          {detail.logic && detail.logic.map((line, i) => (
            <div key={i} style={{ marginBottom: 6, color: 'var(--text-2)' }}>{line}</div>
          ))}
          {detail.result && (
            <div style={{ marginBottom: 8, fontWeight: 600, color: 'var(--text-0)' }}>
              結果: {detail.result}
            </div>
          )}
          {detail.excluded && detail.excluded.length > 0 && (
            <div>
              <div style={{ fontSize: 10, color: 'var(--text-3)', marginBottom: 4 }}>除外 ({detail.excluded.length}件)</div>
              {detail.excluded.map((ex, i) => (
                <div key={i} style={{ display: 'flex', gap: 8, marginBottom: 2 }}>
                  <span style={{ fontSize: 9, fontWeight: 600, color: 'var(--warning)', minWidth: 36 }}>{ex.reason}</span>
                  <span style={{ color: 'var(--text-2)' }}>{ex.item}</span>
                </div>
              ))}
            </div>
          )}
        </>
      )}

      {stepKey === 'prioritize' && (
        <>
          {detail.axes && (
            <div style={{ marginBottom: 10 }}>
              <span style={{ fontSize: 10, color: 'var(--text-3)' }}>評価軸: </span>
              <span>{detail.axes.join(' · ')}</span>
            </div>
          )}
          {detail.byPriority && Object.entries(detail.byPriority).map(([p, tasks]) => (
            <div key={p} style={{ marginBottom: 8 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                <PriorityBadge p={p} />
                <span style={{ fontSize: 10, color: 'var(--text-3)' }}>{tasks.length}件</span>
              </div>
              {tasks.map((t, i) => (
                <div key={i} style={{ paddingLeft: 8, marginBottom: 3, display: 'flex', gap: 8 }}>
                  <span style={{ fontWeight: 500, color: 'var(--text-0)', minWidth: 0, flex: 1 }}>{t.task}</span>
                  <span style={{ fontSize: 10, color: 'var(--text-3)', whiteSpace: 'nowrap' }}>{t.reason}</span>
                </div>
              ))}
            </div>
          ))}
          {detail.interrupt && (
            <div style={{
              marginTop: 8, padding: '8px 10px', background: 'rgba(173,0,33,.06)',
              borderRadius: 4, border: '1px solid rgba(173,0,33,.15)',
            }}>
              <Icon name="zap" size={11} style={{ color: 'var(--accent)', marginRight: 4, verticalAlign: 'middle' }} />
              <span style={{ fontWeight: 600, color: 'var(--accent)' }}>割込判定: </span>
              <span>{detail.interrupt.task} → {detail.interrupt.reason}</span>
            </div>
          )}
        </>
      )}

      {stepKey === 'queue' && (
        <>
          {detail.modes && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 10 }}>
              {[
                { key: 'ai', label: 'AI実行', count: detail.modes.ai },
                { key: 'approve', label: '人承認', count: detail.modes.approve },
                { key: 'collaborate', label: '協業', count: detail.modes.collaborate },
                { key: 'human', label: '人判断', count: detail.modes.human },
              ].map(m => (
                <div key={m.key} style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600, color: 'var(--text-0)' }}>{m.count}</span>
                  <span style={{ fontSize: 10, color: 'var(--text-3)' }}>{m.label}</span>
                </div>
              ))}
            </div>
          )}
          {detail.assignment && (
            <div style={{ marginBottom: 8 }}>
              <span style={{ fontSize: 10, color: 'var(--text-3)' }}>担当配分: </span>
              <span style={{ fontWeight: 500 }}>{detail.assignment}</span>
            </div>
          )}
          {detail.headline && (
            <div style={{ fontWeight: 600, color: 'var(--accent)' }}>→ {detail.headline}</div>
          )}
        </>
      )}
    </div>
  );
}

function FunnelStep({ step, index, expanded, onToggle }) {
  const isExpanded = expanded === step.key;
  const stepNum = ['①', '②', '③', '④'][index] || `${index + 1}`;
  return (
    <div style={{ marginBottom: 0 }}>
      <div
        onClick={() => onToggle(step.key)}
        style={{
          display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px',
          background: step.highlight ? 'var(--accent-soft)' : 'var(--surface)',
          border: `1px solid ${step.highlight ? 'rgba(173,0,33,.25)' : 'var(--border-subtle)'}`,
          borderRadius: 6, cursor: 'pointer', transition: 'background .12s',
        }}
        onMouseEnter={e => { if (!step.highlight) e.currentTarget.style.background = 'var(--surface-hover)'; }}
        onMouseLeave={e => { if (!step.highlight) e.currentTarget.style.background = 'var(--surface)'; }}
      >
        <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-3)', minWidth: 20 }}>{stepNum}</span>
        <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-0)', minWidth: 72 }}>{step.label}</span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, color: step.highlight ? 'var(--accent)' : 'var(--text-0)' }}>
          {step.summary}
        </span>
        {step.sub && (
          <span style={{ fontSize: 10, color: step.highlight ? 'var(--accent)' : 'var(--text-3)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {step.highlight && '★ '}{step.sub}
          </span>
        )}
        {!step.sub && <span style={{ flex: 1 }} />}
        <Icon name={isExpanded ? 'chevron-down' : 'chevron-right'} size={14} style={{ color: 'var(--text-3)', flexShrink: 0 }} />
      </div>
      {isExpanded && <LogicDetailPanel detail={step.detail} stepKey={step.key} />}
    </div>
  );
}

function FunnelSteps({ funnel, expandedStep, onToggleStep }) {
  return (
    <div style={{ marginBottom: 20 }}>
      <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.06em', color: 'var(--text-3)', marginBottom: 10, textTransform: 'uppercase' }}>
        整理ファネル（各段クリックで詳細）
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
        {(funnel || []).map((step, i) => (
          <React.Fragment key={step.key}>
            <FunnelStep step={step} index={i} expanded={expandedStep} onToggle={onToggleStep} />
            {i < funnel.length - 1 && (
              <div style={{ display: 'flex', justifyContent: 'center', padding: '2px 0', color: 'var(--text-4)' }}>
                <Icon name="chevron-down" size={12} />
              </div>
            )}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function BriefingTab({ briefingCompleted, isRunning, onStart, onReset }) {
  const D = window.GYOMU;
  const B = D.briefing || {};
  const premise = B.premise || {};
  const focusTask = D.todos.find(t => t.id === (B.focusTaskId || 't1'));
  const carryoverCount = D.statsCarryover ? D.statsCarryover.total : D.todos.filter(t => t.cat === 'carryover').length;
  const carryoverTasks = D.todos.filter(t => t.cat === 'carryover');

  const [expandedFunnelStep, setExpandedFunnelStep] = useState(null);
  const [detailExpanded, setDetailExpanded] = useState(false);

  useEffect(() => {
    if (!briefingCompleted) {
      setExpandedFunnelStep(null);
      setDetailExpanded(false);
    }
  }, [briefingCompleted]);

  const handleToggleFunnelStep = (key) => {
    setExpandedFunnelStep(prev => (prev === key ? null : key));
  };

  const handleReset = () => {
    setExpandedFunnelStep(null);
    setDetailExpanded(false);
    if (onReset) onReset();
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflowY: 'auto' }}>
      <div style={{ flex: 1, padding: '32px 48px', maxWidth: 720, margin: '0 auto', width: '100%' }}>
        <div style={{ marginBottom: 24 }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 6 }}>
            {briefingCompleted ? 'BRIEFING COMPLETE' : 'MORNING BRIEFING'}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 22, fontWeight: 600, color: 'var(--text-0)', letterSpacing: '-.02em' }}>
              業務の棚卸
            </span>
            {briefingCompleted && (
              <span style={{ fontSize: 10, fontWeight: 600, padding: '3px 10px', borderRadius: 4, background: 'var(--success-bg)', color: 'var(--success)', border: '1px solid rgba(34,139,34,.25)' }}>
                棚卸し済み
              </span>
            )}
          </div>
          <div style={{ fontSize: 12, color: 'var(--text-2)' }}>
            {B.greeting || 'おはようございます'}、{D.user.name.split(' ')[0]}さん — {D.date}（{D.dow}）
            {briefingCompleted && <> — {B.completedAt || '09:00'} に完了</>}
          </div>
        </div>

        {briefingCompleted ? (
          <>
            <SourceCards premise={premise} />
            <FunnelSteps
              funnel={premise.funnel}
              expandedStep={expandedFunnelStep}
              onToggleStep={handleToggleFunnelStep}
            />

            <div style={{ marginBottom: 20 }}>
              <button
                onClick={() => setDetailExpanded(v => !v)}
                style={{
                  fontFamily: 'inherit', fontSize: 11, fontWeight: 600, color: 'var(--text-2)',
                  background: 'var(--bg-3)', border: '1px solid var(--border-subtle)', borderRadius: 6,
                  padding: '8px 16px', cursor: 'pointer', width: '100%', display: 'flex',
                  alignItems: 'center', justifyContent: 'center', gap: 6,
                }}
              >
                <Icon name={detailExpanded ? 'chevron-up' : 'chevron-down'} size={14} />
                {detailExpanded ? '今日の予定・焦点を閉じる' : '今日の予定・焦点を見る'}
              </button>
            </div>

            {detailExpanded && (
              <>
                <div style={{ marginBottom: 20 }}><StatsSummary stats={D.stats} /></div>

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

                {focusTask && (
                  <div style={{ marginBottom: 28 }}>
                    <SectionHead title="今日の焦点" titleEn="Focus" />
                    <div style={{
                      padding: '16px 18px', background: 'var(--accent-soft)', border: '1px solid rgba(173,0,33,.2)',
                      borderRadius: 8, borderLeft: '4px solid var(--accent)',
                    }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                        <PriorityBadge p={focusTask.p} />
                        <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-0)' }}>{focusTask.displayTitle || focusTask.title}</span>
                        <ModeBadge mode={focusTask.mode} label={focusTask.modeL} />
                      </div>
                      <div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 8 }}>{focusTask.sub}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-1)', lineHeight: 1.6, padding: '8px 10px', background: 'rgba(255,255,255,.5)', borderRadius: 4 }}>
                        <Icon name="zap" size={11} style={{ color: 'var(--info)', marginRight: 4, verticalAlign: 'middle' }} />
                        {focusTask.aiSum}
                      </div>
                      {B.headline && (
                        <div style={{ marginTop: 10, fontSize: 11, fontWeight: 600, color: 'var(--accent)' }}>
                          → {B.headline}
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </>
            )}
          </>
        ) : (
          <>
            <div style={{ marginBottom: 20, padding: '10px 14px', background: 'var(--bg-3)', borderRadius: 6, border: '1px solid var(--border-subtle)' }}>
              <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.06em', color: 'var(--text-3)', marginBottom: 4, textTransform: 'uppercase' }}>
                取り込み元（未実行）
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-1)', marginBottom: 6 }}>
                {(B.mergedFrom || []).join(' + ')} — 開始ボタンで取り込み・整理します
              </div>
              <div style={{ fontSize: 10, color: 'var(--text-3)' }}>
                現在確認済み: 前日残 <strong>{carryoverCount} 件</strong>（今日の業務タブに表示中）
              </div>
            </div>

            <div style={{ marginBottom: 20 }}>
              <SectionHead title="前日残" titleEn="Carryover" count={carryoverCount} />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {carryoverTasks.map(task => (
                  <div key={task.id} style={{
                    padding: '10px 12px', background: 'var(--bg-3)', borderRadius: 6,
                    border: '1px solid var(--border-subtle)', opacity: .85,
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                      <PriorityBadge p={task.p} />
                      <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-0)' }}>{task.displayTitle || task.title}</span>
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--text-2)' }}>{task.sub}</div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ marginBottom: 28, padding: '12px 14px', background: 'var(--bg-3)', borderRadius: 6, border: '1px dashed var(--border)', textAlign: 'center' }}>
              <Icon name="clock" size={16} style={{ color: 'var(--text-3)', marginBottom: 6 }} />
              <div style={{ fontSize: 11, color: 'var(--text-3)', lineHeight: 1.6 }}>
                3流入源の整理結果・優先付けは<br />棚卸し開始後に表示されます
              </div>
            </div>
          </>
        )}

        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, paddingTop: 8 }}>
          {briefingCompleted ? (
            <>
              <span style={{ fontSize: 11, fontWeight: 600, padding: '6px 16px', borderRadius: 4, background: 'var(--success)', color: '#fff', opacity: .9 }}>
                <Icon name="check" size={12} style={{ marginRight: 4, verticalAlign: 'middle' }} />
                棚卸し済み — 今日の業務タブに反映済み
              </span>
              {onReset && (
                <button onClick={handleReset} style={{
                  fontFamily: 'inherit', fontSize: 10, color: 'var(--text-3)', background: 'none',
                  border: 'none', cursor: 'pointer', textDecoration: 'underline',
                }}>
                  デモ用: 棚卸しをリセット
                </button>
              )}
            </>
          ) : (
            <Btn primary onClick={onStart} disabled={isRunning} style={{ padding: '10px 28px', fontSize: 13, opacity: isRunning ? .65 : 1, cursor: isRunning ? 'wait' : 'pointer' }}>
              <Icon name={isRunning ? 'loader-2' : 'arrow-right'} size={14} style={{ color: '#fff' }} />
              {isRunning ? '棚卸し実行中…' : '今日の業務の棚卸を開始'}
            </Btn>
          )}
        </div>
      </div>
    </div>
  );
}

window.BriefingTab = BriefingTab;
window.MorningBriefing = BriefingTab;