import { CheckCircle2, ChevronDown, Eye, LogIn } from 'lucide-react';
import type { GuestBannerProps } from '@/business/app-shell/types';

export function GuestBanner({
  guestPreviewRole,
  guestPreviewRoles,
  currentGuestPreviewRole,
  showGuestRolePicker,
  setGuestPreviewRole,
  setShowGuestRolePicker,
  onSignInClick,
}: GuestBannerProps) {
  return (
    <div className="max-w-7xl mx-auto mb-5">
      <div className="bg-gradient-to-r from-violet-600/10 via-amber-500/10 to-emerald-500/10 rounded-2xl border border-violet-500/20 px-4 py-3 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
        <div className="flex items-center gap-3">
          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-violet-500/20 to-amber-500/20 border border-violet-500/30 flex items-center justify-center flex-shrink-0">
            <Eye size={18} className="text-violet-400" />
          </div>
          <div>
            <p className="text-sm font-semibold text-white">You're browsing as a Guest</p>
            <p className="text-xs text-slate-400">
              Explore all modules freely. Sign in to save your progress and get a personalized experience.
            </p>
          </div>
        </div>
        <div className="flex items-center gap-2 flex-shrink-0">
          <div className="relative">
            <button
              onClick={() => setShowGuestRolePicker(!showGuestRolePicker)}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold border transition-all ${currentGuestPreviewRole.color}`}
            >
              <span>View as: {currentGuestPreviewRole.label}</span>
              <ChevronDown size={12} />
            </button>
            {showGuestRolePicker && (
              <>
                <div className="fixed inset-0 z-30" onClick={() => setShowGuestRolePicker(false)} />
                <div className="absolute right-0 top-full mt-1.5 w-48 bg-slate-800 rounded-xl shadow-2xl shadow-black/40 border border-slate-700/50 py-1.5 z-40">
                  <p className="px-3 py-1.5 text-[10px] text-slate-500 uppercase tracking-wider font-semibold">
                    Switch Guest View
                  </p>
                  {guestPreviewRoles.map((role) => (
                    <button
                      key={role.value}
                      onClick={() => {
                        setGuestPreviewRole(role.value);
                        setShowGuestRolePicker(false);
                      }}
                      className={`w-full text-left px-3 py-2 text-sm transition-colors flex items-center justify-between ${
                        guestPreviewRole === role.value
                          ? 'bg-violet-500/10 text-white'
                          : 'text-slate-300 hover:bg-slate-700/50'
                      }`}
                    >
                      <span className="font-medium">{role.label}</span>
                      {guestPreviewRole === role.value && <CheckCircle2 size={14} className="text-violet-400" />}
                    </button>
                  ))}
                </div>
              </>
            )}
          </div>

          <button
            onClick={onSignInClick}
            className="flex items-center gap-1.5 px-4 py-1.5 bg-gradient-to-r from-violet-500 to-amber-500 hover:from-violet-600 hover:to-amber-600 text-white font-semibold rounded-xl transition-all duration-200 shadow-lg shadow-violet-500/25 hover:shadow-violet-500/40 text-xs"
          >
            <LogIn size={14} />
            Sign In
          </button>
        </div>
      </div>
    </div>
  );
}
