// ─────────────────────────────────────────────────────────────────────────
//  screens-admin.jsx — 管理者用Web UI（A-01 ダッシュボード）
// ─────────────────────────────────────────────────────────────────────────

const ADM = {
  bg: '#EEF1F4', panel: '#FFFFFF', panel2: '#F1F4F6', line: '#E3E7EC',
  text: '#1F2A33', sub: '#5C6B76', faint: '#94A2AC',
  blue: '#0B7A6B', green: '#0E9F6E', amber: '#C77700', red: '#D14343', purple: '#0B7A6B',
};

const ROBOTS = [
  { id: 'RBT-01', name: '社内ロボ A', floor: '14F', status: '配送中', tone: 'blue', batt: 82, task: '資料を14F C島へ', icon: 'package' },
  { id: 'RBT-02', name: '社内ロボ B', floor: '12F', status: '待機中', tone: 'green', batt: 96, task: '—', icon: 'robot' },
  { id: 'RBT-03', name: '共用部ロボ', floor: '1F', status: '案内中', tone: 'blue', batt: 64, task: '来訪者を会議室14-Aへ', icon: 'route' },
  { id: 'RBT-04', name: '社内ロボ C', floor: '14F', status: '充電中', tone: 'neutral', batt: 38, task: 'ドック#2で充電', icon: 'battery' },
  { id: 'RBT-05', name: '夜間巡回ロボ', floor: '全階', status: 'エラー', tone: 'red', batt: 71, task: '経路上に障害物を検知', icon: 'alert' },
];

const QUEUE = [
  { type: '配送', detail: 'お茶を会議室12-Bへ', by: '鈴木', eta: '2分', tone: 'blue' },
  { type: 'メッセージ伝達', detail: '経営層メッセージ（全体）', by: '総務', eta: '承認待ち', tone: 'amber' },
  { type: '巡回点検', detail: '夜間パトロール 施錠確認', by: '施設管理', eta: '22:00', tone: 'neutral' },
  { type: '案内', detail: '来訪者を会議室14-Aへ', by: '受付', eta: '進行中', tone: 'green' },
];

