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 { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';
import { ZapButton } from '@/components/ZapButton';
import { ClinkPayButton } from '@/components/ClinkPayButton';
import { CollectiveMembers } from '@/components/CollectiveMembers';
import { RequestToJoinCollective } from '@/components/RequestToJoinCollective';
import { ConfirmMembershipCard } from '@/components/ConfirmMembershipCard';
import { VouchCard } from '@/components/VouchCard';
import { LinkedCrewCard } from '@/components/CrossLinkCards';
import { TrustBadge } from '@/components/TrustBadge';
import { useLabProfile } from '@/hooks/useLabProfiles';
import { useGigs } from '@/hooks/useGigs';
import { useAuthor } from '@/hooks/useAuthor';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { DeleteEntityDialog } from '@/components/DeleteEntityDialog';
import { isAdminPubkey } from '@/lib/admins';
import { genUserName } from '@/lib/genUserName';
import { COACH_SKILL_LABELS, COACH_SKILL_DESCRIPTIONS, FILMING_SERVICE_LABELS, FILMING_SERVICE_DESCRIPTIONS, FILMING_SKILL_LABELS, FILMING_SKILL_DESCRIPTIONS, EDITOR_SERVICE_LABELS, EDITOR_SERVICE_DESCRIPTIONS, EDITOR_SKILL_LABELS, EDITOR_SKILL_DESCRIPTIONS, PHOTO_SERVICE_LABELS, PHOTO_SERVICE_DESCRIPTIONS, PHOTO_CAMERA_LABELS, PHOTO_LENS_LABELS, PHOTO_LIGHTING_LABELS, PHOTO_SUPPORT_LABELS, PHOTO_STYLE_LABELS, BUILDER_SERVICE_LABELS, BUILDER_SERVICE_DESCRIPTIONS, BUILDER_SKILL_LABELS, BUILDER_SCALE_LABELS, ARTIST_SERVICE_LABELS, ARTIST_SERVICE_DESCRIPTIONS, ARTIST_MEDIUM_LABELS, ARTIST_TOOL_LABELS, GRAFFITI_STYLE_LABELS, GRAFFITI_STYLE_DESCRIPTIONS, GRAFFITI_MEDIUM_LABELS, GRAFFITI_CONTEXT_LABELS, TATTOO_STYLE_LABELS, TATTOO_STYLE_DESCRIPTIONS, TATTOO_METHOD_LABELS, TRAINER_FOCUS_LABELS, TRAINER_FOCUS_DESCRIPTIONS, TRAINER_INJURY_LABELS, TRAINER_CREDENTIAL_LABELS, MUSICIAN_GENRE_LABELS, MUSICIAN_INSTRUMENT_LABELS, JUDGE_FORMAT_LABELS, JUDGE_SPECIALTY_LABELS, JUDGE_LEVEL_LABELS, SKATE_COACH_KIND, SKATE_FILMER_KIND, SKATE_EDITOR_KIND, SKATE_PHOTOGRAPHER_KIND, SKATE_BUILDER_KIND, SKATE_ARTIST_KIND, SKATE_GRAFFITI_KIND, SKATE_TATTOO_KIND, SKATE_TRAINER_KIND, SKATE_MUSICIAN_KIND, SKATE_JUDGE_KIND } from '@/lib/types';
import { sanitizeUrl, sanitizeTel, sanitizeEmail, urlDomain } from '@/lib/sanitizeUrl';
import { OfficialBadge } from '@/components/OfficialBadge';
import { ProBadge } from '@/components/ProBadge';
import NotFound from './NotFound';
import {
  GraduationCap,
  MapPin,
  ArrowLeft,
  MessageCircle,
  Mail,
  Phone,
  Globe,
  Instagram,
  Calendar,
  Video,
  Camera,
  Scissors,
  Aperture,
  Users,
  HardHat,
  Palette,
  SprayCan,
  Brush,
  Dumbbell,
  Music,
  Gavel,
} from 'lucide-react';
import { nip19 } from 'nostr-tools';

function CoachDetailSkeleton() {
  return (
    <Layout>
      <div className="container px-4 py-8 max-w-4xl">
        <Skeleton className="h-6 w-32 mb-6" />
        <div className="grid md:grid-cols-3 gap-6">
          <div className="md:col-span-2 space-y-6">
            <Card>
              <CardContent className="pt-6">
                <div className="flex items-start gap-4">
                  <Skeleton className="h-20 w-20 rounded-full" />
                  <div className="flex-1 space-y-2">
                    <Skeleton className="h-8 w-48" />
                    <Skeleton className="h-4 w-32" />
                  </div>
                </div>
                <Skeleton className="h-24 w-full mt-4" />
              </CardContent>
            </Card>
          </div>
          <div>
            <Skeleton className="h-64 w-full" />
          </div>
        </div>
      </div>
    </Layout>
  );
}

export default function CoachDetailPage() {
  const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
  const { data: profile, isLoading, error } = useLabProfile(identifier || '', pubkey);
  const author = useAuthor(profile?.pubkey);
  const { user } = useCurrentUser();
  const navigate = useNavigate();

  // Gigs — only relevant for musicians. The hook is disabled for other types.
  const { data: gigs = [] } = useGigs(
    profile?.profileType === 'musician' ? profile.pubkey : undefined,
    profile?.profileType === 'musician' ? profile.identifier : undefined,
  );

  const isCoach = profile?.profileType === 'coach';
  const isFilmer = profile?.profileType === 'filmer';
  const isEditor = profile?.profileType === 'editor';
  const isPhotographer = profile?.profileType === 'photographer';
  const isBuilder = profile?.profileType === 'builder';
  const isArtist = profile?.profileType === 'artist';
  const isGraffiti = profile?.profileType === 'graffiti';
  const isTattoo = profile?.profileType === 'tattoo';
  const isTrainer = profile?.profileType === 'trainer';
  const isMusician = profile?.profileType === 'musician';

  useSeoMeta({
    title: profile ? `${profile.title} - SkateSpots` : 'Profile - SkateSpots',
    description: profile?.bio || 'View profile.',
  });

  const metadata = author.data?.metadata;
  const displayName = metadata?.name ?? genUserName(profile?.pubkey || '');

  if (isLoading) {
    return <CoachDetailSkeleton />;
  }

  if (error || !profile) {
    return <NotFound />;
  }

  const npub = nip19.npubEncode(profile.pubkey);

  // Per-type accent (text, border, bg, ring) — keeps the detail page on-brand
  const ACCENTS: Record<string, { text: string; bg: string; border: string; hover: string }> = {
    coach: { text: 'text-[#ff0040]', bg: 'bg-[#ff0040]', border: 'border-[#ff0040]/30', hover: 'hover:bg-[#ff0040]/10 border-[#ff0040]' },
    filmer: { text: 'text-orange-500', bg: 'bg-orange-500', border: 'border-orange-500/30', hover: 'hover:bg-orange-500/10 border-orange-500' },
    photographer: { text: 'text-indigo-400', bg: 'bg-indigo-600', border: 'border-indigo-500/30', hover: 'hover:bg-indigo-500/10 border-indigo-500' },
    builder: { text: 'text-amber-400', bg: 'bg-amber-500', border: 'border-amber-500/30', hover: 'hover:bg-amber-500/10 border-amber-500' },
    editor: { text: 'text-purple-400', bg: 'bg-purple-600', border: 'border-purple-500/30', hover: 'hover:bg-purple-500/10 border-purple-500' },
    artist: { text: 'text-fuchsia-400', bg: 'bg-fuchsia-600', border: 'border-fuchsia-500/30', hover: 'hover:bg-fuchsia-500/10 border-fuchsia-500' },
    graffiti: { text: 'text-lime-400', bg: 'bg-lime-500', border: 'border-lime-500/30', hover: 'hover:bg-lime-500/10 border-lime-500' },
    tattoo: { text: 'text-rose-400', bg: 'bg-rose-600', border: 'border-rose-500/30', hover: 'hover:bg-rose-500/10 border-rose-500' },
    trainer: { text: 'text-emerald-400', bg: 'bg-emerald-600', border: 'border-emerald-500/30', hover: 'hover:bg-emerald-500/10 border-emerald-500' },
    musician: { text: 'text-sky-400', bg: 'bg-sky-500', border: 'border-sky-500/30', hover: 'hover:bg-sky-500/10 border-sky-500' },
    judge: { text: 'text-yellow-400', bg: 'bg-yellow-500', border: 'border-yellow-500/30', hover: 'hover:bg-yellow-500/10 border-yellow-500' },
  };
  const accent = ACCENTS[profile.profileType] ?? ACCENTS.coach;

  // The Lab profile is a union of craft-specific shapes. Craft-specific fields
  // (gear, studio, credentials, instagram, …) only exist on some members, so we
  // read them through a single typed accessor that returns an optional string
  // instead of scattering casts across the JSX. Presence is still gated by the
  // isCoach/isBuilder/… flags before these are shown.
  const pf = profile as unknown as Record<string, unknown>;
  const pget = (key: string): string | undefined => {
    const v = pf[key];
    return typeof v === 'string' && v.length > 0 ? v : undefined;
  };
  const pbool = (key: string): boolean => pf[key] === true;

  const TYPE_ICONS: Record<string, typeof GraduationCap> = {
    coach: GraduationCap, filmer: Video, photographer: Camera, builder: HardHat, editor: Scissors,
    artist: Palette, graffiti: SprayCan, tattoo: Brush, trainer: Dumbbell, musician: Music, judge: Gavel,
  };
  const TypeIcon = TYPE_ICONS[profile.profileType] ?? GraduationCap;

  // Kind for the collective coordinate (for NIP-32 membership attestations)
  const KINDS: Record<string, number> = {
    coach: SKATE_COACH_KIND, filmer: SKATE_FILMER_KIND, editor: SKATE_EDITOR_KIND,
    photographer: SKATE_PHOTOGRAPHER_KIND, builder: SKATE_BUILDER_KIND, artist: SKATE_ARTIST_KIND,
    graffiti: SKATE_GRAFFITI_KIND, tattoo: SKATE_TATTOO_KIND, trainer: SKATE_TRAINER_KIND, musician: SKATE_MUSICIAN_KIND, judge: SKATE_JUDGE_KIND,
  };
  const profileKind = KINDS[profile.profileType] ?? SKATE_COACH_KIND;
  const isCollective = profile.entityType === 'collective' && profile.members.length > 0;

  // Merged label maps per craft for chip resolution
  const LABELS_BY_TYPE: Record<string, Record<string, string>> = {
    coach: COACH_SKILL_LABELS,
    filmer: { ...FILMING_SERVICE_LABELS, ...FILMING_SKILL_LABELS },
    editor: { ...EDITOR_SERVICE_LABELS, ...EDITOR_SKILL_LABELS },
    photographer: { ...PHOTO_SERVICE_LABELS, ...PHOTO_CAMERA_LABELS, ...PHOTO_LENS_LABELS, ...PHOTO_LIGHTING_LABELS, ...PHOTO_SUPPORT_LABELS, ...PHOTO_STYLE_LABELS },
    builder: { ...BUILDER_SERVICE_LABELS, ...BUILDER_SKILL_LABELS, ...BUILDER_SCALE_LABELS },
    artist: { ...ARTIST_SERVICE_LABELS, ...ARTIST_MEDIUM_LABELS, ...ARTIST_TOOL_LABELS },
    graffiti: { ...GRAFFITI_STYLE_LABELS, ...GRAFFITI_MEDIUM_LABELS, ...GRAFFITI_CONTEXT_LABELS },
    tattoo: { ...TATTOO_STYLE_LABELS, ...TATTOO_METHOD_LABELS },
    trainer: { ...TRAINER_FOCUS_LABELS, ...TRAINER_INJURY_LABELS, ...TRAINER_CREDENTIAL_LABELS },
    musician: { ...MUSICIAN_GENRE_LABELS, ...MUSICIAN_INSTRUMENT_LABELS },
    judge: { ...JUDGE_FORMAT_LABELS, ...JUDGE_SPECIALTY_LABELS, ...JUDGE_LEVEL_LABELS },
  };
  const DESCRIPTIONS_BY_TYPE: Record<string, Record<string, string>> = {
    coach: COACH_SKILL_DESCRIPTIONS,
    filmer: { ...FILMING_SERVICE_DESCRIPTIONS, ...FILMING_SKILL_DESCRIPTIONS },
    editor: { ...EDITOR_SERVICE_DESCRIPTIONS, ...EDITOR_SKILL_DESCRIPTIONS },
    photographer: PHOTO_SERVICE_DESCRIPTIONS,
    builder: BUILDER_SERVICE_DESCRIPTIONS,
    artist: ARTIST_SERVICE_DESCRIPTIONS,
    graffiti: GRAFFITI_STYLE_DESCRIPTIONS,
    tattoo: TATTOO_STYLE_DESCRIPTIONS,
    trainer: TRAINER_FOCUS_DESCRIPTIONS,
    musician: {},
    judge: {},
  };

  const getSkillLabel = (skill: string) => LABELS_BY_TYPE[profile.profileType]?.[skill] || skill;
  const getSkillDescription = (skill: string): string | undefined => DESCRIPTIONS_BY_TYPE[profile.profileType]?.[skill];

  const TYPE_NOUNS: Record<string, string> = {
    coach: 'coach', filmer: 'filmer', editor: 'video editor', photographer: 'photographer', builder: 'builder',
    artist: 'artist', graffiti: 'graffiti artist', tattoo: 'tattoo artist', trainer: 'trainer', musician: 'musician', judge: 'event judge',
  };
  const typeNoun = TYPE_NOUNS[profile.profileType] ?? 'profile';

  const SKILLS_TITLES: Record<string, string> = {
    coach: 'Skills', photographer: 'Services & Gear', builder: 'What We Build',
    artist: 'What They Make', graffiti: 'Styles & Work', tattoo: 'Styles',
    trainer: 'Focus & Specialties', musician: 'Genres & Instruments', judge: 'Formats & Specialties',
  };
  const skillsTitle = SKILLS_TITLES[profile.profileType] ?? 'Services & Skills';

  return (
    <Layout>
      <div className="container px-4 py-8 max-w-4xl">
        <Link
          to="/lab"
          className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors mb-6"
        >
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back to The Lab
        </Link>

        <div className="grid md:grid-cols-3 gap-6">
          {/* Main Content */}
          <div className="md:col-span-2 space-y-6">
            {/* Confirm-membership prompt (only for listed pending members) */}
            {isCollective && (
              <ConfirmMembershipCard
                kind={profileKind}
                founderPubkey={profile.pubkey}
                identifier={profile.identifier}
                collectiveName={profile.title}
                claimedMembers={profile.members}
                accentBg={`${accent.bg} hover:opacity-90`}
              />
            )}

            {/* Profile Card */}
            <Card className={`bg-black/90 border-2 ${accent.border}`}>
              <CardContent className="pt-6">
                <div className="flex items-start gap-4 mb-6">
                  <Avatar className="h-20 w-20">
                    <AvatarImage src={profile.image || metadata?.picture} alt={profile.title} />
                    <AvatarFallback className={`${accent.bg} text-white text-2xl`}>
                      {profile.title.slice(0, 2).toUpperCase()}
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-2 flex-wrap">
                      <h1 className={`text-3xl font-black uppercase ${accent.text}`} style={{
                        fontFamily: 'Impact, "Arial Black", sans-serif'
                      }}>
                        {profile.title}
                      </h1>
                      <TypeIcon className={`h-7 w-7 ${accent.text}`} />
                      {profile.entityType === 'collective' && (
                        <Badge variant="outline" className={`gap-1 ${accent.text} ${accent.border}`}>
                          <Users className="h-3 w-3" /> Collective
                        </Badge>
                      )}
                      <TrustBadge pubkey={profile.pubkey} size="md" />
                      <OfficialBadge pubkey={profile.pubkey} size="md" />
                      <ProBadge
                        featuredUntil={profile.featuredUntil}
                        entityCoord={`${profile.event.kind}:${profile.pubkey}:${profile.identifier}`}
                      />
                    </div>
                    <p className="text-gray-400 flex items-center gap-2">
                      <Calendar className="h-4 w-4" />
                      Joined {new Date(profile.createdAt * 1000).toLocaleDateString()}
                    </p>
                  </div>
                </div>

                {/* Bio */}
                {profile.bio && (
                  <div className="mb-6">
                    <h3 className="text-lg font-bold text-[#ccff00] uppercase mb-2">About</h3>
                    <p className="text-gray-300 whitespace-pre-wrap">{profile.bio}</p>
                  </div>
                )}

                {/* Skills */}
                {profile.skills.length > 0 && (
                  <div className="mb-6">
                    <h3 className="text-lg font-bold text-[#ccff00] uppercase mb-3">
                      {skillsTitle}
                    </h3>
                    <div className="space-y-3">
                      {profile.skills.map((skill) => (
                        <div key={skill} className={`bg-black/50 border rounded-lg p-3 ${accent.border}`}>
                          <div className="flex items-start gap-3">
                            <Badge className={`${accent.bg} text-white font-bold`}>
                              {getSkillLabel(skill)}
                            </Badge>
                            {getSkillDescription(skill) && (
                              <p className="text-sm text-gray-400 flex-1">
                                {getSkillDescription(skill)}
                              </p>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* In the Bag — photographer / filmer gear (freeform) */}
                {(isPhotographer || isFilmer || isBuilder) && pget('gear') && (
                  <div className="mb-6">
                    <h3 className="text-lg font-bold text-[#ccff00] uppercase mb-2 flex items-center gap-2">
                      {isBuilder ? <HardHat className={`h-4 w-4 ${accent.text}`} /> : <Aperture className={`h-4 w-4 ${accent.text}`} />}
                      {isBuilder ? 'How We Work' : 'In the Bag'}
                    </h3>
                    <p className={`text-gray-300 whitespace-pre-wrap text-sm bg-black/50 border rounded-lg p-3 ${accent.border}`}>
                      {pget('gear')}
                    </p>
                  </div>
                )}

                {/* Builder — service area & insured */}
                {isBuilder && (pget('serviceArea') || pbool('insured')) && (
                  <div className="mb-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
                    {pget('serviceArea') && (
                      <div className={`bg-black/50 border rounded-lg p-3 ${accent.border}`}>
                        <h4 className="text-xs font-bold text-[#ccff00] uppercase mb-1 flex items-center gap-1">
                          <MapPin className={`h-3 w-3 ${accent.text}`} /> Service Area
                        </h4>
                        <p className="text-sm text-gray-300">{pget('serviceArea')}</p>
                      </div>
                    )}
                    {pbool('insured') && (
                      <div className={`bg-black/50 border rounded-lg p-3 ${accent.border} flex items-center gap-2`}>
                        <HardHat className={`h-4 w-4 ${accent.text}`} />
                        <span className="text-sm font-bold text-gray-200">Licensed / Insured</span>
                      </div>
                    )}
                  </div>
                )}

                {/* Tattoo — studio & books-open */}
                {isTattoo && (pget('studio') || pbool('booksOpen')) && (
                  <div className="mb-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
                    {pget('studio') && (
                      <div className={`bg-black/50 border rounded-lg p-3 ${accent.border}`}>
                        <h4 className="text-xs font-bold text-[#ccff00] uppercase mb-1 flex items-center gap-1">
                          <MapPin className={`h-3 w-3 ${accent.text}`} /> Studio
                        </h4>
                        <p className="text-sm text-gray-300">{pget('studio')}</p>
                      </div>
                    )}
                    {pbool('booksOpen') && (
                      <div className={`bg-black/50 border rounded-lg p-3 ${accent.border} flex items-center gap-2`}>
                        <Brush className={`h-4 w-4 ${accent.text}`} />
                        <span className="text-sm font-bold text-emerald-400">Books Open</span>
                      </div>
                    )}
                  </div>
                )}

                {/* Trainer — credentials & remote */}
                {isTrainer && (pget('credentials') || pbool('remote')) && (
                  <div className="mb-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
                    {pget('credentials') && (
                      <div className={`bg-black/50 border rounded-lg p-3 ${accent.border}`}>
                        <h4 className="text-xs font-bold text-[#ccff00] uppercase mb-1 flex items-center gap-1">
                          <Dumbbell className={`h-3 w-3 ${accent.text}`} /> Credentials
                        </h4>
                        <p className="text-sm text-gray-300">{pget('credentials')}</p>
                      </div>
                    )}
                    {pbool('remote') && (
                      <div className={`bg-black/50 border rounded-lg p-3 ${accent.border} flex items-center gap-2`}>
                        <Globe className={`h-4 w-4 ${accent.text}`} />
                        <span className="text-sm font-bold text-gray-200">Remote / Online available</span>
                      </div>
                    )}
                  </div>
                )}

                {/* Graffiti — crew name */}
                {isGraffiti && pget('crew') && (
                  <div className="mb-6">
                    <h4 className="text-xs font-bold text-[#ccff00] uppercase mb-1 flex items-center gap-1">
                      <SprayCan className={`h-3 w-3 ${accent.text}`} /> Graffiti Crew
                    </h4>
                    <p className="text-sm text-gray-300">{pget('crew')}</p>
                  </div>
                )}

                {/* Musician — act type & listen links */}
                {isMusician && (
                  <div className="mb-6 space-y-3">
                    {'actType' in profile && profile.actType && (
                      <div>
                        <h4 className="text-xs font-bold text-[#ccff00] uppercase mb-1">Act</h4>
                        <p className="text-sm text-gray-300 capitalize">{profile.actType}</p>
                      </div>
                    )}
                    {(('spotify' in profile && profile.spotify) || ('bandcamp' in profile && profile.bandcamp) || ('soundcloud' in profile && profile.soundcloud) || ('youtube' in profile && profile.youtube)) && (
                      <div>
                        <h4 className="text-xs font-bold text-[#ccff00] uppercase mb-2 flex items-center gap-1">
                          <Music className={`h-3 w-3 ${accent.text}`} /> Listen
                        </h4>
                        <div className="flex flex-wrap gap-2">
                          {'spotify' in profile && sanitizeUrl(profile.spotify) && (
                            <a href={sanitizeUrl(profile.spotify)!} target="_blank" rel="noopener noreferrer" className={`px-3 py-1.5 rounded-full text-xs font-bold border ${accent.border} text-gray-200 hover:bg-white/5`}>Spotify</a>
                          )}
                          {'bandcamp' in profile && sanitizeUrl(profile.bandcamp) && (
                            <a href={sanitizeUrl(profile.bandcamp)!} target="_blank" rel="noopener noreferrer" className={`px-3 py-1.5 rounded-full text-xs font-bold border ${accent.border} text-gray-200 hover:bg-white/5`}>Bandcamp</a>
                          )}
                          {'soundcloud' in profile && sanitizeUrl(profile.soundcloud) && (
                            <a href={sanitizeUrl(profile.soundcloud)!} target="_blank" rel="noopener noreferrer" className={`px-3 py-1.5 rounded-full text-xs font-bold border ${accent.border} text-gray-200 hover:bg-white/5`}>SoundCloud</a>
                          )}
                          {'youtube' in profile && sanitizeUrl(profile.youtube) && (
                            <a href={sanitizeUrl(profile.youtube)!} target="_blank" rel="noopener noreferrer" className={`px-3 py-1.5 rounded-full text-xs font-bold border ${accent.border} text-gray-200 hover:bg-white/5`}>YouTube</a>
                          )}
                        </div>
                      </div>
                    )}
                  </div>
                )}

                {/* Upcoming gigs — events that feature this musician */}
                {isMusician && gigs.length > 0 && (
                  <div className="mb-6">
                    <h3 className="text-lg font-bold text-[#ccff00] uppercase mb-3 flex items-center gap-2">
                      <Calendar className={`h-4 w-4 ${accent.text}`} />
                      Upcoming Gigs
                    </h3>
                    <div className="space-y-2">
                      {gigs.slice(0, 6).map((gig) => {
                        const isUpcoming = gig.start >= Math.floor(Date.now() / 1000);
                        return (
                          <Link
                            key={gig.event.id}
                            to={`/event/${gig.pubkey}/${gig.identifier}`}
                            className={`flex items-center gap-3 rounded-lg border ${accent.border} bg-black/50 p-3 transition-colors hover:bg-white/5`}
                          >
                            <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg ${accent.bg}/20`}>
                              <Music className={`h-4 w-4 ${accent.text}`} />
                            </div>
                            <div className="min-w-0 flex-1">
                              <p className="truncate text-sm font-bold text-white">{gig.title}</p>
                              <p className="text-xs text-gray-400">
                                {new Date(gig.start * 1000).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
                                {gig.location ? ` · ${gig.location}` : ''}
                              </p>
                            </div>
                            {!isUpcoming && (
                              <Badge variant="secondary" className="shrink-0 text-[10px]">Past</Badge>
                            )}
                          </Link>
                        );
                      })}
                    </div>
                  </div>
                )}

                {/* Experience & Rate */}
                <div className="grid grid-cols-2 gap-4">
                  {profile.experience && (
                    <div>
                      <h4 className="text-sm font-bold text-[#ccff00] uppercase mb-1">Experience</h4>
                      <p className="text-gray-300">{profile.experience} years</p>
                    </div>
                  )}
                  {profile.rate && (
                    <div>
                      <h4 className="text-sm font-bold text-[#ccff00] uppercase mb-1">Rate</h4>
                      <p className="text-gray-300">{profile.rate}</p>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            {/* Contact Card */}
            <Card className="bg-black/90 border-2 border-[#ccff00]/50">
              <CardHeader>
                <CardTitle className="text-lg text-[#ccff00] uppercase font-black flex items-center gap-2">
                  <MessageCircle className="h-5 w-5" />
                  Contact
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                {/* Direct Message */}
                <Button 
                  variant="outline" 
                  className="w-full gap-2 border-[#ff0040] hover:bg-[#ff0040]/10 text-white"
                  onClick={() => navigate(`/messages/${npub}`)}
                >
                  <MessageCircle className="h-4 w-4" />
                  Send Message
                </Button>

                {/* Book this act for an event — deep-links to event creation
                    pre-tagged with this musician (Music → Events). */}
                {isMusician && (
                  <Button
                    className={`w-full gap-2 ${accent.bg} text-white font-bold hover:opacity-90`}
                    onClick={() =>
                      navigate(
                        `/create-event?type=concert&musician=${profile.pubkey}:${profile.identifier}`,
                      )
                    }
                  >
                    <Calendar className="h-4 w-4" />
                    Book for a Gig
                  </Button>
                )}

                {/* Contact Info from Profile */}
                {sanitizeTel(profile.phone) && (
                  <a href={sanitizeTel(profile.phone)!} className="flex items-center gap-2 text-sm text-gray-300 p-2 bg-black/50 rounded hover:bg-black/70 transition-colors">
                    <Phone className="h-4 w-4 text-[#ccff00]" />
                    <span className="truncate">{profile.phone}</span>
                  </a>
                )}

                {sanitizeEmail(profile.email) && (
                  <a href={sanitizeEmail(profile.email)!} className="flex items-center gap-2 text-sm text-gray-300 p-2 bg-black/50 rounded hover:bg-black/70 transition-colors">
                    <Mail className="h-4 w-4 text-[#ccff00]" />
                    <span className="truncate">{profile.email}</span>
                  </a>
                )}

                {sanitizeUrl(profile.website) && (
                  <a href={sanitizeUrl(profile.website)!} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-sm text-gray-300 p-2 bg-black/50 rounded hover:bg-black/70 transition-colors" title={`Opens: ${urlDomain(profile.website!)}`}>
                    <Globe className="h-4 w-4 text-[#ccff00]" />
                    <span className="truncate">{urlDomain(profile.website!)}</span>
                  </a>
                )}

                {isCoach && pget('instagram') && (
                  <a href={`https://instagram.com/${pget('instagram')!.replace('@', '')}`} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-sm text-gray-300 p-2 bg-black/50 rounded hover:bg-black/70 transition-colors">
                    <Instagram className="h-4 w-4 text-[#ccff00]" />
                    <span className="truncate">@{pget('instagram')!.replace('@', '')}</span>
                  </a>
                )}

                {!isCoach && 'social' in profile && sanitizeUrl(profile.social) && (
                  <a href={sanitizeUrl(profile.social)!} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-sm text-gray-300 p-2 bg-black/50 rounded hover:bg-black/70 transition-colors" title={`Opens: ${urlDomain(profile.social!)}`}>
                    <Globe className="h-4 w-4 text-[#ccff00]" />
                    <span className="truncate">{urlDomain(profile.social!)}</span>
                  </a>
                )}

                {/* Portfolio / reel (all crafts except coach) */}
                {!isCoach && 'portfolio' in profile && sanitizeUrl(profile.portfolio) && (
                  <a href={sanitizeUrl(profile.portfolio)!} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-sm text-gray-300 p-2 bg-black/50 rounded hover:bg-black/70 transition-colors" title={`Opens: ${urlDomain(profile.portfolio!)}`}>
                    <Aperture className="h-4 w-4 text-[#ccff00]" />
                    <span className="truncate">Portfolio · {urlDomain(profile.portfolio!)}</span>
                  </a>
                )}

                {/* Lightning Address from Nostr Profile */}
                {metadata?.lud16 && (
                  <div className="flex items-center gap-2 text-sm text-gray-300 p-2 bg-black/50 rounded">
                    <Mail className="h-4 w-4 text-[#ccff00]" />
                    <span className="truncate">{metadata.lud16}</span>
                  </div>
                )}

                {/* Zap Button */}
                <div className="pt-3 border-t border-gray-700">
                  <ZapButton
                    target={profile.event}
                    className="w-full justify-center"
                  />
                </div>

                {/* CLINK self-custodial payment (only when a valid noffer is present) */}
                {'noffer' in profile && profile.noffer && (
                  <ClinkPayButton
                    noffer={profile.noffer}
                    recipientName={profile.title}
                    className="w-full justify-center"
                  />
                )}
              </CardContent>
            </Card>

            {/* Scene vouches — community anti-fraud / trust signal */}
            <VouchCard
              coord={`${profileKind}:${profile.pubkey}:${profile.identifier}`}
              providerPubkey={profile.pubkey}
              providerName={profile.title}
              accentText={accent.text}
              accentBg={`${accent.bg} hover:opacity-90`}
            />

            {/* Owner controls — delete your own Lab profile; admins can take
                down any profile (DeleteEntityDialog gates owner-or-admin). */}
            {user && (user.pubkey === profile.pubkey || isAdminPubkey(user.pubkey)) && (
              <Card className="bg-black/90 border-2 border-red-500/30">
                <CardHeader>
                  <CardTitle className="text-lg text-red-400 uppercase font-black">
                    {user.pubkey === profile.pubkey ? 'Manage' : 'Admin'}
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <p className="text-sm text-gray-400">
                    {user.pubkey === profile.pubkey
                      ? `Remove your ${typeNoun} profile from The Lab.`
                      : `Take down this ${typeNoun} profile. It will be hidden across SkateSpots.`}
                  </p>
                  <DeleteEntityDialog
                    event={profile.event}
                    entityLabel={`${typeNoun} profile`}
                    entityName={profile.title}
                    redirectTo="/lab"
                    triggerText="Delete Profile"
                    className="w-full justify-center"
                  />
                </CardContent>
              </Card>
            )}

            {/* Members Card (collectives only) */}
            {isCollective && (
              <CollectiveMembers
                kind={profileKind}
                founderPubkey={profile.pubkey}
                identifier={profile.identifier}
                claimedMembers={profile.members}
                accentText={accent.text}
                accentBorder={accent.border}
              />
            )}

            {/* Request to join (collectives only) — shown to non-owner,
                non-member skaters; notifies the owner via their bell. */}
            {isCollective && (
              <RequestToJoinCollective
                profile={profile}
                accentText={accent.text}
                accentBorder={accent.border}
              />
            )}

            {/* Linked crew (cross-link) — pass this profile's own coord so a
                mutual link shows a "Verified" badge. */}
            <LinkedCrewCard
              crewRef={profile.crewRef}
              selfCoord={`${profileKind}:${profile.pubkey}:${profile.identifier}`}
            />

            {/* Location Card */}
            {profile.location && (
              <Card className="bg-black/90 border-2 border-gray-700">
                <CardHeader>
                  <CardTitle className="text-lg text-white uppercase font-black flex items-center gap-2">
                    <MapPin className={`h-5 w-5 ${accent.text}`} />
                    Location
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-300">{profile.location}</p>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </div>
    </Layout>
  );
}