// ─────────────────────────────────────────────────────────────────────────
//  screens-employee.jsx — 社内用UI（AIオフィスパートナー）
//  E-01 ホーム / E-02 確認 / E-03 所在 / E-04 会議室 / E-05 配送 /
//  E-07 FAQ / E-11 履歴
// ─────────────────────────────────────────────────────────────────────────

const EMP = {
  bg: '#F4F6F8', surface: '#FFFFFF', surface2: '#EEF1F4', line: '#E3E7EC',
  text: '#1F2A33', sub: '#5C6B76', faint: '#94A2AC',
  blue: '#0B7A6B', green: '#0E9F6E', amber: '#C77700', red: '#D14343'
};

// Demo voice scenarios used by the mic on E-01
const VOICE_SCENARIOS = [
{ heard: '田中さん、いまどこ？', intent: { title: '従業員の所在検索', target: 'E-03',
    rows: [['対象', '田中 太郎さん'], ['アクション', '所在を表示']], go: 'E-03' } },
{ heard: '14時から1時間、4人の会議室を予約して', intent: { title: '会議室の予約', target: 'E-04',
    rows: [['日時', '本日 14:00 – 15:00'], ['人数', '4名'], ['フロア', '14F 優先']], go: 'E-04' } },
{ heard: 'この資料を田中さんの席に届けて', intent: { title: '配送の依頼', target: 'E-05',
    rows: [['宛先', '田中 太郎さん（14F C島）'], ['荷物', '資料'], ['通知', 'Teamsで通知']], go: 'E-05', warn: '荷物を中段トレイに置いてください' } },
{ heard: '在宅勤務の申請方法を教えて', intent: { title: '社内FAQ への質問', target: 'E-07',
    rows: [['質問', '在宅勤務の申請方法'], ['参照', '勤務規程 / Sherpa AI']], go: 'E-07' } }];


const SHORTCUTS = [
{ id: 'E-03', icon: 'person', label: '人を探す', sub: '従業員所在検索' },
{ id: 'E-04', icon: 'calendar', label: '会議室', sub: '検索・予約' },
{ id: 'E-05', icon: 'package', label: '配送', sub: '物品を届ける' },
{ id: 'E-07', icon: 'faq', label: 'FAQ', sub: 'Sherpa AI' },
{ id: 'E-08', icon: 'megaphone', label: '広報巡回', sub: 'メッセージ伝達' },
{ id: 'E-10', icon: 'shield', label: '巡回点検', sub: 'パトロール' }];


// ── Shared employee chrome ─────────────────────────────────────────────────
function EmpStatusBar({ onHome, nav }) {
  const now = useClock();
  return (
    <div style={{ display: 'flex', alignItems: 'center', padding: '0 28px', height: 56,
      borderBottom: `1px solid ${EMP.line}`, gap: 16, flexShrink: 0 }}>
      <div onClick={onHome} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
        <div style={{ width: 30, height: 30, borderRadius: 8, background: EMP.blue,
          display: 'grid', placeItems: 'center' }}>
          <Icon name="robot" size={19} color="#fff" />
        </div>
        <span style={{ color: EMP.text, fontWeight: 700, fontSize: 15, letterSpacing: '0.02em' }}>Office Partner</span>
      </div>
      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 18, color: EMP.sub, fontSize: 14 }}>
        <Pill tone="green"><span style={{ width: 7, height: 7, borderRadius: 99, background: EMP.green, display: 'inline-block' }}></span>待機中</Pill>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="battery" size={18} />82%</span>
        <Icon name="wifi" size={18} />
        <span style={{ color: EMP.text, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{fmtTime(now)}</span>
        {nav && <button onClick={() => nav('E-12')} title="ロック / 認証" style={{ width: 34, height: 34, borderRadius: 9, cursor: 'pointer',
          border: `1px solid ${EMP.line}`, background: EMP.surface, color: EMP.sub, display: 'grid', placeItems: 'center' }}>
          <Icon name="shield" size={18} /></button>}
      </div>
    </div>);

}

function EmpNav({ active, nav }) {
  const items = [
  { id: 'E-01', icon: 'home', label: 'ホーム' },
  { id: 'E-ACT', icon: 'route', label: '依頼中' },
  { id: 'E-11', icon: 'history', label: '履歴' },
  { id: 'E-HELP', icon: 'help', label: 'ヘルプ' }];

  return (
    <div style={{ display: 'flex', borderTop: `1px solid ${EMP.line}`, flexShrink: 0, background: EMP.bg }}>
      {items.map((it) => {
        const on = active === it.id;
        return (
          <button key={it.id} onClick={() => nav(it.id)} style={{ flex: 1, border: 'none', cursor: 'pointer',
            background: 'transparent', padding: '12px 0 14px', display: 'flex', flexDirection: 'column',
            alignItems: 'center', gap: 5, color: on ? EMP.blue : EMP.faint }}>
            <Icon name={it.icon} size={23} stroke={on ? 2.4 : 2} />
            <span style={{ fontSize: 12.5, fontWeight: on ? 700 : 500 }}>{it.label}</span>
          </button>);

      })}
    </div>);

}

