/* ════════════════════════════════════════════════════════════
   Onboarding — first-run 3-step ritual.
   Shows once, dismissible, stored in localStorage.
   Frames the app as an editorial desk that works for you.
   ════════════════════════════════════════════════════════════ */

const { useState: ob_s, useEffect: ob_e } = React;

function Onboarding() {
  const lang = window.__LANG || 'zh';
  const [open, setOpen] = ob_s(() => {
    try {
      return localStorage.getItem('onboarded.v1') !== '1'
          && localStorage.getItem('onboarded.skip') !== '1';
    } catch (e) { return true; }
  });
  const [step, setStep] = ob_s(0);

  if (!open) return null;

  const finish = () => {
    try { localStorage.setItem('onboarded.v1', '1'); } catch (e) {}
    setOpen(false);
    window.toast?.({ msg: lang==='zh'?'欢迎入席 · 第一份简报已就绪':"Welcome aboard · today's briefing is ready", kind: 'success' });
    window.haptic?.success();
  };

  const skip = () => {
    try { localStorage.setItem('onboarded.skip', '1'); } catch (e) {}
    setOpen(false);
  };

  const steps = lang === 'zh' ? [
    {
      eb: '§I · 编辑部',
      title: '不是一个 AI · 是三位分析师',
      body: '每一只票由「技术指标 + AI 模型 + 外部专家」三源独立评分,再融合。三源分歧时我们会告诉你 — 不藏。',
      art: <ThreeDot/>,
    },
    {
      eb: '§II · 履约',
      title: '签下承诺书,而不是点击按钮',
      body: '决定买入前,你会在卷宗上手写签名。每条承诺都进档,跌破止损时第三条款会自动召回你。',
      art: <SigPaper/>,
    },
    {
      eb: '§III · 核对',
      title: '明天此刻 · 我们会复盘昨天',
      body: '首页顶部的「核对桌」会列出昨日全部推荐的实际收盘 — 胜率、最佳、最差。算法说谎,你立刻看见。',
      art: <Ledger/>,
    },
  ] : [
    {
      eb: '§I · The Desk',
      title: 'Not one AI · Three analysts.',
      body: 'Every pick is scored independently by technicals, an AI model, and external experts — then fused. When they disagree we show it. No hiding.',
      art: <ThreeDot/>,
    },
    {
      eb: '§II · Acknowledge',
      title: 'Sign for it. Not just click.',
      body: 'Before you buy, you hand-sign a clause-by-clause acknowledgement. Every contract is filed. If your stop trips, §III pulls you back.',
      art: <SigPaper/>,
    },
    {
      eb: '§III · The receipts',
      title: 'Tomorrow we publish yesterday.',
      body: "Your dashboard opens with a Verification Desk: every pick we made yesterday, settled at close. Best, worst, hit-rate. If we're wrong, you'll know first.",
      art: <Ledger/>,
    },
  ];

  const s = steps[step];
  const last = step === steps.length - 1;

  return (
    <div className="ob-bg">
      <div className="ob-paper">
        <div className="ob-mast">
          <span className="ob-fileno">FELIX · CHARTER · {new Date().getFullYear()}</span>
          <button className="ob-skip" onClick={skip}>{lang==='zh'?'跳过':'Skip'}</button>
        </div>

        <div className="ob-art">{s.art}</div>

        <div className="ob-eb">{s.eb}</div>
        <h2 className="ob-title">{s.title}</h2>
        <p className="ob-body">{s.body}</p>

        <div className="ob-dots">
          {steps.map((_, i) => (
            <span key={i} className={'ob-dot' + (i === step ? ' on' : '') + (i < step ? ' done' : '')}/>
          ))}
        </div>

        <div className="ob-foot">
          <button className="ob-btn ghost" onClick={() => step > 0 ? setStep(step-1) : skip()}>
            {step === 0 ? (lang==='zh'?'稍后':'Later') : (lang==='zh'?'返回':'Back')}
          </button>
          <button className="ob-btn primary" onClick={() => last ? finish() : setStep(step+1)}>
            {last ? (lang==='zh'?'入席 · ACKNOWLEDGE':'Take a seat · ACKNOWLEDGE') : (lang==='zh'?'继续':'Continue')}
          </button>
        </div>
      </div>
    </div>
  );
}