function StatCard({ label, value, unit, icon, tone }) {
  const c = ADM[tone] || ADM.blue;
  return (
    <div style={{ flex: 1, background: ADM.panel, border: `1px solid ${ADM.line}`, borderRadius: 16, padding: '18px 20px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
        <span style={{ color: ADM.sub, fontSize: 14 }}>{label}</span>
        <div style={{ width: 34, height: 34, borderRadius: 9, background: `${c}1F`, display: 'grid', placeItems: 'center' }}>
          <Icon name={icon} size={19} color={c} /></div>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <span style={{ color: ADM.text, fontSize: 34, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{value}</span>
        <span style={{ color: ADM.faint, fontSize: 15 }}>{unit}</span>
      </div>
    </div>
  );
}

function A01_Dashboard({ nav }) {
  const now = useClock();
  const toneMap = { blue: ADM.blue, green: ADM.green, amber: ADM.amber, red: ADM.red, neutral: ADM.faint };
  const tonePill = { blue: 'blue', green: 'green', amber: 'amber', red: 'red', neutral: 'neutral' };
  return (
    <div style={{ display: 'flex', height: '100%', background: ADM.bg }}>
      {/* sidebar */}
      <div style={{ width: 76, background: ADM.panel, borderRight: `1px solid ${ADM.line}`, display: 'flex',
        flexDirection: 'column', alignItems: 'center', padding: '20px 0', gap: 8, flexShrink: 0 }}>
        <div style={{ width: 42, height: 42, borderRadius: 11, background: ADM.blue, display: 'grid', placeItems: 'center', marginBottom: 16 }}>
          <Icon name="robot" size={25} color="#fff" /></div>
        {[['home', true, 'A-01'], ['list', false, 'A-02'], ['route', false, 'A-03'], ['users', false, 'A-04'], ['shield', false, 'A-05'], ['settings', false, 'A-07']].map(([ic, on], i) => (
          <button key={i} style={{ width: 48, height: 48, borderRadius: 12, cursor: 'pointer', border: 'none',
            background: on ? 'rgba(14,156,132,0.16)' : 'transparent', color: on ? ADM.blue : ADM.faint, display: 'grid', placeItems: 'center' }}>
            <Icon name={ic} size={23} /></button>
        ))}
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        {/* topbar */}
        <div style={{ display: 'flex', alignItems: 'center', padding: '0 28px', height: 64, borderBottom: `1px solid ${ADM.line}`, flexShrink: 0 }}>
          <div>
            <div style={{ color: ADM.text, fontSize: 19, fontWeight: 800 }}>運用ダッシュボード</div>
            <div style={{ color: ADM.faint, fontSize: 13 }}>フィジカルAIロボット運用</div>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 18, color: ADM.sub, fontSize: 14 }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 7 }}><span style={{ width: 8, height: 8, borderRadius: 99, background: ADM.green }}></span>システム正常</span>
            <span style={{ fontVariantNumeric: 'tabular-nums', color: ADM.text, fontWeight: 600 }}>{fmtDate(now)} {fmtTime(now)}</span>
            <div style={{ width: 38, height: 38, borderRadius: 10, background: ADM.panel2, display: 'grid', placeItems: 'center', position: 'relative' }}>
              <Icon name="bell" size={20} />
              <span style={{ position: 'absolute', top: 8, right: 9, width: 7, height: 7, borderRadius: 99, background: ADM.red }}></span>
            </div>
          </div>
        </div>

        {/* body */}
        <div style={{ flex: 1, padding: 24, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* stats */}
          <div style={{ display: 'flex', gap: 16 }}>
            <StatCard label="稼働中ロボット" value="4" unit="/ 5台" icon="robot" tone="blue" />
            <StatCard label="進行中タスク" value="8" unit="件" icon="route" tone="green" />
            <StatCard label="承認待ち" value="1" unit="件" icon="clock" tone="amber" />
            <StatCard label="要対応アラート" value="1" unit="件" icon="alert" tone="red" />
            <StatCard label="本日の受付" value="23" unit="件" icon="users" tone="purple" />
          </div>

          <div style={{ display: 'flex', gap: 20, flex: 1, minHeight: 0 }}>
            {/* robots */}
            <div style={{ flex: 1.4, background: ADM.panel, border: `1px solid ${ADM.line}`, borderRadius: 18, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
              <div style={{ padding: '16px 22px', borderBottom: `1px solid ${ADM.line}`, display: 'flex', alignItems: 'center' }}>
                <span style={{ color: ADM.text, fontSize: 16, fontWeight: 700 }}>ロボット別ステータス</span>
                <span style={{ marginLeft: 'auto', color: ADM.faint, fontSize: 13 }}>5台</span>
              </div>
              <div style={{ flex: 1, overflowY: 'auto' }}>
                {ROBOTS.map(r => (
                  <div key={r.id} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '14px 22px', borderBottom: `1px solid ${ADM.line}` }}>
                    <div style={{ width: 44, height: 44, borderRadius: 11, background: ADM.panel2, display: 'grid', placeItems: 'center' }}>
                      <Icon name={r.icon} size={22} color={toneMap[r.tone]} /></div>
                    <div style={{ width: 130 }}>
                      <div style={{ color: ADM.text, fontSize: 15, fontWeight: 700 }}>{r.name}</div>
                      <div style={{ color: ADM.faint, fontSize: 12.5 }}>{r.id}・{r.floor}</div>
                    </div>
                    <Pill tone={tonePill[r.tone]}>{r.status}</Pill>
                    <div style={{ flex: 1, color: ADM.sub, fontSize: 14, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.task}</div>
                    {/* battery */}
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, width: 92 }}>
                      <div style={{ flex: 1, height: 7, borderRadius: 99, background: ADM.panel2, overflow: 'hidden' }}>
                        <div style={{ width: `${r.batt}%`, height: '100%', borderRadius: 99, background: r.batt < 40 ? ADM.amber : ADM.green }}></div>
                      </div>
                      <span style={{ color: ADM.sub, fontSize: 13, width: 32, textAlign: 'right' }}>{r.batt}%</span>
                    </div>
                    <button style={{ width: 36, height: 36, borderRadius: 9, cursor: 'pointer', border: `1px solid ${ADM.line}`, background: 'transparent', color: ADM.sub, display: 'grid', placeItems: 'center' }}>
                      <Icon name={r.tone === 'red' ? 'alert' : 'chevron'} size={17} color={r.tone === 'red' ? ADM.red : ADM.sub} /></button>
                  </div>
                ))}
              </div>
              {/* quick actions */}
              <div style={{ padding: '14px 22px', borderTop: `1px solid ${ADM.line}`, display: 'flex', gap: 10 }}>
                {[['pause', 'タスク停止'], ['battery', '充電ドックへ'], ['route', '走行禁止設定'], ['bell', '担当者へ通知']].map(([ic, l]) => (
                  <button key={l} style={{ flex: 1, height: 46, cursor: 'pointer', borderRadius: 11, border: `1px solid ${ADM.line}`,
                    background: ADM.panel2, color: ADM.text, fontSize: 13.5, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7 }}>
                    <Icon name={ic} size={17} color={ADM.blue} />{l}</button>
                ))}
              </div>
            </div>

            {/* right column: alert + queue + map */}
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 16, minHeight: 0 }}>
              {/* alert */}
              <div style={{ background: 'rgba(239,68,68,0.1)', border: `1px solid ${ADM.red}55`, borderRadius: 16, padding: '16px 20px', display: 'flex', gap: 14, alignItems: 'center' }}>
                <div style={{ width: 42, height: 42, borderRadius: 11, background: 'rgba(239,68,68,0.18)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                  <Icon name="alert" size={23} color={ADM.red} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ color: '#B3261E', fontSize: 15, fontWeight: 700 }}>RBT-05 経路上に障害物を検知</div>
                  <div style={{ color: ADM.sub, fontSize: 13, marginTop: 2 }}>全階・夜間巡回 / 介入が必要です</div>
                </div>
                <button style={{ height: 40, padding: '0 18px', borderRadius: 10, border: 'none', cursor: 'pointer', background: ADM.red, color: '#fff', fontSize: 14, fontWeight: 700 }}>対応する</button>
              </div>

              {/* queue */}
              <div style={{ flex: 1, background: ADM.panel, border: `1px solid ${ADM.line}`, borderRadius: 18, display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 0 }}>
                <div style={{ padding: '15px 20px', borderBottom: `1px solid ${ADM.line}`, display: 'flex', alignItems: 'center' }}>
                  <span style={{ color: ADM.text, fontSize: 16, fontWeight: 700 }}>タスクキュー</span>
                  <span style={{ marginLeft: 'auto', color: ADM.faint, fontSize: 13 }}>{QUEUE.length}件</span>
                </div>
                <div style={{ flex: 1, overflowY: 'auto' }}>
                  {QUEUE.map((q, i) => (
                    <div key={i} style={{ padding: '13px 20px', borderBottom: `1px solid ${ADM.line}`, display: 'flex', alignItems: 'center', gap: 12 }}>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <span style={{ color: ADM.text, fontSize: 14.5, fontWeight: 700 }}>{q.type}</span>
                          <Pill tone={q.tone} style={{ fontSize: 11.5, padding: '2px 9px' }}>{q.eta}</Pill>
                        </div>
                        <div style={{ color: ADM.sub, fontSize: 13, marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{q.detail}・{q.by}</div>
                      </div>
                      {q.tone === 'amber'
                        ? <button style={{ height: 34, padding: '0 14px', borderRadius: 9, border: 'none', cursor: 'pointer', background: ADM.amber, color: '#fff', fontSize: 13, fontWeight: 700 }}>承認</button>
                        : <Icon name="chevron" size={18} color={ADM.faint} />}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { A01_Dashboard, ADM });