function BackHeader({ title, sub, back, accent = EMP.blue }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '20px 28px 16px' }}>
      <button onClick={back} style={{ width: 46, height: 46, borderRadius: 12, cursor: 'pointer',
        border: `1px solid ${EMP.line}`, background: EMP.surface, color: EMP.text, display: 'grid', placeItems: 'center' }}>
        <Icon name="arrowLeft" size={22} />
      </button>
      <div>
        <div style={{ color: EMP.text, fontSize: 22, fontWeight: 700 }}>{title}</div>
        {sub && <div style={{ color: EMP.sub, fontSize: 14, marginTop: 2 }}>{sub}</div>}
      </div>
    </div>);

}

// ── E-01 ホーム・AI待受 ─────────────────────────────────────────────────────
function E01_Home({ nav }) {
  const now = useClock();
  const [phase, setPhase] = useState('idle'); // idle | listening | thinking
  const [scenario, setScenario] = useState(null);
  const timers = useRef([]);
  useEffect(() => () => timers.current.forEach(clearTimeout), []);

  const startVoice = () => {
    if (phase !== 'idle') return;
    const sc = VOICE_SCENARIOS[Math.floor(Math.random() * VOICE_SCENARIOS.length)];
    setScenario(sc);setPhase('listening');
    timers.current.push(setTimeout(() => setPhase('thinking'), 2400));
    timers.current.push(setTimeout(() => {setPhase('idle');nav('E-02', sc);}, 3800));
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <EmpStatusBar onHome={() => nav('E-01')} nav={nav} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center',
        justifyContent: 'center', padding: '12px 40px', position: 'relative' }}>

        {/* greeting */}
        <div style={{ textAlign: 'center', marginBottom: 22 }}>
          <div style={{ color: EMP.faint, fontSize: 15, marginBottom: 6 }}>{fmtDate(now)}　{fmtTime(now)}</div>
          <div style={{ color: EMP.text, fontSize: 30, fontWeight: 700 }}>
            {phase === 'listening' ? 'お聞きしています…' : phase === 'thinking' ? '考えています…' : 'こんにちは。何をお手伝いしましょう？'}
          </div>
        </div>

        {/* mic + waveform */}
        <button onClick={startVoice} style={{ border: 'none', cursor: 'pointer', background: 'transparent',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18, marginBottom: 14 }}>
          <div style={{ position: 'relative', display: 'grid', placeItems: 'center' }}>
            {phase !== 'idle' && <span style={{ position: 'absolute', width: 132, height: 132, borderRadius: 99,
              background: EMP.blue, opacity: 0.18, animation: 'ripple 1.6s ease-out infinite' }}></span>}
            <div style={{ width: 104, height: 104, borderRadius: 99, display: 'grid', placeItems: 'center',
              background: phase === 'idle' ? EMP.blue : 'rgba(14,156,132,0.22)',
              border: phase === 'idle' ? 'none' : `2px solid ${EMP.blue}`,
              boxShadow: phase === 'idle' ? '0 12px 40px rgba(14,156,132,0.4)' : 'none', transition: 'all .3s' }}>
              <Icon name="mic" size={44} color={phase === 'idle' ? '#fff' : EMP.blue} stroke={2.2} />
            </div>
          </div>
          <div style={{ height: 90, display: 'grid', placeItems: 'center' }}>
            {phase === 'listening' ?
            <Waveform active color={EMP.blue} width={420} height={90} /> :
            <span style={{ color: EMP.faint, fontSize: 15 }}>{phase === 'idle' ? 'タップして話しかける' : '解析中…'}</span>}
          </div>
        </button>

        {/* heard text bubble */}
        {phase !== 'idle' && scenario &&
        <div style={{ background: EMP.surface, border: `1px solid ${EMP.line}`, borderRadius: 16,
          padding: '12px 22px', color: EMP.text, fontSize: 19, fontWeight: 600, marginBottom: 8,
          animation: 'fadeUp .3s ease' }}>「{scenario.heard}」</div>
        }

        {/* example chips */}
        {phase === 'idle' &&
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center', maxWidth: 720 }}>
            {['「田中さんどこ？」', '「14時から会議室予約」', '「この資料を届けて」', '「経費精算のやり方は？」'].map((t) =>
          <span key={t} style={{ padding: '8px 16px', borderRadius: 999, background: EMP.surface,
            border: `1px solid ${EMP.line}`, color: EMP.sub, fontSize: 14.5 }}>{t}</span>
          )}
          </div>
        }
      </div>

      {/* shortcuts */}
      <div style={{ padding: '0 28px 24px' }}>
        <div style={{ color: EMP.faint, fontSize: 13, fontWeight: 600, letterSpacing: '0.08em', marginBottom: 12 }}>ショートカット</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 12 }}>
          {SHORTCUTS.map((s) =>
          <button key={s.id} onClick={() => nav(s.id)} style={{ border: `1px solid ${EMP.line}`, cursor: 'pointer',
            background: EMP.surface, borderRadius: 16, padding: '16px 10px', display: 'flex', flexDirection: 'column',
            alignItems: 'center', gap: 9, color: EMP.text, transition: 'transform .12s, background .12s' }}
          onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.96)'}
          onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
          onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}>
              <div style={{ width: 48, height: 48, borderRadius: 13, background: 'rgba(14,156,132,0.14)',
              display: 'grid', placeItems: 'center' }}>
                <Icon name={s.icon} size={26} color={EMP.blue} />
              </div>
              <div style={{ fontSize: 15, fontWeight: 600 }}>{s.label}</div>
              <div style={{ fontSize: 12, color: EMP.faint }}>{s.sub}</div>
            </button>
          )}
        </div>
      </div>
      <EmpNav active="E-01" nav={nav} />
    </div>);

}

