import { useAuthStore } from '@/stores/authStore';
import type { UserRole } from '@/types';
import { Shield, Users, GraduationCap, ChevronRight } from 'lucide-react';

interface RoleCardProps {
  role: UserRole;
  title: string;
  subtitle: string;
  icon: React.ReactNode;
  gradient: string;
  onSelect: (role: UserRole) => void;
}

function RoleCard({ title, subtitle, icon, gradient, onSelect }: RoleCardProps & { onSelect: () => void }) {
  return (
    <button
      onClick={onSelect}
      className="w-full bg-white rounded-2xl p-5 card-shadow flex items-center gap-4 text-left active:scale-[0.97] transition-all duration-200 hover:card-shadow-hover group"
    >
      <div className={`w-14 h-14 ${gradient} rounded-2xl flex items-center justify-center text-white shadow-lg flex-shrink-0`}>
        {icon}
      </div>
      <div className="flex-1 min-w-0">
        <h3 className="text-base font-bold text-gray-900">{title}</h3>
        <p className="text-xs text-gray-400 mt-0.5">{subtitle}</p>
      </div>
      <ChevronRight className="w-5 h-5 text-gray-300 group-hover:text-orange-500 transition-colors" />
    </button>
  );
}

interface RoleSelectScreenProps {
  onSelectRole: (role: UserRole) => void;
}

export default function RoleSelectScreen({ onSelectRole }: RoleSelectScreenProps) {
  const roles: { role: UserRole; title: string; subtitle: string; icon: React.ReactNode; gradient: string }[] = [
    {
      role: 'admin',
      title: 'Admin Login',
      subtitle: 'Full access to all features',
      icon: <Shield className="w-7 h-7" />,
      gradient: 'brand-gradient',
    },
    {
      role: 'assistant',
      title: 'Assistant Coach',
      subtitle: 'Attendance, timing & students',
      icon: <Users className="w-7 h-7" />,
      gradient: 'bg-gradient-to-br from-blue-500 to-blue-700',
    },
    {
      role: 'student',
      title: 'Student Login',
      subtitle: 'View your progress & timings',
      icon: <GraduationCap className="w-7 h-7" />,
      gradient: 'bg-gradient-to-br from-emerald-500 to-emerald-700',
    },
  ];

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center px-6 py-12">
      <div className="w-full max-w-sm">
        {/* Logo */}
        <div className="text-center mb-10">
          <img src="/logo.jpg" alt="SkatePro Academy" className="w-24 h-auto mx-auto rounded-2xl shadow-xl mb-5" />
          <h1 className="text-2xl font-extrabold text-gray-900">SkatePro Academy</h1>
          <p className="text-sm text-gray-400 mt-1.5">Choose your login portal</p>
        </div>

        {/* Role Cards */}
        <div className="space-y-4">
          {roles.map((r) => (
            <RoleCard
              key={r.role}
              role={r.role}
              title={r.title}
              subtitle={r.subtitle}
              icon={r.icon}
              gradient={r.gradient}
              onSelect={() => onSelectRole(r.role)}
            />
          ))}
        </div>

        {/* Footer */}
        <p className="text-center text-xs text-gray-300 mt-10">Powered by Sandbox&apos;s Innovation</p>
      </div>
    </div>
  );
}
