SkateSpots/src/pages/TourDetailPage.tsx

import { useSeoMeta } from '@unhead/react';
import { useParams, Link, useNavigate } from 'react-router-dom';
import { Layout } from '@/components/Layout';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';
import { useTour } from '@/hooks/useTours';
import { useAuthor } from '@/hooks/useAuthor';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { genUserName } from '@/lib/genUserName';
import { TOUR_SKILL_LEVELS, TOUR_SPOT_TYPES, SKATE_TOUR_KIND } from '@/lib/types';
import { ZapButton } from '@/components/ZapButton';
import { ProBadge } from '@/components/ProBadge';
import {
  ArrowLeft,
  Route,
  MapPin,
  Clock,
  Users,
  Zap,
  Globe,
  MessageCircle,
  Calendar,
  Star,
  Share2,
  Flag,
  Store,
  Percent,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { SponsorSlot } from '@/components/SponsorSlot';

export default function TourDetailPage() {
  const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
  const navigate = useNavigate();
  const { user } = useCurrentUser();
  const { data: tour, isLoading, error } = useTour(identifier || '', pubkey);
  const author = useAuthor(tour?.pubkey || '');
  const metadata = author.data?.metadata;
  const guideName = metadata?.name ?? genUserName(tour?.pubkey || '');

  useSeoMeta({
    title: tour ? `${tour.title} - Local Tour - SkateSpots` : 'Local Tour - SkateSpots',
    description: tour?.description || 'Discover hidden skate spots with a local guide',
  });

  const handleBookTour = () => {
    if (!tour) return;
    // Navigate to messages/DM with the guide
    // For now, navigate to messages page - in future can open DM composer
    navigate(`/messages?to=${tour.pubkey}`);
  };

  const handleShare = async () => {
    if (!tour) return;
    const url = window.location.href;
    if (navigator.share) {
      try {
        await navigator.share({
          title: tour.title,
          text: `Check out this local skate tour: ${tour.title}`,
          url,
        });
      } catch {
        // User cancelled or error
      }
    } else {
      await navigator.clipboard.writeText(url);
    }
  };

  if (isLoading) {
    return (
      <Layout>
        <div className="container px-4 py-6 max-w-3xl">
          <Skeleton className="h-6 w-32 mb-6" />
          <Card className="bg-black/90 border-cyan-500/30">
            <CardHeader>
              <Skeleton className="h-8 w-3/4 mb-2" />
              <Skeleton className="h-4 w-1/2" />
            </CardHeader>
            <CardContent className="space-y-6">
              <Skeleton className="h-48 w-full rounded-lg" />
              <div className="space-y-3">
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-3/4" />
              </div>
            </CardContent>
          </Card>
        </div>
      </Layout>
    );
  }

  if (error || !tour) {
    return (
      <Layout>
        <div className="container px-4 py-12">
          <Card className="max-w-xl mx-auto border-dashed">
            <CardContent className="py-12 text-center">
              <Route className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
              <h2 className="text-xl font-bold mb-2">Tour Not Found</h2>
              <p className="text-muted-foreground mb-6">
                This tour may have been removed or doesn't exist.
              </p>
              <Link to="/map">
                <Button variant="outline">
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Back to Map
                </Button>
              </Link>
            </CardContent>
          </Card>
        </div>
      </Layout>
    );
  }

  const skillInfo = tour.skillLevel ? TOUR_SKILL_LEVELS[tour.skillLevel as keyof typeof TOUR_SKILL_LEVELS] : null;

  return (
    <Layout>
      <div className="container px-4 py-6 max-w-3xl">
        {/* Back link */}
        <Link to="/map" className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-6">
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back to Map
        </Link>

        {/* Main card */}
        <Card className="bg-black/90 border-2 border-cyan-500/30 overflow-hidden">
          {/* Tour image */}
          {tour.image && (
            <div className="relative h-48 sm:h-64 bg-gradient-to-br from-cyan-500/20 to-cyan-900/20">
              <img
                src={tour.image}
                alt={tour.title}
                className="w-full h-full object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
            </div>
          )}

          <CardHeader className={cn(tour.image && '-mt-16 relative z-10')}>
            <div className="flex items-start gap-4">
              <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500 to-cyan-600 flex items-center justify-center shadow-lg shadow-cyan-500/25 flex-shrink-0">
                <Route className="h-7 w-7 text-white" />
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 mb-2 flex-wrap">
                  <Badge className="bg-cyan-500/20 text-cyan-300 border-cyan-500/30">
                    LOCAL TOUR
                  </Badge>
                  <ProBadge
                    featuredUntil={tour.featuredUntil}
                    entityCoord={`${SKATE_TOUR_KIND}:${tour.pubkey}:${tour.identifier}`}
                  />
                </div>
                <CardTitle className="text-2xl font-black text-white">
                  {tour.title}
                </CardTitle>
                {tour.location && (
                  <p className="text-gray-400 flex items-center gap-1 mt-1">
                    <MapPin className="h-4 w-4" />
                    {tour.location}
                  </p>
                )}
              </div>
            </div>
          </CardHeader>

          <CardContent className="space-y-6">
            {/* Guide info */}
            <div className="flex items-center justify-between p-4 rounded-xl bg-cyan-500/10 border border-cyan-500/20">
              <div className="flex items-center gap-3">
                <Avatar className="h-12 w-12 border-2 border-cyan-500/50">
                  <AvatarImage src={metadata?.picture} alt={guideName} />
                  <AvatarFallback className="bg-cyan-500/20 text-cyan-400">
                    {guideName.slice(0, 2).toUpperCase()}
                  </AvatarFallback>
                </Avatar>
                <div>
                  <p className="font-bold text-white">{guideName}</p>
                  <p className="text-xs text-cyan-400">Local Guide</p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <ZapButton
                  event={tour.event}
                  variant="ghost"
                  size="sm"
                  className="text-orange-400 hover:text-orange-300 hover:bg-orange-500/10"
                />
                <Link to={`/npub1${tour.pubkey.slice(0, 8)}...`}>
                  <Button variant="outline" size="sm" className="border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10">
                    View Profile
                  </Button>
                </Link>
              </div>
            </div>

            {/* Description */}
            {tour.description && (
              <div>
                <h3 className="font-bold text-white mb-2">About This Tour</h3>
                <p className="text-gray-300 whitespace-pre-wrap">{tour.description}</p>
              </div>
            )}

            {/* Tour details grid */}
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
              {tour.duration && (
                <div className="p-3 rounded-lg bg-gray-900/50 border border-gray-800">
                  <div className="flex items-center gap-2 text-gray-400 mb-1">
                    <Clock className="h-4 w-4" />
                    <span className="text-xs">Duration</span>
                  </div>
                  <p className="font-bold text-white">{tour.duration} hours</p>
                </div>
              )}
              
              {tour.maxGroupSize && (
                <div className="p-3 rounded-lg bg-gray-900/50 border border-gray-800">
                  <div className="flex items-center gap-2 text-gray-400 mb-1">
                    <Users className="h-4 w-4" />
                    <span className="text-xs">Max Group</span>
                  </div>
                  <p className="font-bold text-white">{tour.maxGroupSize} people</p>
                </div>
              )}

              {skillInfo && (
                <div className="p-3 rounded-lg bg-gray-900/50 border border-gray-800">
                  <div className="flex items-center gap-2 text-gray-400 mb-1">
                    <Star className="h-4 w-4" />
                    <span className="text-xs">Skill Level</span>
                  </div>
                  <p className="font-bold text-white flex items-center gap-1">
                    <span>{skillInfo.emoji}</span>
                    {skillInfo.label}
                  </p>
                </div>
              )}

              {tour.price && (
                <div className="p-3 rounded-lg bg-orange-500/10 border border-orange-500/30">
                  <div className="flex items-center gap-2 text-orange-400 mb-1">
                    <Zap className="h-4 w-4" />
                    <span className="text-xs">Price</span>
                  </div>
                  <p className="font-bold text-orange-400">{tour.price.toLocaleString()} sats</p>
                  <p className="text-xs text-gray-500">per person</p>
                </div>
              )}

              {tour.availability && (
                <div className="p-3 rounded-lg bg-gray-900/50 border border-gray-800">
                  <div className="flex items-center gap-2 text-gray-400 mb-1">
                    <Calendar className="h-4 w-4" />
                    <span className="text-xs">Availability</span>
                  </div>
                  <p className="font-bold text-white text-sm">{tour.availability}</p>
                </div>
              )}

              {tour.languages && tour.languages.length > 0 && (
                <div className="p-3 rounded-lg bg-gray-900/50 border border-gray-800">
                  <div className="flex items-center gap-2 text-gray-400 mb-1">
                    <Globe className="h-4 w-4" />
                    <span className="text-xs">Languages</span>
                  </div>
                  <p className="font-bold text-white text-sm">
                    {tour.languages.map(l => l.toUpperCase()).join(', ')}
                  </p>
                </div>
              )}
            </div>

            {/* Spot types */}
            {tour.spotTypes.length > 0 && (
              <div>
                <h3 className="font-bold text-white mb-2">Types of Spots</h3>
                <div className="flex flex-wrap gap-2">
                  {tour.spotTypes.map((type) => {
                    const typeInfo = TOUR_SPOT_TYPES[type as keyof typeof TOUR_SPOT_TYPES];
                    return (
                      <Badge
                        key={type}
                        variant="outline"
                        className="border-cyan-500/30 text-cyan-300"
                      >
                        {typeInfo?.emoji || '🛹'} {typeInfo?.label || type}
                      </Badge>
                    );
                  })}
                </div>
              </div>
            )}

            {/* Partner Shop Discount */}
            {tour.shopDiscount && tour.shopName && (
              <div className="p-4 rounded-xl bg-[#ccff00]/10 border border-[#ccff00]/30">
                <div className="flex items-start gap-3">
                  <div className="w-12 h-12 rounded-lg bg-[#ccff00]/20 flex items-center justify-center flex-shrink-0">
                    <Store className="h-6 w-6 text-[#ccff00]" />
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <Percent className="h-4 w-4 text-[#ccff00]" />
                      <span className="font-bold text-[#ccff00]">Partner Shop Discount</span>
                    </div>
                    <p className="text-white font-bold text-lg mb-1">
                      {tour.shopDiscount}% OFF at {tour.shopName}
                    </p>
                    <p className="text-xs text-gray-400">
                      Book this tour to receive a discount at the partner skate shop. Show your booking confirmation to the shop staff.
                    </p>
                  </div>
                </div>
              </div>
            )}

            {/* Tour Sponsors - invisible placeholder until sponsors are added */}
            <SponsorSlot 
              size="card" 
              sponsors={tour.sponsors} 
              title="Tour Sponsors"
              className="mt-4"
            />

            {/* Meeting point */}
            {tour.meetingPoint && (
              <div className="p-4 rounded-xl bg-cyan-500/10 border border-cyan-500/20">
                <div className="flex items-center gap-2 text-cyan-400 mb-2">
                  <Flag className="h-5 w-5" />
                  <span className="font-bold">Meeting Point</span>
                </div>
                <p className="text-white">{tour.meetingPoint}</p>
                {tour.meetingPointCoords && (
                  <p className="text-xs text-gray-500 mt-1">
                    {tour.meetingPointCoords.lat.toFixed(4)}, {tour.meetingPointCoords.lon.toFixed(4)}
                  </p>
                )}
              </div>
            )}

            {/* Actions */}
            <div className="flex flex-col sm:flex-row gap-3 pt-4 border-t border-gray-800">
              <Button
                onClick={handleBookTour}
                className="flex-1 bg-cyan-500 hover:bg-cyan-600 text-white font-bold"
                disabled={!user}
              >
                <MessageCircle className="h-4 w-4 mr-2" />
                {user ? 'Contact Guide to Book' : 'Login to Book'}
              </Button>
              <Button
                variant="outline"
                onClick={handleShare}
                className="border-gray-700 hover:bg-gray-800"
              >
                <Share2 className="h-4 w-4 mr-2" />
                Share
              </Button>
            </div>

            {!user && (
              <p className="text-center text-sm text-gray-500">
                Login to contact the guide and book this tour
              </p>
            )}
          </CardContent>
        </Card>
      </div>
    </Layout>
  );
}