// ── E-02 音声理解・確認 ─────────────────────────────────────────────────────
function E02_Confirm({ nav, back, ctx }) {
  const sc = ctx || VOICE_SCENARIOS[0];
  const it = sc.intent;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <EmpStatusBar onHome={() => nav('E-01')} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 40 }}>
        <div style={{ width: '100%', maxWidth: 640 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <Icon name="mic" size={20} color={EMP.blue} />
            <span style={{ color: EMP.sub, fontSize: 15 }}>聞き取った依頼</span>
          </div>
          <div style={{ background: EMP.surface, border: `1px solid ${EMP.line}`, borderRadius: 18,
            padding: '20px 26px', color: EMP.text, fontSize: 24, fontWeight: 700, marginBottom: 24 }}>
            「{sc.heard}」
          </div>

          <div style={{ background: EMP.surface, border: `1px solid ${EMP.blue}55`, borderRadius: 18, overflow: 'hidden' }}>
            <div style={{ padding: '16px 26px', borderBottom: `1px solid ${EMP.line}`, display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 30, height: 30, borderRadius: 8, background: 'rgba(14,156,132,0.16)', display: 'grid', placeItems: 'center' }}>
                <Icon name="check" size={18} color={EMP.blue} />
              </div>
              <span style={{ color: EMP.text, fontSize: 18, fontWeight: 700 }}>AIの解釈：{it.title}</span>
            </div>
            <div style={{ padding: '10px 26px 18px' }}>
              {it.rows.map(([k, v]) =>
              <div key={k} style={{ display: 'flex', padding: '11px 0', borderBottom: `1px solid ${EMP.line}` }}>
                  <span style={{ width: 110, color: EMP.faint, fontSize: 15 }}>{k}</span>
                  <span style={{ color: EMP.text, fontSize: 16, fontWeight: 600 }}>{v}</span>
                </div>
              )}
              {sc.warn &&
              <div style={{ marginTop: 14, display: 'flex', gap: 10, alignItems: 'center', background: 'rgba(245,158,11,0.1)',
                border: `1px solid ${EMP.amber}44`, borderRadius: 12, padding: '12px 16px' }}>
                  <Icon name="alert" size={20} color={EMP.amber} />
                  <span style={{ color: '#9A5B00', fontSize: 15 }}>{sc.warn}</span>
                </div>
              }
            </div>
          </div>

          <div style={{ display: 'flex', gap: 12, marginTop: 26 }}>
            <button onClick={() => nav(it.go, ctx)} style={{ flex: 2, height: 64, border: 'none', cursor: 'pointer',
              borderRadius: 16, background: EMP.blue, color: '#fff', fontSize: 19, fontWeight: 700,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              boxShadow: '0 8px 28px rgba(14,156,132,0.36)' }}>
              <Icon name="check" size={24} />実行する
            </button>
            <button onClick={() => nav('E-01')} style={{ flex: 1, height: 64, cursor: 'pointer',
              borderRadius: 16, background: EMP.surface, border: `1px solid ${EMP.line}`, color: EMP.text, fontSize: 17, fontWeight: 600 }}>
              修正する
            </button>
            <button onClick={() => nav('E-01')} style={{ flex: 1, height: 64, cursor: 'pointer',
              borderRadius: 16, background: 'transparent', border: `1px solid ${EMP.line}`, color: EMP.sub, fontSize: 17, fontWeight: 600 }}>
              キャンセル
            </button>
          </div>
        </div>
      </div>
      <EmpNav active="E-01" nav={nav} />
    </div>);

}

window.E01_Home = E01_Home;
window.E02_Confirm = E02_Confirm;
window.EMP = EMP;
window.EmpStatusBar = EmpStatusBar;
window.EmpNav = EmpNav;
window.BackHeader = BackHeader;
window.SHORTCUTS = SHORTCUTS;