/* 業務OS — Salesforce embedded view */

function SalesforceView() {
  const D = window.GYOMU;
  const sf = D.salesforce;
  const [selected, setSelected] = useState(null);

  const stageLabels = { S0: '接触', S1: '検証', S2: '提案', S3: '交渉', S4: '受注' };
  const stageColors = { S0: 'var(--stage-s0)', S1: 'var(--stage-s1)', S2: 'var(--stage-s2)', S3: 'var(--stage-s3)', S4: 'var(--stage-s4)' };
  const sel = sf.pipeline.find(p => p.id === selected);

  const yen = n => '¥ ' + Math.round(n).toLocaleString('en-US');
  const yenM = n => '¥ ' + (n / 1e6).toFixed(1) + 'M';

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      {/* Toolbar */}
      <div style={{ padding: '10px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <Icon name="database" size={16} style={{ color: 'var(--success)' }} />
        <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-0)' }}>Salesforce</span>
        <div style={{ flex: 1 }} />
        <StatusDot status="connected" size={6} />
        <span style={{ fontSize: 9, color: 'var(--text-3)', fontFamily: 'var(--font-mono)' }}>最終同期 {D.integrations[2].lastSync}</span>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: 16 }}>
        {/* KPI row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 16 }}>
          {[
            { label: 'パイプライン合計', labelEn: 'Pipeline', value: yenM(sf.kpi.pipelineTotal), color: 'var(--text-0)' },
            { label: '加重見込', labelEn: 'Weighted', value: yenM(sf.kpi.weighted), color: 'var(--info)' },
            { label: '受注済 FY', labelEn: 'Won', value: yenM(sf.kpi.wonFY), color: 'var(--success)' },
            { label: '案件数', labelEn: 'Deals', value: sf.kpi.deals, color: 'var(--text-0)' },
          ].map((kpi, i) => (
            <div key={i} style={{ background: 'var(--surface)', border: '1px solid var(--border-subtle)', borderRadius: 6, padding: '12px 14px', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: kpi.color, opacity: 0.5 }} />
              <div style={{ fontSize: 9, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-3)', marginBottom: 4 }}>
                {kpi.label} <span style={{ fontWeight: 500, letterSpacing: '.02em', textTransform: 'none' }}>/ {kpi.labelEn}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 20, fontWeight: 600, color: kpi.color, letterSpacing: '-.02em' }}>{kpi.value}</div>
            </div>
          ))}
        </div>

        {/* Pipeline table */}
        <div style={{ background: 'var(--surface)', border: '1px solid var(--border-subtle)', borderRadius: 6, overflow: 'hidden' }}>
          <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-2)' }}>パイプライン / PIPELINE</span>
            <div style={{ flex: 1 }} />
            <Btn small><Icon name="filter" size={11} />フィルタ</Btn>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
            <thead>
              <tr>
                <th>クライアント</th>
                <th>案件</th>
                <th>ステージ</th>
                <th style={{ textAlign: 'right' }}>金額</th>
                <th style={{ textAlign: 'right' }}>確度</th>
                <th>担当</th>
                <th>次アクション</th>
              </tr>
            </thead>
            <tbody>
              {sf.pipeline.map(deal => (
                <tr key={deal.id} onClick={() => setSelected(selected === deal.id ? null : deal.id)}
                  style={{
                    cursor: 'pointer', transition: 'background .1s',
                    background: selected === deal.id ? 'var(--accent-soft)' : deal.alert ? 'var(--danger-bg)' : undefined,
                  }}
                  onMouseEnter={e => { if (selected !== deal.id) e.currentTarget.style.background = deal.alert ? 'rgba(200,29,29,.08)' : 'var(--surface-hover)'; }}
                  onMouseLeave={e => { if (selected !== deal.id) e.currentTarget.style.background = deal.alert ? 'var(--danger-bg)' : ''; }}>
                  <td style={{ fontWeight: 600, color: 'var(--text-0)', whiteSpace: 'nowrap' }}>
                    {deal.alert && <span style={{ color: 'var(--danger)', marginRight: 4, fontSize: 11 }}>⚠</span>}
                    {deal.client}
                  </td>
                  <td style={{ color: 'var(--text-2)', maxWidth: 160, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{deal.project}</td>
                  <td>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
                      padding: '2px 7px', borderRadius: 3,
                      background: (stageColors[deal.stage] || 'var(--text-3)') + '18',
                      color: stageColors[deal.stage] || 'var(--text-3)',
                    }}>{deal.stage} {stageLabels[deal.stage]}</span>
                  </td>
                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500, textAlign: 'right', color: 'var(--text-0)' }}>{yen(deal.amount)}</td>
                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, textAlign: 'right', color: deal.prob >= 80 ? 'var(--success)' : deal.prob >= 50 ? 'var(--warning)' : 'var(--text-2)' }}>{deal.prob} %</td>
                  <td style={{ whiteSpace: 'nowrap', color: 'var(--text-1)', fontWeight: 500 }}>{deal.owner}</td>
                  <td style={{ fontSize: 10, color: 'var(--text-2)' }}>{deal.nextAction}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Detail panel below table */}
        {sel && (
          <div style={{ marginTop: 12, padding: '14px 18px', background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 6, borderLeft: '3px solid ' + (stageColors[sel.stage] || 'var(--border)') }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-0)' }}>{sel.client}</span>
              <span style={{ fontSize: 11, color: 'var(--text-2)' }}>{sel.project}</span>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600, padding: '2px 8px', borderRadius: 3,
                background: (stageColors[sel.stage] || 'var(--text-3)') + '18', color: stageColors[sel.stage],
              }}>{sel.stage} {stageLabels[sel.stage]}</span>
              {sel.alert && <span style={{ fontSize: 9, fontWeight: 700, padding: '2px 7px', borderRadius: 3, background: 'var(--danger-bg)', color: 'var(--danger)' }}>離反予兆</span>}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
              <div>
                <div style={{ fontSize: 9, fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--text-3)', marginBottom: 2 }}>受注額</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, fontWeight: 600, color: 'var(--text-0)' }}>{yen(sel.amount)}</div>
              </div>
              <div>
                <div style={{ fontSize: 9, fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--text-3)', marginBottom: 2 }}>確度</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, fontWeight: 600, color: sel.prob >= 80 ? 'var(--success)' : 'var(--warning)' }}>{sel.prob} %</div>
              </div>
              <div>
                <div style={{ fontSize: 9, fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--text-3)', marginBottom: 2 }}>担当</div>
                <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--text-0)' }}>{sel.owner}</div>
              </div>
              <div>
                <div style={{ fontSize: 9, fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--text-3)', marginBottom: 2 }}>更新日</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-1)' }}>{sel.updated}</div>
              </div>
            </div>
            <div style={{ marginTop: 10, display: 'flex', gap: 6 }}>
              <Btn><Icon name="external-link" size={12} />SFで開く</Btn>
              <Btn><Icon name="pencil" size={12} />ステージ変更</Btn>
              <Btn><Icon name="zap" size={12} />AI分析</Btn>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.SalesforceView = SalesforceView;