import { useAuthStore } from '@/stores/authStore';
import { useUIStore } from '@/stores/uiStore';
import { Avatar } from '@/components/common';
import { User, Bell, Settings, HelpCircle, LogOut, Zap, Timer } from 'lucide-react';

interface MenuItem {
  icon: React.ElementType;
  label: string;
  color: string;
  bg: string;
  action: string;
}

const studentMenu: MenuItem[] = [
  { icon: User, label: 'My Profile', color: 'text-orange-500', bg: 'bg-orange-50', action: 'dashboard' },
  { icon: Zap, label: 'My Races', color: 'text-orange-500', bg: 'bg-orange-50', action: 'sprintRaceList' },
  { icon: Timer, label: 'My Timings', color: 'text-emerald-500', bg: 'bg-emerald-50', action: 'timingHistory' },
  { icon: Bell, label: 'Messages', color: 'text-blue-500', bg: 'bg-blue-50', action: 'studentMessages' },
  { icon: Settings, label: 'Settings', color: 'text-gray-500', bg: 'bg-gray-50', action: 'settings' },
  { icon: HelpCircle, label: 'Help', color: 'text-blue-500', bg: 'bg-blue-50', action: 'help' },
  { icon: LogOut, label: 'Logout', color: 'text-red-500', bg: 'bg-red-50', action: 'logout' },
];

export default function StudentMoreMenu() {
  const { user, logout } = useAuthStore();
  const { navigateTo, setBottomSheet, bottomSheet } = useUIStore();

  const handleAction = (action: string) => {
    if (action === 'logout') {
      setBottomSheet({ isOpen: true, title: 'Logout', content: 'logout' });
    } else {
      navigateTo(action);
    }
  };

  return (
    <div className="px-4 pt-4 pb-4">
      {user && (
        <div className="bg-white rounded-2xl p-5 card-shadow flex items-center gap-4 mb-6">
          <Avatar name={user.name} size="lg" />
          <div className="flex-1">
            <h3 className="text-base font-bold text-gray-900">{user.name}</h3>
            <span className="inline-block mt-1 px-2.5 py-0.5 bg-purple-100 text-purple-600 text-[10px] font-semibold rounded-full uppercase">
              Student
            </span>
            <p className="text-[10px] text-gray-400 mt-1">SK001 &bull; Beginner</p>
          </div>
        </div>
      )}

      <div className="bg-purple-50 border border-purple-100 rounded-xl p-3 mb-4">
        <p className="text-xs text-purple-700 font-medium">Your Portal</p>
        <p className="text-[10px] text-purple-500 mt-0.5">View your attendance, timings, events, and coach messages</p>
      </div>

      <div className="grid grid-cols-3 gap-3">
        {studentMenu.map((item, i) => {
          const Icon = item.icon;
          return (
            <button key={i} onClick={() => handleAction(item.action)}
              className="bg-white rounded-xl p-4 card-shadow flex flex-col items-center gap-2.5 active:scale-95 transition-transform">
              <div className={`w-11 h-11 ${item.bg} rounded-xl flex items-center justify-center`}>
                <Icon className={`w-5 h-5 ${item.color}`} />
              </div>
              <span className="text-[11px] font-semibold text-gray-700">{item.label}</span>
            </button>
          );
        })}
      </div>

      {bottomSheet?.isOpen && bottomSheet.content === 'logout' && (
        <div className="fixed inset-0 z-[60] flex items-end">
          <div className="absolute inset-0 bg-black/40" onClick={() => setBottomSheet(null)} />
          <div className="relative bg-white rounded-t-2xl w-full max-w-lg mx-auto animate-slide-up p-6 pb-10">
            <div className="w-10 h-1 bg-gray-300 rounded-full mx-auto mb-5" />
            <h3 className="text-lg font-bold text-gray-900 text-center">Logout?</h3>
            <p className="text-sm text-gray-500 text-center mt-1">Are you sure you want to logout?</p>
            <div className="flex gap-3 mt-6">
              <button onClick={() => setBottomSheet(null)} className="flex-1 py-3 border border-gray-200 rounded-xl text-sm font-semibold text-gray-600">Cancel</button>
              <button onClick={() => { logout(); setBottomSheet(null); }} className="flex-1 py-3 bg-red-500 text-white rounded-xl text-sm font-semibold">Logout</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
