import { useEffect, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import Icon from './Icons';
import { PAGE_ORDER, usePageIndex } from '../utils/pageNav';
import { Avatar, AvatarImage, AvatarFallback } from '@appica/ui-react/avatar'

/* =========================================================
   共享页眉 —— 所有大屏页面统一（由 ScreenLayout 注入）
   状态文案按当前页面自动识别；左右键循环 + 可点击按钮切换
   ========================================================= */

const STATUS_BY_PATH = {
  '/': '数据实时',
  '/twin': '3D 实时',
  '/screen': '媒体播放',
};

export default function PageHeader() {
  const navigate = useNavigate();
  const location = useLocation();
  const [now, setNow] = useState(new Date());
  const pageIdx = usePageIndex();

  useEffect(() => {
    const iv = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(iv);
  }, []);

  const dateStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
  const week = ['日', '一', '二', '三', '四', '五', '六'][now.getDay()];
  const timeStr = now.toLocaleTimeString('zh-CN', { hour12: false });
  const status = STATUS_BY_PATH[location.pathname] || '在线';

  // 循环中的相邻页面（左/右）
  const n = PAGE_ORDER.length;
  const left = pageIdx >= 0 ? PAGE_ORDER[(pageIdx - 1 + n) % n] : null;
  const right = pageIdx >= 0 ? PAGE_ORDER[(pageIdx + 1) % n] : null;

  return (
    <header className="bd-header">
      <div className="bd-header-left">
        {/* <span className="bd-logo">
          <Image src="/logo.png" alt="Logo" />
        </span> */}
        <Avatar size="lg">
          <AvatarImage src="/public/logo.png" alt="" />
        </Avatar>
        <div className="bd-header-titles">
          <h1 className="bd-header-title">昆明市大学生创业园 <span className="bd-header-title-accent">· OPC 智能园区数字运营中心</span></h1>
          <div className="bd-header-sub">云南省首家政府主办大学生创业孵化园区 · <span className="bd-header-content—highlights">空间+孵化+融资+政策+资源+AI赋能+综合服务</span> 七位一体</div>
        </div>
      </div>
      <div className="bd-header-right">
        <div className="bd-nav-keys" title="左右方向键或点击切换页面">
          {left && (
            <button className="bd-nav-key" onClick={() => navigate(left.path)}>
              <Icon name="chevron-left" size={13} />
              {left.label}
            </button>
          )}
          <span className="bd-nav-dot">·</span>
          {right && (
            <button className="bd-nav-key" onClick={() => navigate(right.path)}>
              {right.label}
              <Icon name="chevron-right" size={13} />
            </button>
          )}
        </div>
        <div className="bd-live">
          <span className="bd-live-dot" />
          {status}
        </div>
        <div className="bd-clock">
          <div className="bd-clock-time">{timeStr}</div>
          <div className="bd-clock-date">{dateStr} 周{week}</div>
        </div>
      </div>
    </header>
  );
}