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;

export const Sidebar = ({ active, onNavigate, onQuickAction }: SidebarProps) => (
  <aside className='bg-white border-r p-4 flex flex-col gap-4'>
    <div>
      <div className='text-base font-semibold'>圆和医疗 · 体检中心</div>
      <div className='text-xs text-gray-500 mt-1'>iPad 首页驾驶舱预览</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='justify-center py-1.5' onClick={() => onQuickAction('meal')}>
          用餐登记
        </Button>
        <Button className='justify-center py-1.5' onClick={() => onQuickAction('vip')}>
          太平VIP认证
        </Button>
        <Button className='justify-center py-1.5' onClick={() => onQuickAction('delivery')}>
          报告寄送
        </Button>
        <Button className='justify-center py-1.5' onClick={() => onQuickAction('note')}>
          备注窗
        </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>
);