/* チャットとAIエージェントの違い（営業資料v12 スライド9の図をWeb用に組み直したもの）
   上下2段（人／AI）のレーンに4つの手順を置き、線でつなぐ。幅が狭いときは縦向きに切り替える。
   使う場所：service-ai.html（AiWhatIs）・service-ai-agent.html（AiVsChat） */

const LANE_COLOR = {
  '人': { lane:'#eef1f6', dot:'#19448E' },
  'AI': { lane:'#f6efe2', dot:'#B07A2A' }
};
const AI_LANE_CHAT = [
  { who:'人', t:['人が仕事を受ける'] },
  { who:'AI', t:['作業の一部を', 'チャットに頼む'] },
  { who:'人', t:['AIの回答をもとに、', '人が仕上げる'] },
  { who:'人', t:['人が相手に渡す'] }
];
const AI_LANE_AGENT = [
  { who:'AI', t:['AIが仕事を受ける'] },
  { who:'AI', t:['AIが作る'] },
  { who:'人', t:['人が確認する'], hollow:true, dashedIn:true },
  { who:'AI', t:['AIが相手に渡す'], dashedIn:true }
];

const useNarrow = (px) => {
  const get = () => typeof window !== 'undefined' && window.innerWidth < px;
  const [narrow, setNarrow] = React.useState(get());
  React.useEffect(() => {
    const on = () => setNarrow(get());
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, []);
  return narrow;
};

const LaneDot = ({ x, y, s, i }) => {
  const c = LANE_COLOR[s.who].dot;
  return (
    <g>
      <circle cx={x} cy={y} r={15} fill={s.hollow ? '#fff' : c} stroke={c} strokeWidth={s.hollow ? 3 : 0}/>
      <text x={x} y={y + 6} textAnchor="middle" fontSize="16" fontWeight="700" fill={s.hollow ? c : '#fff'}>{i + 1}</text>
    </g>
  );
};

/* 横向き：左にレーン名、右へ手順が進む */
const LaneWide = ({ steps }) => {
  const laneY = { '人':34, 'AI':94 };
  const xs = [190, 400, 610, 820];
  return (
    <svg viewBox="0 0 920 186" width="100%" role="img" aria-label={steps.map(s => s.t.join('')).join('、')} style={{display:'block', fontFamily:'var(--font-sans, sans-serif)'}}>
      <rect x="70" y="4" width="850" height="60" fill={LANE_COLOR['人'].lane}/>
      <rect x="70" y="64" width="850" height="60" fill={LANE_COLOR['AI'].lane}/>
      <text x="84" y="40" fontSize="17" fontWeight="700" fill={LANE_COLOR['人'].dot}>人</text>
      <text x="84" y="100" fontSize="17" fontWeight="700" fill={LANE_COLOR['AI'].dot}>AI</text>
      {steps.slice(1).map((s, i) => (
        <line key={i} x1={xs[i]} y1={laneY[steps[i].who]} x2={xs[i + 1]} y2={laneY[s.who]} stroke="#1d2330" strokeWidth="3"
          strokeDasharray={s.dashedIn ? '2 9' : undefined} strokeLinecap="round"/>
      ))}
      {steps.map((s, i) => <LaneDot key={i} x={xs[i]} y={laneY[s.who]} s={s} i={i}/>)}
      {steps.map((s, i) => s.t.map((line, j) => (
        <text key={i + '-' + j} x={xs[i]} y={150 + j * 24} textAnchor="middle" fontSize="17" fill="#1d2330">{line}</text>
      )))}
    </svg>
  );
};

/* 縦向き（スマホ）：上にレーン名、下へ手順が進み、右に説明 */
const LaneTall = ({ steps }) => {
  const laneX = { '人':40, 'AI':112 };
  const rowH = 66;
  const ys = steps.map((_, i) => 64 + i * rowH);
  const h = ys[ys.length - 1] + 40;
  return (
    <svg viewBox={`0 0 340 ${h}`} width="100%" role="img" aria-label={steps.map(s => s.t.join('')).join('、')} style={{display:'block', fontFamily:'var(--font-sans, sans-serif)'}}>
      <rect x="4" y="4" width="72" height={h - 8} fill={LANE_COLOR['人'].lane}/>
      <rect x="76" y="4" width="72" height={h - 8} fill={LANE_COLOR['AI'].lane}/>
      <text x="40" y="30" textAnchor="middle" fontSize="15" fontWeight="700" fill={LANE_COLOR['人'].dot}>人</text>
      <text x="112" y="30" textAnchor="middle" fontSize="15" fontWeight="700" fill={LANE_COLOR['AI'].dot}>AI</text>
      {steps.slice(1).map((s, i) => (
        <line key={i} x1={laneX[steps[i].who]} y1={ys[i]} x2={laneX[s.who]} y2={ys[i + 1]} stroke="#1d2330" strokeWidth="3"
          strokeDasharray={s.dashedIn ? '2 9' : undefined} strokeLinecap="round"/>
      ))}
      {steps.map((s, i) => <LaneDot key={i} x={laneX[s.who]} y={ys[i]} s={s} i={i}/>)}
      {steps.map((s, i) => s.t.map((line, j) => (
        <text key={i + '-' + j} x="164" y={ys[i] + 6 + (j - (s.t.length - 1) / 2) * 20} fontSize="15" fill="#1d2330">{line}</text>
      )))}
    </svg>
  );
};

const AiLaneChart = ({ title, steps }) => {
  const narrow = useNarrow(720);
  return (
    <div style={{marginBottom:24}}>
      <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:17, color:'var(--ink-900)', margin:'0 0 10px'}}>{title}</h3>
      {narrow ? <LaneTall steps={steps}/> : <LaneWide steps={steps}/>}
    </div>
  );
};

const AiLaneCompare = () => (
  <div style={{maxWidth:920}}>
    <AiLaneChart title="チャット" steps={AI_LANE_CHAT}/>
    <AiLaneChart title="AIエージェント" steps={AI_LANE_AGENT}/>
  </div>
);

Object.assign(window, { AiLaneChart, AiLaneCompare, AI_LANE_CHAT, AI_LANE_AGENT });