// student-card.jsx — 画面2: 生徒カルテ詳細（佐藤 ハナ）

function StudentCard() {
  const student = STUDENTS.find(s => s.id === 's001'); // 佐藤 ハナ
  const [tab, setTab] = React.useState('timeline');

  // Timeline event icon
  const kindIcon = (k) => {
    const s = { stroke:'currentColor', fill:'none', strokeWidth:1.6, strokeLinecap:'round', strokeLinejoin:'round' };
    switch (k) {
      case 'lstep':    return <svg width="14" height="14" 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>;
      case 'visit':    return <svg width="14" height="14" viewBox="0 0 24 24" {...s}><path d="M12 22s7-7 7-13a7 7 0 0 0-14 0c0 6 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>;
      case 'briefing': return <svg width="14" height="14" viewBox="0 0 24 24" {...s}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg>;
      case 'applied':  return <svg width="14" height="14" viewBox="0 0 24 24" {...s}><path d="M5 4h11l4 4v12a1 1 0 0 1-1 1H5z"/><path d="M16 4v5h5M9 13h6M9 17h6"/></svg>;
      case 'alert':    return <svg width="14" height="14" viewBox="0 0 24 24" {...s}><path d="M12 3 1 21h22z"/><path d="M12 10v5M12 18v.5"/></svg>;
      default: return null;
    }
  };

  return (
    <div className="px-7 py-6 nice-scroll overflow-y-auto" style={{ height: 'calc(100vh - 56px)' }}>
      {/* Header strip — Salonboard カルテ作法 */}
      <div className="card-lg mb-4 overflow-hidden">
        <div className="px-6 py-5 flex items-start gap-5">
          <div className="relative">
            <Avatar name={student.name} school={student.school} size={64} />
            <div className="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-okgreen flex items-center justify-center" title="在籍中">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5"><path d="m5 12 5 5L20 7"/></svg>
            </div>
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-3 flex-wrap">
              <h1 className="text-[22px] font-semibold text-ink whitespace-nowrap">{student.name}</h1>
              <span className="text-[12px] text-mute">{student.kana}</span>
              <StatusBadge s="paywait" />
              <span className="bdg" style={{ background:'#F6ECE2', color:'#6E4F37' }}>ベーシック ¥285,000</span>
              <span className="bdg" style={{ background:'#ECEFF5', color:'#4F5A77' }}>梅田福島校</span>
            </div>
            <div className="mt-2 grid grid-cols-4 gap-x-6 gap-y-1.5 text-[11.5px]">
              <div><span className="text-mute mr-1.5">学籍ID</span><span className="num font-medium">EH-2026-0438</span></div>
              <div><span className="text-mute mr-1.5">TEL</span><span className="num font-medium">{student.tel}</span></div>
              <div><span className="text-mute mr-1.5">LINE</span><span className="num font-medium">@{student.line}</span></div>
              <div><span className="text-mute mr-1.5">流入</span><span className="font-medium">Instagram広告</span></div>
              <div><span className="text-mute mr-1.5">担当</span><span className="font-medium">{student.staff}</span></div>
              <div><span className="text-mute mr-1.5">初回接触</span><span className="num font-medium">2026/04/15</span></div>
              <div><span className="text-mute mr-1.5">最終接触</span><span className="num font-medium text-alert">3日前</span></div>
              <div><span className="text-mute mr-1.5">経過日数</span><span className="num font-medium">29日</span></div>
            </div>
          </div>
          <div className="flex flex-col gap-2 shrink-0">
            <button className="px-3 py-1.5 rounded-md bg-ink text-cream text-[12px] font-medium hover:bg-ink2 flex items-center gap-1.5">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
              LINEを送る
            </button>
            <button className="px-3 py-1.5 rounded-md border border-line text-ink2 text-[12px] hover:bg-cream2">電話発信</button>
            <button className="px-3 py-1.5 rounded-md border border-line text-ink2 text-[12px] hover:bg-cream2">編集</button>
          </div>
        </div>
        {/* Flow progress strip */}
        <div className="px-6 pb-5 pt-1">
          <div className="text-[10.5px] text-mute mb-2 tracking-wide uppercase">フロー進捗</div>
          <div className="flex items-center gap-0">
            {[
              { l:'LINE登録', done:true, date:'04/15' },
              { l:'見学会',    done:true, date:'04/22' },
              { l:'説明会',    done:true, date:'05/02' },
              { l:'申込書',    done:true, date:'05/05' },
              { l:'入金',      done:false, date:'⚠ 5日経過', alert:true },
              { l:'入学',      done:false, date:'—' },
              { l:'卒業',      done:false, date:'—' },
            ].map((step, i, arr) => (
              <React.Fragment key={i}>
                <div className="flex-1 flex flex-col items-center">
                  <div className={`w-7 h-7 rounded-full flex items-center justify-center text-[11px] font-semibold ${
                    step.alert ? 'bg-alert text-white' :
                    step.done ? 'bg-gold text-white' :
                    'bg-cream2 text-mute border border-line'
                  }`}>
                    {step.done ? '✓' : step.alert ? '!' : i+1}
                  </div>
                  <div className={`text-[10.5px] mt-1 font-medium whitespace-nowrap ${step.alert ? 'text-alert' : step.done ? 'text-ink' : 'text-mute'}`}>{step.l}</div>
                  <div className={`num text-[9.5px] whitespace-nowrap ${step.alert ? 'text-alert' : 'text-mute'}`}>{step.date}</div>
                </div>
                {i < arr.length-1 && (
                  <div className="h-px flex-1 -mt-8" style={{
                    background: arr[i+1].done ? '#C9A98C' : arr[i+1].alert ? '#D64545' : '#E8DFD8',
                    minWidth: 30, maxWidth: 60,
                  }}/>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className="flex items-center gap-1 mb-3 border-b border-line">
        {[
          { id:'timeline',   label:'タイムライン', count:7 },
          { id:'curriculum', label:'カリキュラム', count:0 },
          { id:'photos',     label:'写真',         count:3 },
          { id:'memo',       label:'メモ',         count:2 },
          { id:'files',      label:'添付ファイル', count:1 },
        ].map(t => (
          <button key={t.id} onClick={()=>setTab(t.id)}
            className={`relative px-4 py-2.5 text-[12.5px] font-medium ${tab===t.id ? 'text-ink' : 'text-mute hover:text-ink2'}`}>
            {t.label} {t.count > 0 && <span className="num text-[10.5px] ml-0.5 text-mute">{t.count}</span>}
            {tab===t.id && <span className="absolute left-0 right-0 bottom-[-1px] h-0.5 bg-gold rounded-full"/>}
          </button>
        ))}
      </div>

      <div className="grid grid-cols-12 gap-3">
        {/* Timeline */}
        <div className="col-span-8 card overflow-hidden">
          <div className="px-5 py-3 hairline-b flex items-center justify-between">
            <div className="flex items-center gap-2">
              <span className="w-1 h-4 rounded-full bg-gold" />
              <h3 className="text-[13px] font-semibold">タイムライン</h3>
              <span className="text-[11px] text-mute">L-Step 自動取り込み含む</span>
            </div>
            <button className="text-[11.5px] px-2.5 py-1 rounded-md border border-line hover:bg-cream2 flex items-center gap-1">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14"/></svg>
              イベント追加
            </button>
          </div>
          <div className="px-6 py-5">
            <div className="relative">
              <div className="absolute left-[58px] top-2 bottom-2 w-px bg-line"/>
              <div className="flex flex-col gap-5">
                {TIMELINE_HANA.map((e, i) => (
                  <div key={i} className="relative flex items-start gap-4">
                    <div className="num text-[11px] text-mute w-12 pt-0.5 text-right shrink-0">{e.date}</div>
                    <div className="relative shrink-0 z-10" style={{ marginLeft: -2 }}>
                      <div className={`tl-dot ${e.alert ? 'alert' : e.done ? 'done' : ''}`} />
                    </div>
                    <div className={`flex-1 -mt-0.5 rounded-lg px-4 py-3 ${e.alert ? 'bg-alertbg/60' : 'bg-cream2/30 hover:bg-cream2/50'}`}>
                      <div className="flex items-center gap-2">
                        <span className={`shrink-0 ${e.alert ? 'text-alert' : 'text-gold2'}`}>{kindIcon(e.kind)}</span>
                        <span className={`text-[13px] font-semibold ${e.alert ? 'text-alert' : 'text-ink'}`}>{e.title}</span>
                        <span className="ml-auto text-[10.5px] text-mute">担当: {e.staff}</span>
                      </div>
                      <div className="text-[11.5px] text-ink2 mt-1 leading-relaxed">{e.detail}</div>
                      {e.alert && (
                        <div className="mt-2.5 flex items-center gap-2">
                          <button className="text-[11px] px-2.5 py-1 rounded-md bg-alert text-white">⚡ 今すぐ TEL</button>
                          <button className="text-[11px] px-2.5 py-1 rounded-md border border-alert/40 text-alert hover:bg-alertbg">LINE催促</button>
                          <button className="text-[11px] px-2.5 py-1 rounded-md border border-line text-ink2 hover:bg-cream2">期限延長</button>
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className="mx-5 mb-4 mt-1 p-4 rounded-xl" style={{ background:'linear-gradient(135deg,#FCF2F4,#F5DDE3)', border:'1px solid #EBC0CB' }}>
            <div className="flex items-center gap-2 mb-1.5">
              <div className="w-6 h-6 rounded-full bg-rose flex items-center justify-center">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="#fff"><path d="M12 2 14 9l7 1-5 4 2 8-6-4-6 4 2-8-5-4 7-1z"/></svg>
              </div>
              <span className="text-[12.5px] font-semibold text-ink">{AI_HINT.title}</span>
              <span className="bdg ml-1" style={{ background:'#fff', color:'#8E4C66', border:'1px solid #EBC0CB' }}>AI示唆</span>
            </div>
            <div className="text-[11.5px] text-ink2 leading-relaxed pl-8">{AI_HINT.body}</div>
          </div>

        </div>

        {/* Sidebar — memo + attachments + history */}
        <div className="col-span-4 flex flex-col gap-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>
              <span className="text-[10.5px] text-mute ml-auto">2件</span>
            </div>
            <div className="divide-y divide-line2">
              <div className="px-4 py-3">
                <div className="flex items-center gap-2 mb-1">
                  <Avatar name="デモ申込担当 さん" school="umeda" size={22} />
                  <span className="text-[11.5px] font-medium">デモ申込担当</span>
                  <span className="text-[10.5px] text-mute ml-auto">05/05 16:20</span>
                </div>
                <div className="text-[11.5px] text-ink2 leading-relaxed">分割払いを希望されていたが、家族と相談して一括振込に変更。振込予定は5/10前後とのこと。</div>
              </div>
              <div className="px-4 py-3">
                <div className="flex items-center gap-2 mb-1">
                  <Avatar name="デモ副社長 さん" school="umeda" size={22} />
                  <span className="text-[11.5px] font-medium">デモ副社長</span>
                  <span className="text-[10.5px] text-mute ml-auto">04/22 17:45</span>
                </div>
                <div className="text-[11.5px] text-ink2 leading-relaxed">見学会の対応、丁寧で印象◎。卒業後シェアサロン制度に強い関心あり。</div>
              </div>
            </div>
            <div className="px-3 py-2.5 hairline-t bg-cream2/30">
              <input placeholder="メモを追加…（@で担当者に通知）" className="w-full text-[11.5px] py-1.5 px-2 rounded-md bg-white border border-line outline-none focus:border-gold placeholder:text-mute" />
            </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>
              <span className="text-[10.5px] text-mute ml-auto">1件</span>
            </div>
            <div className="px-4 py-3">
              <div className="flex items-center gap-2.5 p-2.5 rounded-md bg-cream2/40 hover:bg-cream2/70">
                <div className="w-9 h-11 rounded-sm bg-white border border-line flex items-center justify-center">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#D64545" strokeWidth="1.6"><path d="M5 4h11l4 4v12a1 1 0 0 1-1 1H5z"/><path d="M16 4v5h5"/></svg>
                </div>
                <div className="flex-1 min-w-0">
                  <div className="text-[12px] font-medium truncate">申込書_佐藤ハナ.pdf</div>
                  <div className="text-[10.5px] text-mute">312KB · 05/05 受領</div>
                </div>
                <button className="text-[11px] text-gold2 hover:text-ink">DL</button>
              </div>
            </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 flex-col gap-2">
              {[
                { date:'05/05', s:'applied' },
                { date:'05/02', s:'brief_done' },
                { date:'04/25', s:'briefing' },
                { date:'04/22', s:'visit' },
              ].map((h,i) => (
                <div key={i} className="flex items-center gap-2 text-[11px]">
                  <span className="num text-mute w-10">{h.date}</span>
                  <StatusBadge s={h.s}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.StudentCard = StudentCard;