'use client';

import { useRouter } from 'next/navigation';
import { Shield, Footprints } from 'lucide-react';
import { useRequireAuth } from '@/lib/auth';

export default function RolePage() {
  const { user, isLoading } = useRequireAuth();
  const router = useRouter();

  if (isLoading || !user) return <div className="min-h-screen bg-paper" />;

  // If not actually dual-role, route them straight through
  if (!user.isCaptain) {
    router.replace('/volunteer');
    return null;
  }
  if (!user.isVolunteer) {
    router.replace('/captain');
    return null;
  }

  return (
    <div className="min-h-screen bg-paper p-6 flex flex-col">
      <div className="text-center pt-12 pb-8 space-y-2">
        <div className="text-sm uppercase tracking-widest text-ink-400">Welcome back</div>
        <div className="font-display text-3xl text-ink">{user.fullName}</div>
        <div className="saffron-rule mx-auto mt-3" />
      </div>

      <div className="flex-1 flex flex-col justify-center max-w-sm mx-auto w-full space-y-4">
        <button
          onClick={() => router.push('/captain')}
          className="surface-card p-6 text-left transition-all hover:border-saffron-500 hover:shadow-md group"
        >
          <Shield className="w-7 h-7 text-saffron-600 mb-4" strokeWidth={1.5} />
          <div className="font-display text-2xl text-ink mb-1">Captain Mode</div>
          <div className="text-sm text-ink-400">
            Plan vihars, allocate volunteers, oversee the city
          </div>
        </button>

        <button
          onClick={() => router.push('/volunteer')}
          className="surface-card p-6 text-left transition-all hover:border-saffron-500 hover:shadow-md group"
        >
          <Footprints className="w-7 h-7 text-moss-700 mb-4" strokeWidth={1.5} />
          <div className="font-display text-2xl text-ink mb-1">Volunteer Mode</div>
          <div className="text-sm text-ink-400">
            See your allocations, check in, walk with the saints
          </div>
        </button>
      </div>

      <div className="text-center text-xs text-ink-400 pb-4">
        Switch anytime from your profile
      </div>
    </div>
  );
}
