import { useMemo } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { theme } from 'antd';
import {
  HomeOutlined,
  EnvironmentOutlined,
  ScheduleOutlined,
  HistoryOutlined,
  NodeIndexOutlined,
  MessageOutlined,
  TeamOutlined,
  TagOutlined,
  CalendarOutlined,
  MenuOutlined,
} from '@ant-design/icons';
import { useSettingsStore } from '@/stores/settings.store';

const BASE_NAV_ITEMS = [
  { key: '/volunteer', icon: HomeOutlined, label: 'Home' },
  { key: '/volunteer/map', icon: EnvironmentOutlined, label: 'Map' },
  { key: '/volunteer/shifts', icon: ScheduleOutlined, label: 'Shifts' },
  { key: '/volunteer/activity', icon: HistoryOutlined, label: 'Activity' },
  { key: '/volunteer/routes', icon: NodeIndexOutlined, label: 'Routes' },
];

interface VolunteerFooterNavProps {
  style?: React.CSSProperties;
  onMenuOpen?: () => void;
  menuActive?: boolean;
}

export default function VolunteerFooterNav({ style, onMenuOpen, menuActive = false }: VolunteerFooterNavProps) {
  const navigate = useNavigate();
  const location = useLocation();
  const { token } = theme.useToken();
  const { settings } = useSettingsStore();

  const NAV_ITEMS = useMemo(() => {
    const items = [...BASE_NAV_ITEMS];
    if (settings?.enableSocialCalendar) {
      items.push({ key: '/volunteer/calendar', icon: CalendarOutlined, label: 'Calendar' });
    }
    if (settings?.enableTicketedEvents) {
      items.push({ key: '/volunteer/tickets', icon: TagOutlined, label: 'Tickets' });
    }
    if (settings?.enableSocial) {
      items.push({ key: '/volunteer/feed', icon: TeamOutlined, label: 'Social' });
    }
    if (settings?.enableChat) {
      items.push({ key: '/volunteer/chat', icon: MessageOutlined, label: 'Chat' });
    }
    return items;
  }, [settings?.enableChat, settings?.enableSocial, settings?.enableSocialCalendar, settings?.enableTicketedEvents]);

  const activeKey = (() => {
    const path = location.pathname;
    if (path === '/volunteer') return '/volunteer';
    for (const item of NAV_ITEMS) {
      if (item.key !== '/volunteer' && path.startsWith(item.key)) return item.key;
    }
    return '/volunteer';
  })();

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-around',
        minHeight: 44,
        background: 'rgba(13, 27, 42, 0.95)',
        borderTop: '1px solid rgba(255,255,255,0.1)',
        backdropFilter: 'blur(10px)',
        WebkitBackdropFilter: 'blur(10px)',
        paddingBottom: 'env(safe-area-inset-bottom)',
        ...style,
      }}
    >
      {/* Menu button */}
      {onMenuOpen && (
        <div
          onClick={onMenuOpen}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flex: 1,
            cursor: 'pointer',
            padding: '10px 0',
            color: menuActive ? token.colorPrimary : 'rgba(255,255,255,0.5)',
            transition: 'color 0.2s',
          }}
        >
          <MenuOutlined style={{ fontSize: 22 }} />
        </div>
      )}

      {NAV_ITEMS.map(({ key, icon: Icon }) => {
        const isActive = activeKey === key;
        return (
          <div
            key={key}
            onClick={() => navigate(key)}
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flex: 1,
              cursor: 'pointer',
              padding: '10px 0',
              color: isActive ? token.colorPrimary : 'rgba(255,255,255,0.5)',
              transition: 'color 0.2s',
            }}
          >
            <Icon style={{ fontSize: 22 }} />
          </div>
        );
      })}
    </div>
  );
}
