import type { SVGProps } from 'react';
import woodButton from '../assets/ui/wood-button.webp';
import './AppBottomNav.css';

type NavKey = 'shop' | 'bag' | 'rank' | 'share' | 'service';

interface NavItem {
  key: NavKey;
  label: string;
}

interface Props {
  onAction?: (key: NavKey) => void;
}

const NAV_ITEMS: NavItem[] = [
  { key: 'shop', label: '商城' },
  { key: 'bag', label: '背包' },
  { key: 'rank', label: '战绩' },
  { key: 'share', label: '分享' },
  { key: 'service', label: '客服' },
];

function NavIcon({ keyName }: { keyName: NavKey }) {
  const common: SVGProps<SVGSVGElement> = {
    fill: 'none',
    stroke: 'currentColor',
    strokeWidth: 2,
    strokeLinecap: 'round' as const,
    strokeLinejoin: 'round' as const,
    viewBox: '0 0 24 24',
    'aria-hidden': true,
  };

  switch (keyName) {
    case 'shop':
      return (
        <svg {...common}>
          <path d="M4 10h16l-1.4 10H5.4L4 10Z" />
          <path d="M7 10V7a5 5 0 0 1 10 0v3" />
        </svg>
      );
    case 'bag':
      return (
        <svg {...common}>
          <path d="M6 8h12l-1 12H7L6 8Z" />
          <path d="M9 8a3 3 0 0 1 6 0" />
        </svg>
      );
    case 'rank':
      return (
        <svg {...common}>
          <path d="M6 20V10" />
          <path d="M12 20V4" />
          <path d="M18 20v-7" />
        </svg>
      );
    case 'share':
      return (
        <svg {...common}>
          <circle cx="7" cy="12" r="2" />
          <circle cx="17" cy="7" r="2" />
          <circle cx="17" cy="17" r="2" />
          <path d="M9 11l6-3M9 13l6 3" />
        </svg>
      );
    case 'service':
      return (
        <svg {...common}>
          <path d="M6 12a6 6 0 0 1 12 0" />
          <path d="M6 12v2a2 2 0 0 0 2 2h1" />
          <path d="M18 12v2a2 2 0 0 1-2 2h-1" />
          <path d="M8 18h8" />
        </svg>
      );
  }
}

export function AppBottomNav({ onAction }: Props) {
  return (
    <nav className="app-bottom-nav" aria-label="底部导航">
      {NAV_ITEMS.map((item) => (
        <button
          key={item.key}
          type="button"
          className="app-bottom-nav__item"
          onClick={() => onAction?.(item.key)}
        >
          <span className="app-bottom-nav__button-wrap">
            <img className="app-bottom-nav__button-bg" src={woodButton} alt="" aria-hidden="true" />
            <span className="app-bottom-nav__icon">
              <NavIcon keyName={item.key} />
            </span>
          </span>
          <span className="app-bottom-nav__label">{item.label}</span>
        </button>
      ))}
    </nav>
  );
}