function ThreeDot() {
  return (
    <svg viewBox="0 0 200 120" width="100%" height="100%">
      <g fontFamily="ui-monospace, Menlo, monospace" fontSize="9" letterSpacing="0.16em">
        <circle cx="50"  cy="60" r="22" fill="none" stroke="var(--src-tech, #5b9bff)" strokeWidth="1.4"/>
        <text x="50" y="64" textAnchor="middle" fill="var(--src-tech, #5b9bff)">TECH</text>
        <circle cx="100" cy="60" r="22" fill="none" stroke="var(--src-ai, #ffb454)" strokeWidth="1.4"/>
        <text x="100" y="64" textAnchor="middle" fill="var(--src-ai, #ffb454)">AI</text>
        <circle cx="150" cy="60" r="22" fill="none" stroke="var(--src-pro, #34c759)" strokeWidth="1.4"/>
        <text x="150" y="64" textAnchor="middle" fill="var(--src-pro, #34c759)">EXP</text>
        <circle cx="100" cy="60" r="34" fill="none" stroke="var(--text-1)" strokeWidth="0.5" strokeDasharray="2 3" opacity="0.5"/>
      </g>
    </svg>
  );
}

function SigPaper() {
  return (
    <svg viewBox="0 0 200 120" width="100%" height="100%">
      <rect x="48" y="14" width="104" height="92" fill="var(--bg-2)" stroke="var(--border)" strokeWidth="0.5"/>
      <line x1="60" y1="32" x2="140" y2="32" stroke="var(--text-3)" strokeWidth="0.5"/>
      <line x1="60" y1="42" x2="140" y2="42" stroke="var(--text-3)" strokeWidth="0.5"/>
      <line x1="60" y1="52" x2="120" y2="52" stroke="var(--text-3)" strokeWidth="0.5"/>
      <path d="M62 80 q 8 -14, 20 -6 t 24 -2 q 8 4, 16 -4" fill="none" stroke="var(--text-1)" strokeWidth="1.6" strokeLinecap="round"/>
      <text x="105" y="100" fontFamily="Georgia,serif" fontSize="20" fontWeight="900"
            fill="var(--down-strong, #e0444a)" textAnchor="middle"
            transform="rotate(-10 105 95)" opacity="0.85">SIGNED</text>
    </svg>
  );
}

function Ledger() {
  return (
    <svg viewBox="0 0 200 120" width="100%" height="100%" fontFamily="ui-monospace, monospace" fontSize="9">
      <rect x="20" y="14" width="160" height="92" fill="var(--bg-2)" stroke="var(--border)" strokeWidth="0.5"/>
      <line x1="20" y1="28" x2="180" y2="28" stroke="var(--text-1)" strokeWidth="1"/>
      <text x="100" y="24" textAnchor="middle" fill="var(--text-1)" fontWeight="700" letterSpacing="0.2em">VERIFICATION DESK</text>
      {[0,1,2,3].map(i => (
        <g key={i} transform={'translate(28,' + (44 + i*14) + ')'}>
          <text x="0"   fill={i===2?'var(--down-strong)':'var(--up-strong)'}>{i===2?'–':'✓'}</text>
          <text x="14"  fill="var(--text-1)">{['AAPL','MSFT','NVDA','TSLA'][i]}</text>
          <text x="140" textAnchor="end" fill={i===2?'var(--down-strong)':'var(--up-strong)'}>{['+2.1%','+0.8%','−0.6%','+1.4%'][i]}</text>
        </g>
      ))}
    </svg>
  );
}

window.Onboarding = Onboarding;