import { Link, useLocation } from 'react-router-dom';

import { Avatar } from './Avatar';
import { Icon } from './Icon';

interface NavRailItem {
  to: string;
  icon: string;
  label: string;
  badge?: number;
}

const TOP_ITEMS: NavRailItem[] = [
  { to: '/messages', icon: 'chat_bubble', label: '消息' },
  { to: '/contacts', icon: 'contacts', label: '通讯录' },
  { to: '/favorites', icon: 'inventory_2', label: '收藏' },
];

const BOTTOM_ITEMS: NavRailItem[] = [
  { to: '/calls', icon: 'phone', label: '通话记录' },
  { to: '/settings', icon: 'settings', label: '设置' },
];

function isNavItemActive(to: string, pathname: string): boolean {
  if (to === '/messages') return pathname.startsWith('/messages');
  return pathname === to || pathname.startsWith(`${to}/`);
}

function NavRailButton({ item }: { item: NavRailItem }) {
  const location = useLocation();
  const isActive = isNavItemActive(item.to, location.pathname);
  return (
    // Plain Link, not NavLink -- NavLink computes its OWN `aria-current` from ITS OWN prefix-match
    // logic unconditionally (confirmed by reading react-router's source: passing an `aria-current`
    // prop only changes the STRING used, not whether it's applied at all, which stays gated on
    // NavLink's internal isActive), so a second, independent aria-current computation could in
    // principle disagree with the `className` highlight computed by `isActive` below. Driving both
    // off the one shared `isActive` value keeps them impossible to desync.
    <Link
      to={item.to}
      title={item.label}
      aria-label={item.label}
      aria-current={isActive ? 'page' : undefined}
      className={`relative grid h-11 w-11 place-items-center rounded-[10px] no-underline ${
        isActive ? 'bg-accent-soft-bg text-accent' : 'text-text-secondary'
      }`}
    >
      <Icon name={item.icon} className="!text-2xl" />
      {item.badge ? (
        <b className="absolute top-1 right-0.5 grid h-4 min-w-4 place-items-center rounded-full bg-unread px-1 text-[10px] leading-none font-medium text-white">
          {item.badge}
        </b>
      ) : null}
    </Link>
  );
}

interface NavRailProps {
  unreadMessages?: number;
  /** The logged-in user's own id/name/avatar (`GET /v1/im/me`) -- drives the rail's top self-tile.
   *  All optional so the rail still renders (as a letter-tile fallback) before that request settles. */
  selfId?: string;
  selfName?: string;
  selfAvatarFileId?: string;
}

/** Persistent 64px icon rail, visible at >=640px (see App.tsx for the <640 bottom-tab fallback). */
export function NavRail({ unreadMessages = 0, selfId, selfName, selfAvatarFileId }: NavRailProps) {
  return (
    <nav className="flex h-full w-16 flex-none flex-col items-center border-r border-[#e6e9ee] bg-surface-rail pb-3 pt-3.5">
      <Link to="/settings/profile" title="个人资料" aria-label="个人资料" className="mb-[22px]">
        <Avatar id={selfId || ''} name={selfName} avatarFileId={selfAvatarFileId} className="h-[38px] w-[38px] rounded-[10px] text-base" />
      </Link>
      <div className="flex flex-1 flex-col items-center gap-1.5">
        {TOP_ITEMS.map((item) => (
          <NavRailButton key={item.to} item={item.to === '/messages' ? { ...item, badge: unreadMessages } : item} />
        ))}
      </div>
      <div className="flex flex-col items-center gap-1.5">
        {BOTTOM_ITEMS.map((item) => (
          <NavRailButton key={item.to} item={item} />
        ))}
      </div>
    </nav>
  );
}