import { NavLink } from 'react-router-dom';
import { useAuthStore } from '../stores/authStore';
import { getNavigationForRole } from './navigation';

const iconPaths = {
  dashboard: 'M3 13.5 12 4l9 9M5.25 11.25V20h13.5v-8.75',
  members: 'M16 11a4 4 0 1 0-8 0 4 4 0 0 0 8 0ZM3.5 20a6.5 6.5 0 0 1 13 0M18 8a3 3 0 1 1 0 6M18.5 20a5.5 5.5 0 0 0-2.2-4.4',
  deceased: 'M12 8.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Zm0 11.5c-3.38 0-6.5 1.69-6.5 4.75v.75h13v-.75c0-3.06-3.12-4.75-6.5-4.75Z',
  beneficiaries: 'M12 21s-6.75-4.35-9-9.3C1.5 7.8 4.2 4.5 8.1 4.5c1.7 0 3 .8 3.9 2 0-.1.1-.1.1-.2.9-1.1 2.2-1.8 3.8-1.8 3.9 0 6.6 3.3 5.1 7.2-2.25 4.95-9 9.3-9 9.3Z',
  payments: 'M3 7.5h18v9H3zM3 10.5h18M7.5 15h3',
  receipt: 'M9 14.25l1.5 1.5 3-3.75M12 3c-4.2 0-7.5 3.3-7.5 7.5S7.8 18 12 18s7.5-3.3 7.5-7.5S16.2 3 12 3zM8.25 7.5h7.5M8.25 10.5h7.5',
  claims: 'M7.5 4.5h9M7.5 8.25h9M6 3h12A1.5 1.5 0 0 1 19.5 4.5v15A1.5 1.5 0 0 1 18 21H6A1.5 1.5 0 0 1 4.5 19.5v-15A1.5 1.5 0 0 1 6 3Zm2.25 10.5 1.5 1.5 3.75-3.75',
  reports: 'M6.75 4.5h10.5A1.5 1.5 0 0 1 18.75 6v12a1.5 1.5 0 0 1-1.5 1.5H6.75A1.5 1.5 0 0 1 5.25 18V6a1.5 1.5 0 0 1 1.5-1.5Zm2.25 3.75h6m-6 3h6m-6 3h3',
};

function NavIcon({ name, className = 'h-5 w-5' }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className={className}>
      <path strokeLinecap="round" strokeLinejoin="round" d={iconPaths[name]} />
    </svg>
  );
}

function NavItem({ item, mobile = false }) {
  if (item.disabled) {
    return (
      <div
        title="Coming soon"
        className={
          mobile
            ? 'flex min-w-[72px] cursor-not-allowed flex-col items-center gap-1 rounded-2xl px-3 py-2 text-[11px] font-medium opacity-40'
            : 'group flex cursor-not-allowed items-center gap-3 rounded-2xl px-4 py-3 text-sm font-medium opacity-40'
        }
      >
        <span
          className={
            mobile
              ? 'flex h-9 w-9 items-center justify-center rounded-2xl bg-slate-900/10'
              : 'flex h-10 w-10 items-center justify-center rounded-2xl bg-white/10'
          }
        >
          <NavIcon name={item.icon} className={mobile ? 'h-4.5 w-4.5' : 'h-5 w-5'} />
        </span>
        <span className={mobile ? 'text-center leading-tight text-white/60' : 'text-white/60'}>
          {item.label}
        </span>
        {!mobile && (
          <span className="ml-auto rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-semibold text-white/50">
            Coming soon
          </span>
        )}
      </div>
    );
  }

  return (
    <NavLink
      to={item.path}
      end={item.path === '/'}
      className={({ isActive }) =>
        mobile
          ? `flex min-w-[72px] flex-col items-center gap-1 rounded-2xl px-3 py-2 text-[11px] font-medium transition-all ${
              isActive
                ? 'bg-white text-slate-900 shadow-lg'
                : 'text-white/70 hover:bg-white/10 hover:text-white'
            }`
          : `group flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-medium transition-all ${
              isActive
                ? 'bg-white text-slate-900 shadow-lg shadow-cyan-950/10'
                : 'text-white/72 hover:bg-white/10 hover:text-white'
            }`
      }
    >
      <span
        className={
          mobile
            ? 'flex h-9 w-9 items-center justify-center rounded-2xl bg-slate-900/10'
            : 'flex h-10 w-10 items-center justify-center rounded-2xl bg-white/10 transition-colors group-hover:bg-white/15'
        }
      >
        <NavIcon name={item.icon} className={mobile ? 'h-4.5 w-4.5' : 'h-5 w-5'} />
      </span>
      <span className={mobile ? 'text-center leading-tight' : ''}>{item.label}</span>
    </NavLink>
  );
}

export default function Sidebar() {
  const { user } = useAuthStore();
  const links = getNavigationForRole(user?.role);

  return (
    <>
      <aside className="app-sidebar hidden lg:flex lg:w-80 lg:flex-col">
        <div className="mx-5 my-5 flex-1 rounded-[32px] border border-white/12 bg-[linear-gradient(180deg,rgba(14,116,144,0.96),rgba(15,23,42,0.98))] p-5 text-white shadow-[0_32px_80px_rgba(15,23,42,0.32)]">
          <div className="rounded-[28px] border border-white/12 bg-white/8 p-5 backdrop-blur">
            <p className="text-xs font-semibold uppercase tracking-[0.28em] text-cyan-100/80">AWTF Portal</p>
            <h2 className="mt-3 text-2xl font-semibold leading-tight">Navigate your workspace with clarity.</h2>
            <p className="mt-3 text-sm leading-6 text-slate-200/78">
              Quick access to member records, benefits, payments, and claims in one place.
            </p>
          </div>

          <nav className="mt-6 space-y-2">
            {links.map((item) => (
              <NavItem key={item.path} item={item} />
            ))}
          </nav>

          <div className="mt-auto rounded-[28px] border border-white/12 bg-white/8 p-5 backdrop-blur">
            <p className="text-xs uppercase tracking-[0.24em] text-cyan-100/70">Signed In As</p>
            <p className="mt-2 text-lg font-semibold">{user?.full_name || user?.name || 'AWTF User'}</p>
            <p className="mt-1 text-sm capitalize text-slate-200/72">{user?.role || 'member'}</p>
          </div>
        </div>
      </aside>

      <nav className="mobile-bottom-nav fixed inset-x-0 bottom-0 z-40 border-t border-white/12 bg-[linear-gradient(90deg,rgba(14,116,144,0.96),rgba(15,23,42,0.98))] px-3 pb-[calc(env(safe-area-inset-bottom)+0.75rem)] pt-3 shadow-[0_-20px_50px_rgba(15,23,42,0.35)] lg:hidden">
        <div className="mx-auto flex max-w-xl items-center justify-between gap-2">
          {links.map((item) => (
            <NavItem key={item.path} item={item} mobile />
          ))}
        </div>
      </nav>
    </>
  );
}
