import type { QuickActionType } from '../../data/mockData';
import { Button } from '../ui';
import { cls } from '../../utils/cls';

export type SectionKey = 'home' | 'exam' | 'booking' | 'support';

interface SidebarProps {
  active: SectionKey;
  onNavigate: (key: SectionKey) => void;
  onQuickAction: (action: Exclude<QuickActionType, 'none'>) => void;
}

const IconHome = () => <span className='text-xs'>🏠</span>;
const IconHospital = () => <span className='text-xs'>🏥</span>;
// const IconCalendar = () => <span className='text-xs'>📅</span>;
const IconSupport = () => <span className='text-xs'>💬</span>;

const NAV_ITEMS = [
  { key: 'home', icon: IconHome, label: '首页' },
  { key: 'exam', icon: IconHospital, label: '体检中心' },
  // { key: 'booking', icon: IconCalendar, label: '预约中心' },
  { key: 'support', icon: IconSupport, label: '客服咨询' },
] as const;

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen?.();
  } else {
    document.exitFullscreen?.();
  }
};

export const Sidebar = ({ active, onNavigate, onQuickAction }: SidebarProps) => (
  <aside className='h-screen max-h-screen bg-white border-r p-4 flex flex-col gap-4 overflow-hidden'>
    <div>
      <button type='button' onClick={toggleFullscreen} className='text-base font-semibold cursor-pointer hover:opacity-80 text-left'>圆和医疗 · 体检中心</button>
      <div className='text-xs text-gray-500 mt-1'></div>
    </div>

    <nav className='space-y-1'>
      {NAV_ITEMS.map((item) => (
        <Button
          key={item.key}
          onClick={() => onNavigate(item.key as SectionKey)}
          className={cls('w-full justify-start', active === item.key && 'bg-gray-100 border-gray-900 text-gray-900')}
        >
          <item.icon />
          <span>{item.label}</span>
        </Button>
      ))}
    </nav>

    <section className='mt-2 p-3 rounded-2xl border bg-gray-50/50'>
      <div className='text-sm text-gray-700 mb-2'>快捷操作</div>
      <div className='grid grid-cols-2 gap-2 text-xs'>
        <Button
          className='min-h-[52px] justify-center py-2 bg-white border-gray-200 hover:bg-gray-50'
          onClick={() => onQuickAction('meal')}
        >
          <div className='flex flex-col leading-tight text-sm text-gray-800'>
            <span>用餐</span>
            <span>登记</span>
          </div>
        </Button>
        <Button
          className='min-h-[52px] justify-center py-2 bg-white border-gray-200 hover:bg-gray-50'
          onClick={() => onQuickAction('note')}
        >
          <div className='flex flex-col leading-tight text-sm text-gray-800'>
            <span>备注窗</span>
          </div>
        </Button>
        <Button
          className='min-h-[52px] col-span-2 justify-center py-2 bg-white border-gray-200 hover:bg-gray-50'
          onClick={() => onQuickAction('vip')}
        >
          <div className='flex flex-col leading-tight text-sm text-gray-800'>
            <span>太平VIP认证</span>
          </div>
        </Button>
      </div>
    </section>

    {/* <section className='mt-auto p-3 rounded-2xl border bg-gray-50/70 text-xs flex flex-col gap-2'>
      <div className='text-sm font-medium flex items-center gap-2'>
        <span>💻</span>
        <span>客服 / IT 支持</span>
      </div>
      <div className='text-gray-600'>遇到系统问题可一键联系 IT / 运营支持。</div>
    </section> */}
  </aside>
);


