import React from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, TabBar, Badge } from 'antd-mobile';
import { 
  AppOutline, 
  SearchOutline, 
  AddCircleOutline,
  SetOutline,
  BellOutline 
} from 'antd-mobile-icons';
import { useNotificationStore } from '../../stores';
import './index.css';

interface LayoutProps {
  children: React.ReactNode;
  title?: string;
  showBack?: boolean;
  showTabBar?: boolean;
}

const Layout: React.FC<LayoutProps> = ({ 
  children, 
  title = '药箱',
  showBack = false,
  showTabBar = true 
}) => {
  const navigate = useNavigate();
  const { unreadCount } = useNotificationStore();
  
  const tabs = [
    {
      key: '/',
      title: '首页',
      icon: <AppOutline />
    },
    {
      key: '/medicines',
      title: '药品',
      icon: <SearchOutline />
    },
    {
      key: '/quick-dispense',
      title: '取药',
      icon: <AddCircleOutline />
    },
    {
      key: '/notifications',
      title: '通知',
      icon: <Badge content={unreadCount > 0 ? unreadCount : null}>
        <BellOutline />
      </Badge>
    },
    {
      key: '/settings',
      title: '设置',
      icon: <SetOutline />
    }
  ];
  
  const handleTabChange = (key: string) => {
    navigate(key);
  };
  
  return (
    <div className="layout">
      <div className="layout-header">
        <NavBar 
          onBack={showBack ? () => navigate(-1) : undefined}
          backArrow={showBack}
        >
          {title}
        </NavBar>
      </div>
      
      <div className="layout-content">
        {children}
      </div>
      
      {showTabBar && (
        <div className="layout-tabbar">
          <TabBar activeKey={tabs.find(t => window.location.pathname.startsWith(t.key))?.key || '/'} onChange={handleTabChange}>
            {tabs.map(item => (
              <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
          </TabBar>
        </div>
      )}
    </div>
  );
};

export default Layout;