// mobile-curriculum.jsx — 画面3: スマホ・カリキュラム入力（講師用、375px）

// Wraps inner content; tab bar overlays absolutely so it stays pinned above home indicator
function MobileShell({ children, active='students' }) {
  return (
    <>
      <div style={{ height: 54 }} /> {/* status bar clearance */}
      <div style={{ paddingBottom: 78 }}>{children}</div>
    </>
  );
}

function MobileCurriculumScreen() {
  const [view, setView] = React.useState('detail'); // list | detail
  const [tasks, setTasks] = React.useState({
    a: true,  // フレンチ完成
    b: true,  // ワンカラー塗布
    c: false, // カウンセリング実技
    d: false, // ファイリング
  });
  const toggle = (k) => setTasks(t => ({...t, [k]: !t[k]}));

  const TaskRow = ({ id, label, sub, done }) => (
    <button onClick={() => toggle(id)} className="w-full flex items-start gap-3 text-left py-3 px-1">
      <div className={`chk ${done ? 'on' : ''} mt-0.5`}>
        {done && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3"><path d="m5 12 5 5L20 7"/></svg>}
      </div>
      <div className="flex-1">
        <div className={`text-[14px] font-medium ${done ? 'text-ink' : 'text-ink2'}`}>{label}</div>
        {sub && <div className="text-[11px] text-mute mt-0.5">{sub}</div>}
      </div>
      {done && <div className="text-[10.5px] text-okgreen font-medium pt-1">✓ 完了</div>}
    </button>
  );

  const StudentListView = () => (
    <div className="bg-cream">
      <div className="sticky top-0 bg-cream/95 backdrop-blur-md px-4 py-3 hairline-b z-10">
        <div className="text-[10.5px] text-mute tracking-wide mb-0.5">梅田福島校</div>
        <div className="flex items-baseline gap-2">
          <h2 className="text-[18px] font-semibold">在籍中の生徒</h2>
          <span className="num text-[13px] text-mute">24名</span>
        </div>
        <div className="relative mt-3">
          <svg className="absolute left-3 top-2.5" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9B8E85" strokeWidth="1.8"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
          <input placeholder="生徒名・LINE名で検索" className="w-full text-[13px] pl-9 pr-3 py-2 rounded-lg bg-white border border-line outline-none placeholder:text-mute" />
        </div>
        <div className="flex gap-1.5 mt-3 overflow-x-auto nice-scroll">
          {['今日','在籍中','要記録 3','卒業見込','離脱注意'].map((f,i) => (
            <button key={i} className={`text-[11px] px-2.5 py-1 rounded-full whitespace-nowrap ${i===1 ? 'bg-ink text-cream' : 'bg-white text-ink2 border border-line'}`}>{f}</button>
          ))}
        </div>
      </div>
      <div className="bg-white divide-y divide-line2">
        {STUDENTS.filter(s => s.school === 'umeda' && s.status === 'enrolled').slice(0, 9).map(s => {
          const isToday = ['s002','s004','s008','s015','s019','s021'].includes(s.id);
          const needRec = s.id === 's012';
          return (
            <button key={s.id} onClick={() => setView('detail')} className="w-full flex items-center gap-3 px-4 py-3 hover:bg-cream2/40 text-left">
              <Avatar name={s.name} school={s.school} size={42}/>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <span className="text-[14px] font-medium truncate">{s.name}</span>
                  {needRec && <span className="bdg bg-alertbg text-alert text-[10px]">未記録</span>}
                  {isToday && <span className="bdg bg-okbg text-okgreen text-[10px]">本日</span>}
                </div>
                <div className="text-[11px] text-mute mt-0.5">
                  {COURSES.find(c=>c.id===s.course)?.name} · <span className="num">第{s.lesson}回</span> · 最終 {s.last}
                </div>
              </div>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9B8E85" strokeWidth="2"><path d="m9 5 7 7-7 7"/></svg>
            </button>
          );
        })}
      </div>
    </div>
  );

  const DetailView = () => (
    <div className="bg-cream">
      {/* Header with back */}
      <div className="sticky top-0 bg-cream/95 backdrop-blur-md px-4 py-2.5 hairline-b z-10 flex items-center gap-2">
        <button onClick={() => setView('list')} className="w-8 h-8 -ml-1.5 flex items-center justify-center text-ink">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="m15 5-7 7 7 7"/></svg>
        </button>
        <span className="text-[13px] font-medium text-ink2">生徒一覧</span>
        <div className="ml-auto flex items-center gap-1">
          <button className="w-8 h-8 rounded-md hover:bg-cream2 flex items-center justify-center">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3D2B2B" strokeWidth="1.8"><path d="M21 12a8 8 0 1 1-3.6-6.7L21 4l-1 4.2A8 8 0 0 1 21 12z"/></svg>
          </button>
          <button className="w-8 h-8 rounded-md hover:bg-cream2 flex items-center justify-center">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="#3D2B2B"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
          </button>
        </div>
      </div>

      {/* Student summary */}
      <div className="bg-white px-4 py-4 hairline-b">
        <div className="flex items-center gap-3">
          <Avatar name="鈴木 ユイ" school="umeda" size={56}/>
          <div className="flex-1 min-w-0">
            <div className="text-[17px] font-semibold">鈴木 ユイ</div>
            <div className="text-[11.5px] text-mute">スズキ ユイ · @yui.s</div>
            <div className="flex items-center gap-1.5 mt-1">
              <StatusBadge s="enrolled"/>
              <span className="bdg bg-cream2 text-ink2 text-[10px]">アドバンス</span>
            </div>
          </div>
        </div>
        <div className="grid grid-cols-3 gap-2 mt-4 -mx-1">
          {[
            { l:'第', v:'12', s:'回目' },
            { l:'累計', v:'14h', s:'実技' },
            { l:'進捗', v:'68', s:'%' },
          ].map((b,i) => (
            <div key={i} className="px-3 py-2.5 rounded-lg bg-cream2/40 text-center">
              <div className="text-[10.5px] text-mute">{b.l}</div>
              <div className="num text-[20px] font-semibold text-ink leading-tight">{b.v}<span className="text-[11px] text-mute font-medium ml-0.5">{b.s}</span></div>
            </div>
          ))}
        </div>
      </div>

      {/* Today lesson record */}
      <div className="bg-white mt-2 hairline-b hairline-t">
        <div className="px-4 pt-4 pb-1 flex items-baseline justify-between">
          <h3 className="text-[14px] font-semibold">今日のレッスン記録</h3>
          <span className="num text-[11px] text-mute">2026/05/14</span>
        </div>

        <div className="px-4 py-2">
          <div className="text-[11px] text-mute font-medium tracking-wide mb-2 mt-2">課題チェック</div>
          <div className="divide-y divide-line2">
            <TaskRow id="a" done={tasks.a} label="フレンチ完成" sub="ライン揃え・厚みむら確認" />
            <TaskRow id="b" done={tasks.b} label="ワンカラー塗布" sub="ベース・カラー・トップ 3層" />
            <TaskRow id="c" done={tasks.c} label="カウンセリング実技" sub="想定モデル：30代女性" />
            <TaskRow id="d" done={tasks.d} label="ファイリング" sub="スクエア / ラウンド形成" />
          </div>
        </div>

        {/* Skill slider */}
        <div className="px-4 py-3 hairline-t">
          <div className="flex items-center justify-between mb-2">
            <span className="text-[12.5px] font-medium">習得度</span>
            <span className="num text-[12.5px] font-semibold text-gold2">★★★★☆ 4 / 5</span>
          </div>
          <div className="relative h-2 rounded-full bg-cream2">
            <div className="absolute left-0 top-0 bottom-0 rounded-full bg-gold" style={{ width:'78%' }}/>
            <div className="absolute top-1/2 -translate-y-1/2 w-5 h-5 rounded-full bg-white border-2 border-gold shadow" style={{ left: 'calc(78% - 10px)' }}/>
          </div>
          <div className="flex justify-between mt-1.5 text-[9.5px] text-mute"><span>初心</span><span>習得</span></div>
        </div>

        {/* Comment + photo */}
        <div className="px-4 py-3 hairline-t">
          <div className="text-[12.5px] font-medium mb-2">講師コメント</div>
          <textarea
            rows="3"
            defaultValue="フレンチのラインがかなり安定。次回はグラデーション応用へ。爪先のファイリングはまだ若干甘め。"
            className="w-full text-[12.5px] py-2 px-3 rounded-lg bg-cream2/40 border border-line outline-none focus:border-gold focus:bg-white resize-none"
          />
          <div className="mt-3 grid grid-cols-3 gap-2">
            <div className="aspect-square rounded-lg bg-cream2 flex items-center justify-center relative overflow-hidden">
              <div className="absolute inset-0" style={{ background: 'linear-gradient(135deg,#F4DCD0 0%,#EBC2B0 50%,#D9A48F 100%)' }}/>
              <span className="relative text-[9px] text-ink/60 font-medium">施術前</span>
            </div>
            <div className="aspect-square rounded-lg bg-cream2 flex items-center justify-center relative overflow-hidden">
              <div className="absolute inset-0" style={{ background: 'linear-gradient(135deg,#EBC2B0 0%,#D9A48F 50%,#C5876C 100%)' }}/>
              <span className="relative text-[9px] text-ink/60 font-medium">施術中</span>
            </div>
            <button className="aspect-square rounded-lg border-2 border-dashed border-gold/50 flex flex-col items-center justify-center text-gold2 hover:bg-cream2/60">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="6" width="18" height="14" rx="2"/><circle cx="12" cy="13" r="3.5"/><path d="M8 6V4h8v2"/></svg>
              <span className="text-[10px] mt-0.5">写真追加</span>
            </button>
          </div>
        </div>
      </div>

      {/* CTA — big pink button */}
      <div className="px-4 pt-4 pb-6 bg-cream">
        <button className="w-full py-3.5 rounded-xl bg-gold hover:bg-gold2 text-white text-[15px] font-semibold shadow-md flex items-center justify-center gap-2">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.4"><path d="m5 12 5 5L20 7"/></svg>
          記録を送信
        </button>
        <div className="text-center text-[10.5px] text-mute mt-2">送信内容は LINE 経由で生徒に共有されます</div>
      </div>
    </div>
  );

  return view === 'list' ? <StudentListView /> : <DetailView />;
}

// ── Bottom tab bar (mobile) ─────────────────────────────────────
function MobileTabBar({ active='students' }) {
  const tabs = [
    { id:'home',     label:'ホーム',   icon:(s)=> <svg width="20" height="20" viewBox="0 0 24 24" {...s}><path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/></svg> },
    { id:'sched',    label:'予約',     icon:(s)=> <svg width="20" height="20" viewBox="0 0 24 24" {...s}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg> },
    { id:'students', label:'生徒',     icon:(s)=> <svg width="20" height="20" viewBox="0 0 24 24" {...s}><circle cx="9" cy="8" r="3.2"/><circle cx="17" cy="9" r="2.5"/><path d="M3 20c.6-3.4 3-5.5 6-5.5s5.4 2.1 6 5.5"/></svg> },
    { id:'msg',      label:'メッセージ', icon:(s)=> <svg width="20" height="20" viewBox="0 0 24 24" {...s}><path d="M21 12a8 8 0 1 1-3.6-6.7L21 4l-1 4.2A8 8 0 0 1 21 12z"/></svg>, badge:3 },
    { id:'me',       label:'マイ',     icon:(s)=> <svg width="20" height="20" viewBox="0 0 24 24" {...s}><circle cx="12" cy="9" r="3.5"/><path d="M5 20c1-3.5 4-5 7-5s6 1.5 7 5"/></svg> },
  ];
  const stroke = { fill:'none', stroke:'currentColor', strokeWidth:1.6, strokeLinecap:'round', strokeLinejoin:'round' };
  return (
    <div className="bg-white hairline-t flex items-stretch px-1 pt-1 pb-1">
      {tabs.map(t => (
        <button key={t.id} className={`relative flex-1 flex flex-col items-center justify-center py-1 ${active===t.id?'text-ink':'text-mute'}`}>
          {t.icon(stroke)}
          <span className="text-[10px] mt-0.5 font-medium">{t.label}</span>
          {t.badge && <span className="absolute top-0.5 right-[26%] w-4 h-4 rounded-full bg-alert text-white num text-[9px] font-semibold flex items-center justify-center">{t.badge}</span>}
        </button>
      ))}
    </div>
  );
}

// ── Full mobile screen view wrapping IOSDevice ──────────────────
function MobileScreen() {
  return (
    <div className="px-7 py-6 nice-scroll overflow-y-auto device-shadow" style={{ height: 'calc(100vh - 56px)' }}>
      <div className="flex items-end justify-between mb-5">
        <div>
          <div className="text-[11px] text-mute mb-1 tracking-wide">画面3 — モバイル前提</div>
          <h1 className="text-[22px] font-semibold text-ink">スマホ・カリキュラム入力</h1>
          <p className="text-[12.5px] text-ink2 mt-1">講師が空き時間に親指1本で記録 — <span className="font-medium text-ink">PC不要</span>・<span className="num font-semibold text-ink">入力1分以内</span> が運用要件。</p>
        </div>
      </div>

      <div className="grid grid-cols-12 gap-6 items-start">
        {/* iPhone frame */}
        <div className="col-span-7 flex justify-center pt-3">
          <div style={{ position:'relative' }}>
            <IOSDevice>
              <MobileShell active="students">
                <MobileCurriculumScreen />
              </MobileShell>
            </IOSDevice>
            {/* Tab bar pinned to device bottom, above home indicator */}
            <div style={{ position:'absolute', left:0, right:0, bottom:34, zIndex:55, borderRadius:'0 0 48px 48px', overflow:'hidden' }}>
              <MobileTabBar active="students" />
            </div>
          </div>
        </div>

        {/* Notes column */}
        <div className="col-span-5 flex flex-col gap-3 pt-3">
          <div className="card overflow-hidden">
            <div className="px-4 py-2.5 hairline-b flex items-center gap-2">
              <span className="w-1 h-4 rounded-full bg-gold"/>
              <h3 className="text-[13px] font-semibold">設計のポイント</h3>
            </div>
            <ul className="px-5 py-3 text-[12px] text-ink2 leading-relaxed list-none space-y-2.5">
              {[
                ['親指1本完結','下部タブ + 大きめチェックボックス + ローズゴールド系の太いCTA。'],
                ['サロンボード踏襲','起動直後に「在籍中の生徒一覧」、左上に戻るボタン、検索バー上部固定。'],
                ['写真添付前提','施術前 / 施術中 / 完成 の3枠を標準。タップで拡大、L-Stepへ自動連携。'],
                ['ネット弱環境','送信失敗時は端末ローカルに自動キャッシュ → 復帰時に再送。'],
              ].map(([t, d], i) => (
                <li key={i} className="flex gap-2">
                  <span className="num text-[10.5px] font-semibold text-gold2 mt-0.5 w-4 shrink-0">0{i+1}</span>
                  <span><b className="text-ink">{t}</b> — {d}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="card overflow-hidden">
            <div className="px-4 py-2.5 hairline-b flex items-center gap-2">
              <span className="w-1 h-4 rounded-full bg-gold"/>
              <h3 className="text-[13px] font-semibold">運用シナリオ</h3>
            </div>
            <div className="px-5 py-3.5 text-[12px] text-ink2 leading-relaxed">
              <div className="flex items-center gap-2 mb-2">
                <span className="num text-[10.5px] font-semibold px-2 py-0.5 rounded bg-cream2 text-gold2">CASE</span>
                <span className="font-semibold text-ink">講師 — レッスン直後 60秒</span>
              </div>
              レッスン終了 → 端末からアプリ起動 → 該当生徒タップ → 課題4つチェック → 習得度スライダー →
              写真2枚撮影 → 送信。<b className="text-ink">PCもログインも一切なし</b>。
              年間延べ <span className="num font-semibold text-ink">3,000 件</span> の記録が漏れなく蓄積。
            </div>
          </div>

          <div className="card overflow-hidden">
            <div className="px-4 py-2.5 hairline-b flex items-center gap-2">
              <span className="w-1 h-4 rounded-full bg-gold"/>
              <h3 className="text-[13px] font-semibold">画面遷移</h3>
            </div>
            <div className="px-4 py-3 flex items-center gap-2 text-[11.5px]">
              {['生徒一覧','生徒詳細','課題チェック','コメント','送信完了'].map((s,i,arr) => (
                <React.Fragment key={i}>
                  <span className={`px-2 py-1 rounded-md ${i===1||i===2||i===3 ? 'bg-cream2 text-ink' : 'bg-cream2/40 text-mute'}`}>{s}</span>
                  {i < arr.length-1 && <span className="text-mute">›</span>}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.MobileScreen = MobileScreen;