'use client';

import { useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { useMe } from '@/lib/auth';
import { Card, CardContent } from '@/components/ui/card';

export default function ViharDeepLink() {
  const params = useParams<{ id: string }>();
  const router = useRouter();
  const { data: user, isLoading, error } = useMe();

  useEffect(() => {
    if (isLoading) return;
    if (error || !user) {
      router.replace(`/login?next=/v/${params.id}`);
      return;
    }
    // Route by role - the destination page does the membership check.
    if (user.isCaptain) {
      router.replace(`/captain/vihars/${params.id}`);
    } else {
      router.replace(`/volunteer/vihars/${params.id}`);
    }
  }, [user, isLoading, error, router, params.id]);

  return (
    <div className="min-h-screen bg-paper flex items-center justify-center p-4">
      <Card className="max-w-sm w-full">
        <CardContent className="py-10 text-center space-y-2">
          <div className="font-display text-2xl">Opening vihar…</div>
          <div className="text-sm text-ink-400">Vihar #{params.id}</div>
        </CardContent>
      </Card>
    </div>
  );
}