// dashboard.jsx — 画面1: ダッシュボード「今日のアクション」

function Dashboard({ heroLayout='row' /* row | grid | stream */ }) {

  // ── Hero numbers (4 cards) ────────────────────────────────────
  const heroTiles = (
    <>
      <StatTile label="今日のアクション" value="12" suffix="件" tone="default"
        sub="うち 要対応 3 件" />
      <StatTile label="説明会予約（今週）" value="8" suffix="件" tone="default"
        delta="+2" sub="先週比" />
      <StatTile label="3日以上 未連絡" value="3" suffix="件" tone="alert"
        sub="取りこぼしリスク" />
      <StatTile label="今月の入学" value="16" suffix="名" tone="ok"
        delta="+3" sub="前月比" />
    </>
  );

  let heroBlock;
  if (heroLayout === 'grid') {
    heroBlock = <div className="grid grid-cols-2 gap-3">{heroTiles}</div>;
  } else if (heroLayout === 'stream') {
    heroBlock = <div className="card divide-y divide-line">
      {[
        { l:'今日のアクション', v:'12', s:'うち 要対応 3 件', t:'default' },
        { l:'説明会予約（今週）', v:'8', s:'+2 先週比', t:'default' },
        { l:'3日以上 未連絡', v:'3', s:'取りこぼしリスク', t:'alert' },
        { l:'今月の入学', v:'16', s:'+3 前月比', t:'ok' },
      ].map((r,i) => (
        <div key={i} className="flex items-center gap-3 px-4 py-3.5" style={{ borderLeft: `3px solid ${r.t==='alert'?'#D64545':r.t==='ok'?'#5C8F6E':'#C9A98C'}` }}>
          <span className="text-[11.5px] text-mute flex-1">{r.l}</span>
          <span className={`num text-[24px] font-semibold leading-none ${r.t==='alert'?'text-alert':r.t==='ok'?'text-okgreen':'text-ink'}`}>{r.v}</span>
          <span className="text-[11px] text-mute w-32 text-right">{r.s}</span>
        </div>
      ))}
    </div>;
  } else {
    heroBlock = <div className="grid grid-cols-4 gap-3">{heroTiles}</div>;
  }

  // ── Today's action list ───────────────────────────────────────
  const ActionRow = ({ a }) => {
    const isAlert = a.priority === 'alert';
    const isWarn  = a.priority === 'warn';
    const band = isAlert ? '#D64545' : isWarn ? '#C99A57' : '#C9A98C';
    return (
      <div className="flex items-stretch gap-3 px-4 py-3 hover:bg-cream2/40 transition-colors group">
        <div className="band" style={{ background: band }}/>
        <div className="num text-[13px] font-medium text-ink2 w-12 pt-0.5">{a.time}</div>
        <Avatar name={a.name} school="umeda" size={34} />
        <div className="flex-1 min-w-0">
          <div className="flex items-baseline gap-2">
            <span className="text-[13px] font-medium text-ink truncate">{a.name}</span>
            {isAlert && <span className="bdg bg-alertbg text-alert text-[10px]"><span className="w-1.5 h-1.5 rounded-full bg-alert pulse" />要対応</span>}
          </div>
          <div className="text-[11.5px] text-mute mt-0.5 flex items-center gap-2">
            <span>{a.step}</span><span>·</span><span>担当 {a.staff}</span>
          </div>
          <div className="text-[11px] text-ink2/80 mt-0.5">{a.note}</div>
        </div>
        <div className="flex items-center gap-1.5 opacity-70 group-hover:opacity-100 transition-opacity">
          <button className="text-[11px] px-2.5 py-1 rounded-md bg-okbg text-okgreen hover:bg-okgreen hover:text-white border border-okgreen/30 whitespace-nowrap">✓ 完了</button>
          <button className="text-[11px] px-2.5 py-1 rounded-md hover:bg-cream2 text-ink2 border border-line whitespace-nowrap">詳細 ›</button>
        </div>
      </div>
    );
  };

  // ── Heatmap ───────────────────────────────────────────────────
  const hmScale = (n) => {
    if (n === 0) return '#F6E9E4';
    if (n <= 2) return '#F5DDE3';
    if (n <= 4) return '#EBC0CB';
    if (n <= 6) return '#D89AAA';
    return '#B5728C';
  };
  const dayLabel = (i) => {
    const d = new Date(2026, 4, 14);
    d.setDate(d.getDate() - (29 - i));
    return `${d.getMonth()+1}/${d.getDate()}`;
  };

  // ── Today's schedule strip (added per Salonboard convention) ──
  const ScheduleStrip = () => {
    const hours = [9,10,11,12,13,14,15,16,17,18,19,20];
    const blocks = [
      { staff:'デモ副社長',    start:9.5,  span:1,   label:'TEL 田中', tone:'alert' },
      { staff:'デモ副社長',    start:13,   span:1.5, label:'説明会 伊藤', tone:'gold' },
      { staff:'デモ副社長',    start:14.5, span:1,   label:'説明会 加藤', tone:'gold' },
      { staff:'デモ副社長',    start:16,   span:1,   label:'見学会 渡辺', tone:'info' },
      { staff:'デモ申込担当',    start:10.5, span:0.5, label:'TEL 佐藤',   tone:'alert' },
      { staff:'デモ申込担当',    start:11,   span:0.5, label:'TEL 池田',   tone:'alert' },
      { staff:'デモ申込担当',    start:15,   span:1,   label:'申込書 吉田', tone:'gold' },
      { staff:'デモ申込担当',    start:17,   span:1.5, label:'入金消込',    tone:'info' },
      { staff:'デモ経理',start:10,   span:2,   label:'入金照合',    tone:'info' },
      { staff:'デモ経理',start:14,   span:2,   label:'経理週次',    tone:'info' },
      { staff:'デモ校長',      start:9,    span:1,   label:'朝会',        tone:'info' },
      { staff:'デモ校長',      start:17.5, span:1,   label:'松本 確認',   tone:'warn' },
    ];
    const staffs = ['デモ副社長','デモ申込担当','デモ経理','デモ校長'];
    const toneBg = { gold:'#EEDFCB', alert:'#FBEEEE', warn:'#FAF1E2', info:'#ECEFF5' };
    const toneTx = { gold:'#7A5326', alert:'#A12626', warn:'#7A5326', info:'#4F5A77' };
    const toneBd = { gold:'#C9A98C', alert:'#D64545', warn:'#C99A57', info:'#7A88A8' };
    const pxPerHour = 60; // tight grid
    const offset = 9;
    return (
      <div className="card overflow-hidden">
        <div className="px-4 py-2.5 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">5月14日（木）</span>
          </div>
          <div className="flex items-center gap-1.5 text-[11px] text-mute">
            <span className="live-dot" /> リアルタイム同期
          </div>
        </div>
        <div className="flex">
          <div className="w-24 shrink-0 hairline-r">
            <div className="h-7 hairline-b" />
            {staffs.map(s => (
              <div key={s} className="h-12 px-3 flex items-center text-[11.5px] font-medium text-ink2 hairline-b whitespace-nowrap">{s}</div>
            ))}
          </div>
          <div className="flex-1 overflow-x-auto nice-scroll">
            <div style={{ width: pxPerHour * hours.length }}>
              <div className="h-7 hairline-b flex">
                {hours.map(h => (
                  <div key={h} className="text-[10px] text-mute px-1.5 pt-1.5" style={{ width:pxPerHour, borderRight:'1px dashed #F0E8E0' }}>
                    {h}:00
                  </div>
                ))}
              </div>
              {staffs.map((s, si) => (
                <div key={s} className="h-12 relative hairline-b" style={{ background: si%2 ? '#FBF7F2' : '#fff' }}>
                  {hours.map((h, hi) => (
                    <div key={hi} style={{ position:'absolute', left: hi*pxPerHour, top:0, bottom:0, width:1, background:'#F4EEE8' }} />
                  ))}
                  {blocks.filter(b => b.staff === s).map((b, i) => (
                    <div key={i}
                      className="absolute top-1.5 bottom-1.5 px-2 py-1 rounded-md text-[11px] font-medium truncate flex items-center"
                      style={{
                        left: (b.start - offset) * pxPerHour + 2,
                        width: b.span * pxPerHour - 4,
                        background: toneBg[b.tone],
                        color: toneTx[b.tone],
                        borderLeft: `3px solid ${toneBd[b.tone]}`,
                      }}>
                      {b.label}
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="px-7 py-6 nice-scroll overflow-y-auto" style={{ height: 'calc(100vh - 56px)' }}>
      {/* Header */}
      <div className="flex items-end justify-between mb-5">
        <div>
          <div className="text-[11px] text-mute mb-1 tracking-wide">2026年5月14日（木）9:00 現在</div>
          <h1 className="text-[22px] font-semibold text-ink">こんにちは、デモ校長 さん。</h1>
          <p className="text-[12.5px] text-ink2 mt-1">今日対応すべきアクションは <span className="num font-semibold text-ink">12 件</span>、うち <span className="text-alert font-semibold">3 件が要対応</span> です。</p>
        </div>
        <div className="flex items-center gap-2">
        </div>
      </div>

      {/* Hero */}
      <div className="mb-4">{heroBlock}</div>

      {/* Main grid */}
      <div className="grid grid-cols-12 gap-3">
        {/* Today's actions */}
        <div className="col-span-8 card overflow-hidden">
          <div className="px-4 py-2.5 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">フロー順 · 時刻順</span>
            </div>
            <div className="flex items-center gap-1 text-[11px]">
              <button className="px-2 py-1 rounded-md bg-ink text-cream">すべて</button>
              <button className="px-2 py-1 rounded-md hover:bg-cream2 text-ink2">要対応 3</button>
              <button className="px-2 py-1 rounded-md hover:bg-cream2 text-ink2">完了 0</button>
            </div>
          </div>
          <div className="divide-y divide-line2">
            {TODAYS_ACTIONS.map((a,i) => <ActionRow key={i} a={a} />)}
          </div>
        </div>

        {/* Right column: payments + LINE feed */}
        <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 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>
              </div>
              <span className="text-[11px] text-mute">過去2日</span>
            </div>
            <div className="divide-y divide-line2">
              {RECENT_PAYMENTS.map((p,i) => (
                <div key={i} className="px-4 py-3 flex items-center gap-3">
                  <div className="num text-[11px] text-mute w-10">{p.date}</div>
                  <Avatar name={p.name} school="umeda" size={30}/>
                  <div className="flex-1 min-w-0">
                    <div className="text-[12.5px] font-medium truncate">{p.name}</div>
                    <div className="text-[10.5px] text-mute">{p.course} · {p.method}</div>
                  </div>
                  <div className="num text-[13px] font-semibold text-okgreen">¥{p.amount.toLocaleString()}</div>
                </div>
              ))}
            </div>
            <div className="px-4 py-2 hairline-t bg-cream2/40 flex items-center justify-between">
              <span className="text-[11px] text-mute">今月累計</span>
              <span className="num text-[13px] font-semibold">¥4,560,000 <span className="text-[10.5px] text-okgreen ml-1">+12%</span></span>
            </div>
          </div>

          <div className="card overflow-hidden">
            <div className="px-4 py-2.5 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">未読 LINE</h3>
              </div>
              <span className="num text-[11px] text-mute">7 件</span>
            </div>
            <div className="divide-y divide-line2">
              {[
                { name:'佐藤 ハナ', msg:'お振込ですが、本日中に…', time:'5分前', school:'umeda' },
                { name:'加藤 ノア', msg:'明日の説明会、神戸校で…', time:'18分前', school:'kobe' },
                { name:'伊藤 リン', msg:'説明会の日程ですが、土曜…', time:'42分前', school:'shinsai' },
              ].map((m,i) => (
                <div key={i} className="px-4 py-3 flex items-center gap-3 hover:bg-cream2/40">
                  <Avatar name={m.name} school={m.school} size={30}/>
                  <div className="flex-1 min-w-0">
                    <div className="text-[12px] font-medium truncate">{m.name}</div>
                    <div className="text-[11px] text-mute truncate">{m.msg}</div>
                  </div>
                  <div className="text-[10.5px] text-mute">{m.time}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Heatmap */}
        <div className="col-span-12 card overflow-hidden">
          <div className="px-4 py-2.5 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">過去30日</span>
            </div>
            <div className="flex items-center gap-1.5 text-[10.5px] text-mute">
              <span>少</span>
              {['#F6E9E4','#F5DDE3','#EBC0CB','#D89AAA','#B5728C'].map((c,i)=>(
                <span key={i} style={{ width:10, height:10, background:c, borderRadius:2 }} />
              ))}
              <span>多</span>
            </div>
          </div>
          <div className="p-4 overflow-x-auto nice-scroll">
            <div style={{ display:'grid', gridTemplateColumns:'72px repeat(30, 18px)', gap:'4px', alignItems:'center' }}>
              <div></div>
              {Array.from({length:30}).map((_,i) => (
                <div key={i} className="text-[8.5px] text-mute text-center" style={{ transform:'rotate(-65deg)', transformOrigin:'center', whiteSpace:'nowrap' }}>
                  {i % 3 === 0 ? dayLabel(i) : ''}
                </div>
              ))}
              {SCHOOLS.filter(s => s.id !== 'all' && s.id !== 'kenshu').map(sc => (
                <React.Fragment key={sc.id}>
                  <div className="text-[11px] font-medium text-ink2 pr-1 truncate">{sc.short}</div>
                  {HEATMAP[sc.id].map((n, i) => (
                    <div key={i} className="hm-cell" title={`${sc.short} ${dayLabel(i)}: ${n}件`}
                         style={{ background:hmScale(n), width:14, height:14 }} />
                  ))}
                </React.Fragment>
              ))}
            </div>
            <div className="mt-3 text-[11px] text-mute flex items-center gap-3">
              <span><span className="num font-semibold text-ink">梅田福島</span> が最もアクティブ</span>
              <span>·</span>
              <span><span className="num font-semibold text-ink">水・金</span> がピーク</span>
              <span>·</span>
              <span className="text-warn">研修校は空白（記録待ち）</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;