/**
 * RiderCardPage — /card
 *
 * Card types:
 *   1. Rider License    — personal card auto-filled from Nostr profile
 *   2. Park Access Card — issued by a park owner to a rider (signed Nostr event)
 *
 * Badge System (kind 1293):
 *   - Anyone can award a skill badge to any rider
 *   - Badges appear on the rider's card with the witness's name
 *
 * 6 visual themes: THUG · LIME · CHROME · WOOD · MIDNIGHT · SUNSET
 * Print-ready: credit-card size (85.6×54mm), @media print isolates card
 */

import { dateLocaleCode } from '@/lib/dateFnsI18n';
import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
import { useSeoMeta } from '@unhead/react';
import { nip19 } from 'nostr-tools';
// QRCode is imported lazily inside drawCardToCanvas() to avoid canvas API
// access at module load time (crashes the preview environment)

import { LoginArea } from '@/components/auth/LoginArea';
import { CardPreview, type CardData, type BadgeAward } from '@/components/RiderCard';
import { NfcWriteButton } from '@/components/NfcWriteButton';
import { drawCardToCanvas, type CanvasCardData } from '@/lib/riderCardCanvas';
import { THEMES, SKILL_OPTIONS, fullNpub, type ThemeId } from '@/lib/riderCard';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';

import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useAuthor } from '@/hooks/useAuthor';
import { useRiderCard, useRiderRoles, useCardProfile, useIssuedPasses, useRevokePass, useReceivedPasses, type ReceivedPass } from '@/hooks/useRiderCard';
import { useUserCrews } from '@/hooks/useCrews';
import { useUserSkaterProfile } from '@/hooks/useSkaters';
import { useSkateSpots } from '@/hooks/useSkateSpots';
import { useSkateShops } from '@/hooks/useSkateShops';
import { useSkateEvents } from '@/hooks/useSkateEvents';
import { useMyRsvpCoords, useEventRsvps, eventCoord } from '@/hooks/useEventRsvps';
import { useNostrPublish } from '@/hooks/useNostrPublish';
import { useUploadFile } from '@/hooks/useUploadFile';
import { useToast } from '@/hooks/useToast';
import { useNostr } from '@/hooks/useNostr';
import { useQuery } from '@tanstack/react-query';
import { genUserName } from '@/lib/genUserName';
import { useTranslation } from '@/contexts/language';
import { cn } from '@/lib/utils';
import { RIDER_CARD_KIND, RIDER_CARD_D, PARK_ACCESS_CARD_KIND, SKILL_BADGE_KIND, cardVerifyUrl, riderCardTags, type RiderCardConfig } from '@/lib/riderCard';
import { SKATE_SPOT_KIND, SKATE_SHOP_KIND, SKATE_CREW_KIND, CALENDAR_EVENT_KIND, SKATER_STYLES, SKATER_LEVELS } from '@/lib/types';
import type { NostrEvent } from '@nostrify/nostrify';
import { Link, useSearchParams } from 'react-router-dom';
import { Printer, Loader2, Share2, Download, Check, Copy, Award, Zap, Info, Palette, ChevronUp, ChevronDown, User, Building2, Users, Ticket, MoreHorizontal, Pencil, CheckCircle2, RefreshCw, Upload } from 'lucide-react';
// ─── Hook: fetch skill badges received by a pubkey ────────────────────────────
function useReceivedBadges(pubkey: string) {
  const { nostr } = useNostr();
  return useQuery({
    queryKey: ['skill-badges', pubkey],
    queryFn: async (c) => {
      if (!pubkey) return [];
      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(3000)]);
      const events = await nostr.query(
        [{ kinds: [SKILL_BADGE_KIND], '#p': [pubkey], limit: 50 }],
        { signal },
      );
      return events.filter(e =>
        e.tags.some(([k]) => k === 'p') &&
        e.tags.some(([k]) => k === 'skill')
      );
    },
    enabled: !!pubkey,
  });
}

// ─── Hook: fetch author name for a pubkey ─────────────────────────────────────
function useWitnessName(pubkey: string) {
  const author = useAuthor(pubkey);
  return author.data?.metadata?.name ?? genUserName(pubkey);
}

// ─── Received badges panel ────────────────────────────────────────────────────
function ReceivedBadgesPanel({ pubkey }: { pubkey: string }) {
  const { t } = useTranslation();
  const { data: badgeEvents = [] } = useReceivedBadges(pubkey);
  const [expanded, setExpanded] = useState(false);

  if (badgeEvents.length === 0) {
    return (
      <div className="p-3 rounded-xl bg-black/40 border border-gray-700 text-center">
        <div className="text-2xl mb-1">🏅</div>
        <p className="text-xs text-gray-500">{t('labUi.rider.noBadges')}</p>
      </div>
    );
  }

  const show = expanded ? badgeEvents : badgeEvents.slice(0, 3);

  return (
    <div className="space-y-2">
      {show.map((event) => (
        <BadgeEventRow key={event.id} event={event} />
      ))}
      {badgeEvents.length > 3 && (
        <button
          onClick={() => setExpanded(p => !p)}
          className="w-full text-xs text-gray-500 hover:text-gray-300 flex items-center justify-center gap-1 py-1"
        >
          {expanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
          {expanded ? t('common.showLess') : t('labUi.rider.showMore', { count: badgeEvents.length - 3 })}
        </button>
      )}
    </div>
  );
}

function BadgeEventRow({ event }: { event: NostrEvent }) {
  const { t } = useTranslation();
  const skills = event.tags.filter(([k]) => k === 'skill').map(([, v]) => v);
  const spot = event.tags.find(([k]) => k === 'spot')?.[1];
  const witnessName = useWitnessName(event.pubkey);
  const witnessAuthor = useAuthor(event.pubkey);
  const witnessAvatar = witnessAuthor.data?.metadata?.picture;

  return (
    <div className="flex items-center gap-3 p-2.5 rounded-lg bg-yellow-500/5 border border-yellow-500/20">
      <div className="flex-shrink-0">
        <Avatar className="h-7 w-7">
          <AvatarImage src={witnessAvatar} />
          <AvatarFallback className="text-[10px] bg-yellow-900">{witnessName.slice(0, 2).toUpperCase()}</AvatarFallback>
        </Avatar>
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex flex-wrap gap-1 mb-0.5">
          {skills.map(sk => {
            const s = SKILL_OPTIONS.find(o => o.id === sk);
            return s ? (
              <Badge key={sk} variant="secondary" className="text-[9px] px-1.5 py-0 bg-yellow-500/20 text-yellow-300 border-yellow-500/30 h-4">
                {s.icon} {s.label}
              </Badge>
            ) : null;
          })}
        </div>
        <p className="text-[10px] text-gray-400">
          {t('labUi.rider.witnessedBy')} <span className="text-yellow-400 font-medium">{witnessName}</span>
          {spot && <> {t('labUi.rider.at')} <span className="text-gray-300">{spot}</span></>}
        </p>
      </div>
      <div className="text-[9px] text-gray-600 flex-shrink-0">
        {new Date(event.created_at * 1000).toLocaleDateString(dateLocaleCode())}
      </div>
    </div>
  );
}

// ─── Page ─────────────────────────────────────────────────────────────────────
export default function RiderCardPage() {
  const { t } = useTranslation();
  useSeoMeta({
    title: t('seoUi.riderCardTitle'),
    description: t('seoUi.riderCardDesc'),
  });

  const { user } = useCurrentUser();
  const cardProfile = useCardProfile(user?.pubkey);
  const metadata = cardProfile.data;
  const { data: savedCard } = useRiderCard(user?.pubkey);
  const { data: allSpots } = useSkateSpots(200);
  const { data: allShops } = useSkateShops(200);
  const { memberships } = useUserCrews(user?.pubkey);
  const { data: skaterProfile } = useUserSkaterProfile(user?.pubkey);
  const { data: roles = [] } = useRiderRoles(user?.pubkey);
  const { data: issuedPasses = [] } = useIssuedPasses(user?.pubkey);
  const { revoke: revokePass, isPending: revokingPass } = useRevokePass();
  const { data: receivedPasses = [] } = useReceivedPasses(user?.pubkey);
  const [selectedPass, setSelectedPass] = useState<ReceivedPass | null>(null);

  const crewCrests = useMemo(
    () => memberships.map(m => ({ name: m.crew.name, image: m.crew.image })),
    [memberships],
  );
  const local = skaterProfile?.location || skaterProfile?.homeSpot || '';
  // Style + level are DERIVED from the Skater profile — no manual typing.
  const derivedStyle = useMemo(
    () => (skaterProfile?.styles ?? []).map(s => (SKATER_STYLES[s] ? t(SKATER_STYLES[s].labelKey) : s)).join(' · '),
    [skaterProfile, t],
  );
  const derivedLevel = skaterProfile?.level
    ? (SKATER_LEVELS[skaterProfile.level] ? t(SKATER_LEVELS[skaterProfile.level].labelKey) : '')
    : (skaterProfile?.customLevel ?? '');

  // "Finish your card" checklist — a card is only as good as what's on it.
  const cardChecks = [
    { done: !!metadata?.picture, label: t('cardUi.studio.checkPhoto'), to: '/settings?section=profile' },
    { done: !!metadata?.name, label: t('cardUi.studio.checkName'), to: '/settings?section=profile' },
    { done: (skaterProfile?.styles?.length ?? 0) > 0 || !!skaterProfile?.level, label: t('cardUi.studio.checkProfile'), to: '/skaters' },
    { done: memberships.length > 0, label: t('cardUi.studio.checkCrew'), to: '/crews' },
  ];
  const incomplete = cardChecks.some((c) => !c.done);
  const { mutate: publishEvent } = useNostrPublish();
  const { mutateAsync: uploadFile, isPending: uploadingLogo } = useUploadFile();
  const { toast } = useToast();

  const displayName = metadata?.name ?? genUserName(user?.pubkey ?? '');
  const npub = user?.pubkey ? nip19.npubEncode(user.pubkey) : '';

  const { data: receivedBadgeEvents = [] } = useReceivedBadges(user?.pubkey ?? '');
  const receivedBadges: BadgeAward[] = receivedBadgeEvents.flatMap(event => {
    const skills = event.tags.filter(([k]) => k === 'skill').map(([, v]) => v);
    const spot = event.tags.find(([k]) => k === 'spot')?.[1];
    return skills.map(skill => ({
      skill,
      witnessName: genUserName(event.pubkey),
      witnessPubkey: event.pubkey,
      spotName: spot,
      timestamp: event.created_at,
    }));
  });

  // ── Page tab: 'card' | 'badges' | 'award' | 'passes' ─────────────────────
  const [pageTab, setPageTab] = useState<'card' | 'badges' | 'award' | 'passes'>('card');

  // ── Card state ────────────────────────────────────────────────────────────
  const [cardType, setCardType] = useState<'rider' | 'park' | 'crew' | 'event'>('rider');
  const [theme, setTheme]       = useState<ThemeId>('thug');
  const [holographic, setHolographic] = useState(true);

  // Rider fields
  const [sponsors, setSponsors] = useState('');
  const [ridesFor, setRidesFor] = useState('');
  const [showCrews, setShowCrews]   = useState(true);
  const [showLocal, setShowLocal]   = useState(true);
  const [showRoles, setShowRoles]   = useState(true);

  // Customization depth
  const [accent, setAccent] = useState('');
  const [logo, setLogo]     = useState('');
  const [back, setBack]     = useState(true);
  const [cardSide, setCardSide] = useState<'front' | 'back'>('front');

  // Park fields
  const [issuerName, setIssuerName]   = useState('');
  const [recipientName, setRecipientName] = useState('');
  const [recipientNpub, setRecipientNpub] = useState('');
  const [accessLevel, setAccessLevel] = useState('Full Access');
  const [validThru, setValidThru]     = useState('');

  const [copied, setCopied] = useState(false);
  const [rendering, setRendering] = useState(false);

  // Venue binding: a park pass can name one of the issuer's OWN spots so a
  // verifier can confirm the issuer really owns the venue (see /verify).
  const [venueId, setVenueId] = useState('');
  const [savedParkD, setSavedParkD] = useState('');
  const [crewId, setCrewId] = useState('');
  const activeCrew = memberships.find(m => m.crew.id === crewId)?.crew ?? memberships[0]?.crew;

  // Event pass / wristband: events you organize, or that you RSVP'd going to.
  const [eventId, setEventId] = useState('');
  const { data: allEvents } = useSkateEvents(200);
  const { data: rsvpCoords = [] } = useMyRsvpCoords(user?.pubkey);
  const myEvents = useMemo(() => {
    const rsvpSet = new Set(rsvpCoords);
    return (allEvents ?? []).filter(ev => ev.pubkey === user?.pubkey || rsvpSet.has(eventCoord(ev)));
  }, [allEvents, user?.pubkey, rsvpCoords]);
  const activeEvent = myEvents.find(ev => ev.id === eventId) ?? myEvents[0];
  const eventRsvp = useEventRsvps(cardType === 'event' && activeEvent ? eventCoord(activeEvent) : undefined);

  // Which card entities does this account actually control?
  const crewRoleOnCard: 'owner' | 'admin' | undefined =
    memberships.some((m) => m.crew.pubkey === user?.pubkey) ? 'owner'
      : memberships.some((m) => user?.pubkey && m.crew.admins.includes(user.pubkey)) ? 'admin'
        : undefined;
  const organisesEvent = myEvents.some((e) => e.pubkey === user?.pubkey);
  const eventPasses = activeEvent
    ? issuedPasses.filter((p) => p.coord === `${CALENDAR_EVENT_KIND}:${activeEvent.pubkey}:${activeEvent.identifier}`)
    : [];
  // A "venue" you can issue a pass for is any spot OR shop you own.
  const myVenues = useMemo(() => {
    const spots = (allSpots ?? []).filter((s) => s.pubkey === user?.pubkey)
      .map((s) => ({ id: `s:${s.id}`, kind: SKATE_SPOT_KIND, pubkey: s.pubkey, identifier: s.identifier, title: s.title }));
    const shops = (allShops ?? []).filter((s) => s.pubkey === user?.pubkey)
      .map((s) => ({ id: `h:${s.id}`, kind: SKATE_SHOP_KIND, pubkey: s.pubkey, identifier: s.identifier, title: s.name }));
    return [...spots, ...shops];
  }, [allSpots, allShops, user?.pubkey]);
  const venueSpot = myVenues.find((s) => s.id === venueId);

  // Deep link from a venue page: /card?venue=<kind>:<pubkey>:<d> opens the park
  // pass editor with that venue preselected.
  const [searchParams] = useSearchParams();
  const venueParam = searchParams.get('venue');
  useEffect(() => {
    if (!venueParam) return;
    const match = myVenues.find((v) => `${v.kind}:${v.pubkey}:${v.identifier}` === venueParam);
    if (!match) return;
    setCardType('park');
    setVenueId(match.id);
  }, [venueParam, myVenues]);

  // Hydrate the editor from the saved Rider Card the first time it loads.
  const hydratedRef = useRef(false);
  useEffect(() => {
    if (hydratedRef.current || !savedCard?.config) return;
    hydratedRef.current = true;
    const c = savedCard.config;
    setTheme(c.theme as ThemeId);
    setSponsors(c.sponsors);
    setRidesFor(c.ridesFor);
    setShowCrews(c.showCrews);
    setShowLocal(c.showLocal);
    setShowRoles(c.showRoles);
    setAccent(c.accent);
    setLogo(c.logo);
    setBack(c.back);
    setHolographic(c.holographic);
  }, [savedCard]);

  // Unsaved-changes tracking for the personal card (manual save — an
  // interactive signer must not be prompted on every keystroke).
  const isDirty = useMemo(() => {
    const c = savedCard?.config;
    if (!c) return true;
    return (
      c.theme !== theme || c.sponsors !== sponsors || c.ridesFor !== ridesFor ||
      c.showCrews !== showCrews || c.showLocal !== showLocal || c.showRoles !== showRoles ||
      c.accent !== accent || c.logo !== logo || c.back !== back || c.holographic !== holographic
    );
  }, [savedCard, theme, sponsors, ridesFor, showCrews, showLocal, showRoles, accent, logo, back, holographic]);

  const recipientPubkey = (() => {
    if (!recipientNpub.trim()) return user?.pubkey ?? '';
    try {
      const d = nip19.decode(recipientNpub.trim());
      return d.type === 'npub' ? d.data : (user?.pubkey ?? '');
    } catch { return user?.pubkey ?? ''; }
  })();

  const cardPubkey = cardType === 'rider'
    ? (user?.pubkey ?? '')
    : cardType === 'park'
      ? recipientPubkey
      : cardType === 'crew'
        ? (activeCrew?.pubkey ?? user?.pubkey ?? '')
        : (activeEvent?.pubkey ?? '');
  const cardData: CardData = useMemo(
    () => ({
      type: cardType, theme, holographic,
      name: cardType === 'rider' ? displayName : recipientName,
      nip05: metadata?.nip05,
      avatar: cardType === 'crew' ? activeCrew?.image : cardType === 'event' ? activeEvent?.image : metadata?.picture,
      pubkey: cardPubkey,
      npub: cardPubkey ? fullNpub(cardPubkey) : '',
      style: derivedStyle,
      level: derivedLevel || undefined,
      accent: accent || undefined,
      accent2: accent || undefined,
      logo: logo || undefined,
      side: cardSide,
      sponsors, ridesFor,
      crews: crewCrests,
      local: local || undefined,
      roles,
      showCrews, showLocal, showRoles,
      receivedBadges,
      verifyUrl: cardType === 'rider'
        ? (user?.pubkey ? cardVerifyUrl(RIDER_CARD_KIND, user.pubkey, RIDER_CARD_D) : undefined)
        : cardType === 'park'
          ? (savedParkD && user?.pubkey ? cardVerifyUrl(PARK_ACCESS_CARD_KIND, user.pubkey, savedParkD) : undefined)
          : cardType === 'crew'
            ? (activeCrew ? cardVerifyUrl(SKATE_CREW_KIND, activeCrew.pubkey, activeCrew.identifier) : undefined)
            : (activeEvent
              ? `${cardVerifyUrl(CALENDAR_EVENT_KIND, activeEvent.pubkey, activeEvent.identifier)}${activeEvent.pubkey !== user?.pubkey && user?.pubkey ? `?h=${nip19.npubEncode(user.pubkey)}` : ''}`
              : undefined),
      crew: cardType === 'crew' && activeCrew ? {
        name: activeCrew.name,
        image: activeCrew.image,
        pubkey: activeCrew.pubkey,
        identifier: activeCrew.identifier,
        location: activeCrew.location,
        founded: activeCrew.founded,
        members: activeCrew.members.length,
        focus: activeCrew.focus,
        vibes: activeCrew.vibes,
        lookingFor: activeCrew.lookingFor,
        spots: activeCrew.spotRefs.length,
      } : undefined,
      event: cardType === 'event' && activeEvent ? {
        title: activeEvent.title,
        start: activeEvent.start,
        end: activeEvent.end,
        location: activeEvent.location,
        image: activeEvent.image,
        pubkey: activeEvent.pubkey,
        identifier: activeEvent.identifier,
        going: eventRsvp.goingCount,
        holder: displayName,
        organiser: activeEvent.pubkey === user?.pubkey,
      } : undefined,
      issuerName, recipientName, accessLevel, validThru,
    }),
    [
      cardType, theme, holographic, displayName, recipientName, metadata,
      cardPubkey, derivedStyle, derivedLevel, sponsors, ridesFor,
      receivedBadges, issuerName, accessLevel, validThru, savedParkD, user?.pubkey,
      crewCrests, local, roles, showCrews, showLocal, showRoles, activeCrew, activeEvent, eventRsvp.goingCount,
      accent, logo, cardSide,
    ],
  );

  // A received pass rendered as a card (type 'park').
  const passCardData: CardData | null = useMemo(() => (selectedPass ? {
    type: 'park',
    theme: theme as CardData['theme'],
    holographic: true,
    name: displayName,
    pubkey: selectedPass.event.pubkey,
    npub: '',
    style: '', sponsors: '', ridesFor: '',
    receivedBadges: [],
    verifyUrl: cardVerifyUrl(PARK_ACCESS_CARD_KIND, selectedPass.event.pubkey, selectedPass.d),
    issuerName: selectedPass.issuer,
    recipientName: displayName,
    accessLevel: selectedPass.accessLevel ?? '',
    validThru: selectedPass.validThru ?? '',
  } : null), [selectedPass, theme, displayName]);

  const handlePrintPass = useCallback(async () => {
    if (!passCardData) return;
    setRendering(true);
    try {
      const dataUrl = await drawCardToCanvas({
        type: 'park', themeId: passCardData.theme, name: passCardData.name, pubkey: passCardData.pubkey, npub: '',
        style: '', sponsors: '', ridesFor: '',
        showCrews: true, showLocal: true, showRoles: true,
        receivedBadges: [],
        verifyUrl: passCardData.verifyUrl, holographic: true,
        issuerName: passCardData.issuerName, recipientName: passCardData.recipientName,
        accessLevel: passCardData.accessLevel, validThru: passCardData.validThru,
      }, 'front');
      const w = Math.round(85.6 * 2.835); const h = Math.round(54 * 2.835);
      const win = window.open('', '_blank', `width=${w * 2},height=${h * 2}`);
      if (!win) { toast({ title: t('labUi.rider.popupBlocked'), variant: 'destructive' }); return; }
      win.document.write(`<!DOCTYPE html><html><head><title>Pass</title><style>@page{size:85.6mm 54mm;margin:0}html,body{margin:0;background:#000}img{display:block;width:85.6mm;height:54mm}</style></head><body><img src="${dataUrl}"/><scr${''}ipt>window.onload=function(){window.focus();window.print()}</scr${''}ipt></body></html>`);
      win.document.close();
    } catch (e) {
      toast({ title: t('labUi.rider.couldNotRender'), description: String(e), variant: 'destructive' });
    } finally { setRendering(false); }
  }, [passCardData, toast, t]);

  const renderCardToImage = useCallback(async (side: 'front' | 'back' = 'front'): Promise<string | null> => {
    setRendering(true);
    try {
      const canvasData: CanvasCardData = {
        type: cardData.type,
        themeId: cardData.theme,
        accentOverride: cardData.accent,
        name: cardData.name,
        nip05: cardData.nip05,
        avatarUrl: cardData.avatar,
        logoUrl: cardData.logo,
        pubkey: cardData.pubkey,
        npub: cardData.npub,
        style: cardData.style,
        level: cardData.level,
        sponsors: cardData.sponsors,
        ridesFor: cardData.ridesFor,
        showCrews: cardData.showCrews ?? true,
        showLocal: cardData.showLocal ?? true,
        showRoles: cardData.showRoles ?? true,
        receivedBadges: cardData.receivedBadges,
        verifyUrl: cardData.verifyUrl,
        local: cardData.local,
        crews: (cardData.crews ?? []).map(c => c.name),
        roles: cardData.roles,
        crew: cardData.crew,
        event: cardData.event,
        issuerName: cardData.issuerName,
        recipientName: cardData.recipientName,
        accessLevel: cardData.accessLevel,
        validThru: cardData.validThru,
        holographic: cardData.holographic,
      };
      return await drawCardToCanvas(canvasData, side);
    } catch (err) { console.error('Card render failed:', err); return null; }
    finally { setRendering(false); }
  }, [cardData]);

  const handleSaveCard = useCallback(() => {
    if (!user) return;
    const config: RiderCardConfig = { theme, sponsors, ridesFor, showCrews, showLocal, showRoles, accent, logo, back, holographic };
    publishEvent(
      { kind: RIDER_CARD_KIND, content: '', tags: riderCardTags(config) },
      {
        onSuccess: () => toast({ title: t('cardUi.saved'), description: t('cardUi.savedDesc') }),
        onError: (e) => toast({ title: t('cardUi.saveFailed'), description: String(e), variant: 'destructive' }),
      },
    );
  }, [user, theme, sponsors, ridesFor, showCrews, showLocal, showRoles, accent, logo, back, holographic, publishEvent, toast, t]);

  const handlePublishEventPass = useCallback(() => {
    if (!user || !activeEvent) return;
    if (activeEvent.pubkey !== user.pubkey) { toast({ title: t('cardUi.event.notOrganiser'), variant: 'destructive' }); return; }
    if (!recipientNpub.trim()) { toast({ title: t('labUi.rider.enterRiderNpub'), variant: 'destructive' }); return; }
    const d = `event-pass-${activeEvent.identifier}-${recipientPubkey.slice(0, 8)}-${Date.now()}`;
    const tags: string[][] = [
      ['d', d],
      ['p', recipientPubkey], ['t', 'event-checkin'], ['alt', 'Event check-in pass'],
      ['issuer', activeEvent.title],
      ['a', `${CALENDAR_EVENT_KIND}:${activeEvent.pubkey}:${activeEvent.identifier}`],
    ];
    publishEvent({ kind: PARK_ACCESS_CARD_KIND, content: '', tags }, {
      onSuccess: () => toast({ title: t('cardUi.event.passIssued') }),
      onError: (e) => toast({ title: t('cardUi.event.issueFailed'), description: String(e), variant: 'destructive' }),
    });
  }, [user, activeEvent, recipientNpub, recipientPubkey, publishEvent, toast, t]);

  const handlePrint = useCallback(async () => {
    const front = await renderCardToImage('front');
    if (!front) { toast({ title: t('labUi.rider.couldNotRender'), variant: 'destructive' }); return; }
    const backImg = back ? await renderCardToImage('back') : null;
    const w = Math.round(85.6 * 2.835);
    const h = Math.round(54 * 2.835);
    const win = window.open('', '_blank', `width=${w * 2},height=${h * 2}`);
    if (!win) { toast({ title: t('labUi.rider.popupBlocked'), description: t('labUi.rider.popupBlockedDesc'), variant: 'destructive' }); return; }
    const imgs = `<img src="${front}"/>${backImg ? `<img src="${backImg}"/>` : ''}`;
    win.document.write(`<!DOCTYPE html><html><head><title>SkateSpots Card</title><style>@page{size:85.6mm 54mm;margin:0}html,body{margin:0;padding:0;background:#000}img{display:block;width:85.6mm;height:54mm;break-after:page}img:last-child{break-after:auto}</style></head><body>${imgs}<scr${''}ipt>window.onload=function(){window.focus();window.print()}</scr${''}ipt></body></html>`);
    win.document.close();
  }, [renderCardToImage, back, toast, t]);

  const handleDownload = useCallback(async () => {
    const dataUrl = await renderCardToImage();
    if (!dataUrl) { toast({ title: t('labUi.rider.couldNotRender'), variant: 'destructive' }); return; }
    const a = document.createElement('a');
    a.href = dataUrl;
    a.download = `skatespot-card-${cardData.npub.slice(0, 16)}.png`;
    a.click();
  }, [renderCardToImage, cardData.npub, toast, t]);

  const handleLogoUpload = useCallback(async (file: File) => {
    try {
      const tags = await uploadFile(file);
      const url = tags[0]?.[1];
      if (url) setLogo(url);
      toast({ title: t('cardUi.logoUploaded') });
    } catch (e) {
      toast({ title: t('cardUi.logoUploadFailed'), description: String(e), variant: 'destructive' });
    }
  }, [uploadFile, toast, t]);

  const handleCopyNpub = useCallback(() => {
    navigator.clipboard.writeText(npub);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }, [npub]);

  const handleShare = useCallback(async () => {
    const dataUrl = await renderCardToImage();
    if (!dataUrl) { toast({ title: t('labUi.rider.couldNotRender'), variant: 'destructive' }); return; }
    const res = await fetch(dataUrl);
    const blob = await res.blob();
    const file = new File([blob], `skatespot-card-${cardData.name.replace(/\s+/g, '-')}.png`, { type: 'image/png' });
    if (navigator.share && navigator.canShare?.({ files: [file] })) {
      try {
        await navigator.share({ title: `${cardData.name}'s SkateSpots Card`, text: `Check out my SkateSpots Skater License 🛹\nskate-spots.org/#/card/${cardData.npub}`, files: [file] });
        return;
      } catch { /* fall through */ }
    }
    await navigator.clipboard.writeText(`https://skate-spots.org/#/card/${cardData.npub}`);
    toast({ title: t('labUi.rider.linkCopied') });
  }, [renderCardToImage, cardData.name, cardData.npub, toast, t]);

  const handlePublishParkCard = useCallback(() => {
    if (!user) return;
    if (!recipientPubkey || !recipientNpub.trim()) { toast({ title: t('labUi.rider.enterRiderNpub'), variant: 'destructive' }); return; }
    // ISSUANCE RULE: only the venue's owner key may issue a Park pass, and it
    // must be bound to that venue — otherwise the pass proves nothing.
    if (!venueSpot) { toast({ title: t('cardUi.parkNeedsVenue'), variant: 'destructive' }); return; }
    const d = `park-access-${recipientPubkey.slice(0, 16)}-${Date.now()}`;
    const tags: string[][] = [
      ['d', d],
      ['p', recipientPubkey], ['t', 'skatepark-access'], ['alt', 'Skatepark Access Card'],
      ['issuer', issuerName.trim() || venueSpot.title], ['access-level', accessLevel], ['theme', theme],
      ['a', `${venueSpot.kind}:${venueSpot.pubkey}:${venueSpot.identifier}`],
    ];
    if (validThru) tags.push(['valid-thru', validThru]);
    publishEvent({ kind: PARK_ACCESS_CARD_KIND, content: '', tags }, {
      onSuccess: () => { setSavedParkD(d); toast({ title: t('labUi.rider.parkPublished') }); },
      onError: (e) => toast({ title: t('labUi.rider.publishFailed'), description: String(e), variant: 'destructive' }),
    });
  }, [user, recipientPubkey, recipientNpub, issuerName, accessLevel, validThru, theme, venueSpot, publishEvent, toast, t]);

  // ── Logged out ────────────────────────────────────────────────────────────
  if (!user) {
    return (
      <>
        <div className="min-h-[70vh] flex flex-col items-center justify-center px-4 text-center">
          {/* Hero */}
          <div className="mb-8 relative">
            <div className="absolute inset-0 blur-3xl opacity-20 bg-gradient-to-br from-[#ff0040] to-[#ccff00] rounded-full" />
            <div className="relative text-7xl mb-4">🛹</div>
          </div>
          <h1 className="text-4xl font-black uppercase mb-2">
            <span className="neon-red">{t('cardUi.titleNeon')}</span>
            <span className="text-white"> {t('cardUi.titleRest')}</span>
          </h1>
          <p className="text-gray-400 max-w-sm mb-2">
            {t('labUi.rider.heroDesc')}
          </p>
          <p className="text-gray-600 text-sm mb-8 max-w-xs">
            {t('labUi.rider.heroDesc2')}
          </p>
          <LoginArea className="justify-center" />
        </div>
      </>
    );
  }

  return (
    <>
      <div className="mx-auto max-w-5xl px-4 pb-24">

        {/* ── Page header ── */}
        <div className="pt-8 pb-6 text-center">
          <h1 className="text-3xl font-black uppercase tracking-tight mb-1">
            <span className="neon-red">{t('cardUi.titleNeon')}</span>
            <span className="text-white"> {t('cardUi.titleRest')}</span>
          </h1>
          <p className="text-gray-500 text-xs tracking-widest uppercase">{t('labUi.rider.headerTagline')}</p>
        </div>

        {/* ── Tabs: My Card / Badges / Award ── */}
        <div className="mx-auto mb-8 flex max-w-2xl overflow-hidden rounded-xl border border-white/10 bg-black/40">
          {([
            { id: 'card',   label: `🪪 ${t('labUi.rider.tabCard')}` },
            { id: 'badges', label: `🏅 ${t('labUi.rider.tabBadges')}${receivedBadges.length > 0 ? ` (${receivedBadges.length})` : ''}` },
            { id: 'award',  label: `⭐ ${t('labUi.rider.tabAward')}` },
            { id: 'passes', label: `🎟️ ${t('cardUi.passes.tab')}${receivedPasses.length > 0 ? ` (${receivedPasses.length})` : ''}` },
          ] as const).map(tab => (
            <button
              key={tab.id}
              onClick={() => setPageTab(tab.id)}
              className={cn(
                'flex-1 py-3 text-xs font-black uppercase tracking-widest transition-all',
                pageTab === tab.id ? 'bg-[#ff0040] text-white' : 'text-gray-500 hover:bg-white/5 hover:text-gray-300'
              )}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {pageTab === 'card' && (
          <div className="lg:grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_400px] lg:items-start lg:gap-8">

            {/* ══ LEFT: sticky preview + actions ══ */}
            <div className="space-y-4 lg:sticky lg:top-20">
              <div
                className="relative flex w-full items-center justify-center overflow-hidden rounded-2xl py-8"
                style={{ background: 'radial-gradient(ellipse at 50% 60%, rgba(255,0,64,0.08) 0%, rgba(0,0,0,0) 70%), #0a0a0a', border: '1px solid rgba(255,255,255,0.06)' }}
              >
                <div
                  className="absolute inset-x-0 top-1/2 h-32 -translate-y-1/2 opacity-30 blur-3xl"
                  style={{ background: `radial-gradient(ellipse, ${theme === 'lime' ? '#ccff00' : theme === 'midnight' ? '#64a0ff' : theme === 'wood' ? '#f5c842' : theme === 'chrome' ? '#888' : theme === 'sunset' ? '#ff6020' : '#ff0040'}, transparent)` }}
                />
                <CardPreview d={cardData} zoomable />
              </div>

              {/* Flip front/back (personal card) */}
              {cardType === 'rider' && (
                <div className="flex justify-center">
                  <button
                    type="button"
                    onClick={() => setCardSide(s => s === 'front' ? 'back' : 'front')}
                    className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-[10px] font-black uppercase tracking-widest text-gray-300 hover:bg-white/10"
                  >
                    <RefreshCw className="h-3 w-3" />
                    {cardSide === 'front' ? t('cardUi.back.showBack') : t('cardUi.back.showFront')}
                  </button>
                </div>
              )}

              {/* Saved state */}
              {cardType === 'rider' && (
                <div className="flex items-center justify-center text-[10px] font-black uppercase tracking-widest">
                  {isDirty
                    ? <span className="inline-flex items-center gap-1.5 text-amber-400"><Pencil className="h-3 w-3" /> {t('cardUi.studio.unsaved')}</span>
                    : <span className="inline-flex items-center gap-1.5 text-green-400"><CheckCircle2 className="h-3 w-3" /> {t('cardUi.studio.saved')}</span>}
                </div>
              )}

              {/* Primary action: Share + More */}
              <div className="flex gap-2">
                <Button
                  onClick={handleShare}
                  disabled={rendering}
                  size="lg"
                  className="h-12 flex-1 gap-2 rounded-xl bg-gradient-to-r from-[#ff0040] to-[#ff6600] font-black uppercase shadow-xl shadow-[#ff0040]/20 hover:opacity-90"
                >
                  {rendering ? <Loader2 className="h-5 w-5 animate-spin" /> : <Share2 className="h-5 w-5" />}
                  {rendering ? t('labUi.rider.rendering') : t('labUi.rider.shareCard')}
                </Button>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="outline" size="lg" className="h-12 w-12 rounded-xl border-white/10 px-0">
                      <MoreHorizontal className="h-5 w-5" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-48">
                    <DropdownMenuItem onClick={handleDownload} disabled={rendering} className="gap-2">
                      <Download className="h-4 w-4" /> {back ? t('cardUi.saveFrontPng') : t('labUi.rider.savePng')}
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={handlePrint} disabled={rendering} className="gap-2">
                      <Printer className="h-4 w-4" /> {t('labUi.rider.print')}
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={handleCopyNpub} className="gap-2">
                      {copied ? <Check className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4" />}
                      {copied ? t('common.copied') : t('labUi.rider.copyId')}
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>

              {/* Save (personal card only) */}
              {cardType === 'rider' && (
                <Button
                  onClick={handleSaveCard}
                  disabled={!isDirty}
                  className={cn(
                    'h-12 w-full gap-2 font-black uppercase',
                    isDirty ? 'bg-[#ccff00] text-black hover:bg-[#b8e600]' : 'bg-white/5 text-gray-500',
                  )}
                >
                  <Check className="h-4 w-4" />
                  {isDirty ? t('cardUi.studio.saveChanges') : t('cardUi.studio.allSaved')}
                </Button>
              )}
            </div>

            {/* ══ RIGHT: inspector ══ */}
            <div className="mt-8 space-y-6 lg:mt-0">

              {/* Finish-your-card checklist (personal card) */}
              {cardType === 'rider' && incomplete && (
                <div className="rounded-xl border border-[#ccff00]/30 bg-[#ccff00]/5 p-4">
                  <div className="text-xs font-black uppercase tracking-wide text-[#ccff00]">{t('cardUi.studio.finishTitle')}</div>
                  <p className="mt-1 text-[11px] text-gray-400">{t('cardUi.studio.finishDesc')}</p>
                  <div className="mt-3 flex flex-wrap gap-1.5">
                    {cardChecks.map((c) => (
                      c.done ? (
                        <span key={c.label} className="inline-flex items-center gap-1 rounded-lg border border-white/10 bg-white/5 px-2.5 py-1 text-[11px] font-bold text-green-400">
                          ✓ {c.label}
                        </span>
                      ) : (
                        <Link key={c.label} to={c.to} className="inline-flex items-center gap-1 rounded-lg border border-[#ccff00]/40 bg-[#ccff00]/10 px-2.5 py-1 text-[11px] font-bold text-[#ccff00] hover:bg-[#ccff00]/20">
                          + {c.label}
                        </Link>
                      )
                    ))}
                  </div>
                </div>
              )}

              {/* Card type */}
              <div>
                <p className="mb-2 text-[10px] font-black uppercase tracking-widest text-gray-600">{t('labUi.rider.cardType')}</p>
                <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
                  {([
                    { id: 'rider' as const, label: t('labUi.rider.licenseLabel'), icon: User, role: undefined },
                    ...(myVenues.length > 0 ? [{ id: 'park' as const, label: t('labUi.rider.parkLabel'), icon: Building2, role: 'owner' as const }] : []),
                    ...(memberships.length > 0 ? [{ id: 'crew' as const, label: t('cardUi.crew.crewCard'), icon: Users, role: crewRoleOnCard }] : []),
                    ...(myEvents.length > 0 ? [{ id: 'event' as const, label: t('cardUi.event.pass'), icon: Ticket, role: organisesEvent ? ('organiser' as const) : undefined }] : []),
                  ]).map(({ id, label, icon: Icon, role }) => (
                    <button
                      key={id}
                      onClick={() => setCardType(id)}
                      className={cn(
                        'flex flex-col items-center gap-1.5 rounded-xl border px-2 py-3 text-center transition-all',
                        cardType === id
                          ? 'border-[#ff0040]/60 bg-[#ff0040]/10 text-white'
                          : 'border-white/8 bg-black/30 text-gray-500 hover:border-white/20 hover:text-gray-300'
                      )}
                    >
                      <Icon className={cn('h-4 w-4', cardType === id ? 'text-[#ff0040]' : 'text-gray-600')} />
                      <span className="text-[9px] font-black uppercase leading-tight">{label}</span>
                      {role && <span className="text-[7px] font-black uppercase tracking-wide text-[#ccff00]">{t(`role.${role}`)}</span>}
                    </button>
                  ))}
                </div>
                {(myVenues.length === 0 || memberships.length === 0 || myEvents.length === 0) && (
                  <p className="mt-2 text-[10px] leading-relaxed text-gray-600">{t('cardUi.studio.moreTypes')}</p>
                )}
              </div>

              {/* Theme */}
              <div>
                <p className="mb-2 flex items-center gap-1.5 text-[10px] font-black uppercase tracking-widest text-gray-600">
                  <Palette className="h-3 w-3" /> {t('labUi.rider.theme')}
                </p>
                <div className="grid grid-cols-6 gap-2">
                  {THEMES.map((th) => (
                    <button
                      key={th.id}
                      onClick={() => setTheme(th.id)}
                      className={cn(
                        'flex aspect-square flex-col items-center justify-center gap-0.5 rounded-xl border-2 transition-all',
                        `card-theme-${th.id}`,
                        theme === th.id ? 'scale-105 border-white/30 ring-2 ring-white/50 ring-offset-1 ring-offset-black' : 'border-white/10 opacity-60 hover:opacity-90'
                      )}
                    >
                      <span className="text-lg">{th.emoji}</span>
                      <span className="text-[7px] font-black uppercase opacity-80">{th.label}</span>
                    </button>
                  ))}
                </div>
              </div>

              {/* Holographic */}
              <div className="flex items-center justify-between rounded-xl border border-white/8 bg-white/3 px-4 py-3">
                <div>
                  <div className="text-sm font-bold">✨ {t('labUi.rider.holoTitle')}</div>
                  <div className="text-xs text-gray-500">{t('labUi.rider.holoDesc')}</div>
                </div>
                <Switch checked={holographic} onCheckedChange={setHolographic} />
              </div>

              {/* Design: custom accent + logo (rider only) */}
              {cardType === 'rider' && (
                <>
                  <div>
                    <p className="mb-2 text-[10px] font-black uppercase tracking-widest text-gray-600">{t('cardUi.studio.accent')}</p>
                    <div className="flex items-center gap-3">
                      <input
                        type="color"
                        value={accent || '#ff0040'}
                        onChange={(e) => setAccent(e.target.value)}
                        className="h-10 w-14 cursor-pointer rounded-lg border border-white/10 bg-transparent"
                        aria-label={t('cardUi.studio.accent')}
                      />
                      {accent
                        ? <button type="button" onClick={() => setAccent('')} className="text-xs text-gray-400 underline">{t('cardUi.studio.accentClear')}</button>
                        : <span className="text-[11px] text-gray-600">{t('cardUi.studio.accentHint')}</span>}
                    </div>
                  </div>

                  <div>
                    <p className="mb-2 text-[10px] font-black uppercase tracking-widest text-gray-600">{t('cardUi.studio.logo')}</p>
                    <div className="flex items-center gap-3">
                      {logo && <img src={logo} alt="" className="h-11 w-11 rounded-lg border border-white/10 object-cover" />}
                      <label className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-white/10 bg-black/40 px-3 py-2 text-xs font-bold text-gray-300 hover:bg-white/5">
                        {uploadingLogo ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Upload className="h-3.5 w-3.5" />}
                        {logo ? t('cardUi.studio.logoChange') : t('cardUi.studio.logoAdd')}
                        <input type="file" accept="image/*" className="hidden" onChange={(e) => { const f = e.target.files?.[0]; if (f) void handleLogoUpload(f); }} />
                      </label>
                      {logo && <button type="button" onClick={() => setLogo('')} className="text-xs text-gray-400 underline">{t('cardUi.studio.logoClear')}</button>}
                    </div>
                  </div>
                </>
              )}

              {/* Printable back side */}
              <div className="flex items-center justify-between rounded-xl border border-white/8 bg-white/3 px-4 py-3">
                <div>
                  <div className="text-sm font-bold">{t('cardUi.back.title')}</div>
                  <div className="text-xs text-gray-500">{t('cardUi.back.desc')}</div>
                </div>
                <Switch checked={back} onCheckedChange={setBack} />
              </div>

              {/* Show on card — ONE clear list */}
              {cardType === 'rider' && (
                <>
                  <div>
                    <p className="mb-2 text-[10px] font-black uppercase tracking-widest text-gray-600">{t('cardUi.studio.showOnCard')}</p>
                    <div className="divide-y divide-white/5 rounded-xl border border-white/8">
                      {[
                        { icon: '🏕️', label: t('cardUi.facets.crews'), value: String(crewCrests.length), state: showCrews, set: setShowCrews },
                        { icon: '📍', label: t('cardUi.facets.local'), value: local || '—', state: showLocal, set: setShowLocal },
                        { icon: '🎓', label: t('cardUi.facets.roles'), value: String(roles.length), state: showRoles, set: setShowRoles },
                      ].map((row) => (
                        <div key={row.label} className="flex items-center justify-between gap-3 px-3 py-2.5">
                          <div className="flex min-w-0 items-center gap-2.5">
                            <span className="text-base">{row.icon}</span>
                            <div className="min-w-0">
                              <div className="text-xs font-bold text-white">{row.label}</div>
                              <div className="truncate text-[10px] text-gray-500">{row.value}</div>
                            </div>
                          </div>
                          <Switch checked={row.state} onCheckedChange={row.set} />
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Details */}
                  <div className="space-y-4 border-t border-white/8 pt-4">
                    <p className="text-[10px] font-black uppercase tracking-widest text-gray-600">{t('labUi.rider.cardDetails')}</p>

                    <div className="rounded-xl border border-white/8 bg-white/3 p-3">
                      <div className="text-[10px] uppercase tracking-widest text-gray-500">{t('cardUi.studio.derived')}</div>
                      <div className="mt-2 flex flex-wrap gap-1.5">
                        {derivedStyle && <span className="rounded-md bg-white/5 px-2 py-0.5 text-[11px] font-bold text-white">{derivedStyle}</span>}
                        {derivedLevel && <span className="rounded-md px-2 py-0.5 text-[11px] font-bold" style={{ background: 'rgba(255,102,0,0.15)', color: '#ff9944' }}>{derivedLevel}</span>}
                        {!derivedStyle && !derivedLevel && (
                          <span className="text-[11px] text-gray-500">
                            {t('cardUi.studio.noSkaterProfile')}{' '}
                            <Link to="/skaters" className="text-[#ccff00] underline">{t('cardUi.studio.editSkaterProfile')}</Link>
                          </span>
                        )}
                      </div>
                    </div>

                    {!metadata?.picture && (
                      <p className="text-[11px] text-amber-400">
                        {t('cardUi.studio.noPhoto')}{' '}
                        <Link to="/settings?section=profile" className="underline">{t('cardUi.studio.addPhoto')}</Link>
                      </p>
                    )}


                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <Label className="mb-1.5 block text-[10px] uppercase tracking-widest text-gray-500">{t('labUi.rider.ridesFor')}</Label>
                        <Input
                          placeholder={t('labUi.rider.ridesForPlaceholder')}
                          value={ridesFor}
                          onChange={e => setRidesFor(e.target.value)}
                          className="h-11 border-white/10 bg-black/50 text-sm"
                        />
                      </div>
                      <div>
                        <Label className="mb-1.5 block text-[10px] uppercase tracking-widest text-gray-500">{t('labUi.rider.sponsors')}</Label>
                        <Input
                          placeholder={t('labUi.rider.sponsorsPlaceholder')}
                          value={sponsors}
                          onChange={e => setSponsors(e.target.value)}
                          className="h-11 border-white/10 bg-black/50 text-sm"
                        />
                      </div>
                    </div>

                    <p className="text-[10px] text-gray-600">
                      ⭐ {t('labUi.rider.goldBadgesHint1')}{' '}
                      <button onClick={() => setPageTab('badges')} className="text-yellow-500 underline">{t('labUi.rider.tabBadges')}</button>
                      {t('labUi.rider.goldBadgesHint2')}
                    </p>
                  </div>
                </>
              )}

              {/* ── PARK fields ── */}
              {cardType === 'park' && (
                <div className="space-y-5 border-t border-white/8 pt-4">
                  <div className="flex items-start gap-3 rounded-xl border border-blue-500/20 bg-blue-500/5 p-4 text-xs text-gray-400">
                    <Info className="mt-0.5 h-4 w-4 flex-shrink-0 text-blue-400" />
                    <div>
                      <span className="font-bold text-blue-300">{t('labUi.rider.parkOwnersOnly')}</span>{' '}
                      {t('labUi.rider.parkOwnersDesc')}
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <Label className="mb-1.5 block text-[10px] uppercase tracking-widest text-gray-500">{t('labUi.rider.parkName')}</Label>
                      <Input value={issuerName} onChange={e => setIssuerName(e.target.value)}
                        placeholder={t('labUi.rider.parkNamePlaceholder')} className="h-11 border-white/10 bg-black/50" />
                    </div>
                    <div>
                      <Label className="mb-1.5 block text-[10px] uppercase tracking-widest text-gray-500">{t('labUi.rider.riderName')}</Label>
                      <Input value={recipientName} onChange={e => setRecipientName(e.target.value)}
                        placeholder={t('labUi.rider.riderNamePlaceholder')} className="h-11 border-white/10 bg-black/50" />
                    </div>
                  </div>

                  <div>
                    <Label className="mb-1.5 block text-[10px] uppercase tracking-widest text-gray-500">{t('labUi.rider.riderNpub')}</Label>
                    <Input
                      value={recipientNpub}
                      onChange={e => setRecipientNpub(e.target.value)}
                      placeholder="npub1…"
                      className="h-11 border-white/10 bg-black/50 font-mono text-xs"
                    />
                  </div>

                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <Label className="mb-1.5 block text-[10px] uppercase tracking-widest text-gray-500">{t('labUi.rider.accessLevel')}</Label>
                      <Select value={accessLevel} onValueChange={setAccessLevel}>
                        <SelectTrigger className="h-11 border-white/10 bg-black/50"><SelectValue /></SelectTrigger>
                        <SelectContent>
                          {['Full Access','Supervised','Beginner Zone','Street Only','Bowl Only','Members Only'].map(l =>
                            <SelectItem key={l} value={l}>{l}</SelectItem>)}
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label className="mb-1.5 block text-[10px] uppercase tracking-widest text-gray-500">{t('labUi.rider.validThru')}</Label>
                      <Input type="date" value={validThru} onChange={e => setValidThru(e.target.value)}
                        placeholder="2026-12-31" className="h-11 border-white/10 bg-black/50" />
                    </div>
                  </div>

                  <div>
                    <Label className="mb-1.5 block text-[10px] uppercase tracking-widest text-gray-500">{t('cardUi.venue')} *</Label>
                    {myVenues.length > 0 ? (
                      <>
                        <Select value={venueId} onValueChange={setVenueId}>
                          <SelectTrigger className="h-11 border-white/10 bg-black/50"><SelectValue placeholder={t('cardUi.venuePick')} /></SelectTrigger>
                          <SelectContent>
                            {myVenues.map(s => <SelectItem key={s.id} value={s.id}>{s.title}</SelectItem>)}
                          </SelectContent>
                        </Select>
                        <p className="mt-1.5 text-[10px] text-gray-600">{t('cardUi.venueHint')}</p>
                      </>
                    ) : (
                      <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 p-3 text-[11px] text-amber-400">
                        {t('cardUi.parkNoVenue')}{' '}
                        <Link to="/create-spot" className="underline">{t('cardUi.parkAddVenue')}</Link>
                      </div>
                    )}
                  </div>

                  <Button
                    onClick={handlePublishParkCard}
                    disabled={!venueSpot || !recipientNpub.trim()}
                    className="h-12 w-full gap-2 bg-[#ccff00] font-black uppercase text-black hover:bg-[#b8e600] disabled:opacity-40"
                  >
                    <Zap className="h-4 w-4" />
                    {t('labUi.rider.publishToNostr')}
                  </Button>

                  {issuedPasses.length > 0 && (
                    <div className="border-t border-white/8 pt-4">
                      <p className="mb-2 text-[10px] font-black uppercase tracking-widest text-gray-600">{t('cardUi.parkIssued')}</p>
                      <div className="space-y-2">
                        {issuedPasses.slice(0, 6).map((p) => (
                          <div key={p.id} className="flex items-center justify-between gap-2 text-[11px]">
                            <span className="truncate text-gray-400">
                              {p.holder ? `${nip19.npubEncode(p.holder).slice(0, 12)}…` : '—'}{p.accessLevel ? ` · ${p.accessLevel}` : ''}
                            </span>
                            <span className="flex shrink-0 items-center gap-1.5">
                              <NfcWriteButton compact url={user ? cardVerifyUrl(PARK_ACCESS_CARD_KIND, user.pubkey, p.d) : undefined} />
                              {p.status === 'revoked' ? (
                                <span className="font-bold uppercase text-red-400">{t('cardUi.parkRevoked')}</span>
                              ) : (
                                <Button
                                  size="sm"
                                  variant="outline"
                                  className="h-7 shrink-0 border-white/10 text-[10px]"
                                  disabled={revokingPass}
                                  onClick={() => {
                                    void revokePass(p)
                                      .then(() => toast({ title: t('cardUi.parkRevoked') }))
                                      .catch(() => toast({ title: t('cardUi.parkRevokeFailed'), variant: 'destructive' }));
                                  }}
                                >
                                  {t('cardUi.parkRevoke')}
                                </Button>
                              )}
                            </span>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              )}

              {/* ── CREW fields ── */}
              {cardType === 'crew' && (
                <div className="space-y-5 border-t border-white/8 pt-4">
                  <p className="text-[10px] font-black uppercase tracking-widest text-gray-600">{t('cardUi.crew.pick')}</p>
                  {memberships.length > 0 ? (
                    <Select value={activeCrew?.id ?? ''} onValueChange={setCrewId}>
                      <SelectTrigger className="h-11 border-white/10 bg-black/50"><SelectValue /></SelectTrigger>
                      <SelectContent>
                        {memberships.map(m => (
                          <SelectItem key={m.crew.id} value={m.crew.id}>{m.crew.name} · {m.role}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  ) : (
                    <p className="text-xs text-gray-500">{t('cardUi.crew.none')}</p>
                  )}
                  <p className="text-[10px] text-gray-600">{t('cardUi.crew.hint')}</p>
                </div>
              )}

              {/* ── EVENT fields (pass / wristband) ── */}
              {cardType === 'event' && (
                <div className="space-y-5 border-t border-white/8 pt-4">
                  <p className="text-[10px] font-black uppercase tracking-widest text-gray-600">{t('cardUi.event.pick')}</p>
                  {myEvents.length > 0 ? (
                    <Select value={activeEvent?.id ?? ''} onValueChange={setEventId}>
                      <SelectTrigger className="h-11 border-white/10 bg-black/50"><SelectValue /></SelectTrigger>
                      <SelectContent>
                        {myEvents.map(ev => (
                          <SelectItem key={ev.id} value={ev.id}>{ev.title}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  ) : (
                    <p className="text-xs text-gray-500">{t('cardUi.event.none')}</p>
                  )}
                  <p className="text-[10px] text-gray-600">{t('cardUi.event.hint')}</p>

                  {activeEvent && user && activeEvent.pubkey === user.pubkey && (
                    <div className="space-y-3 border-t border-white/8 pt-4">
                      <p className="text-[10px] font-black uppercase tracking-widest text-gray-600">{t('cardUi.event.issuePass')}</p>
                      <Input
                        value={recipientNpub}
                        onChange={(e) => setRecipientNpub(e.target.value)}
                        placeholder="npub1…"
                        className="h-11 border-white/10 bg-black/50 font-mono text-xs"
                      />
                      <Button
                        onClick={handlePublishEventPass}
                        disabled={!recipientNpub.trim()}
                        className="h-11 w-full gap-2 bg-[#ccff00] font-black uppercase text-black hover:bg-[#b8e600] disabled:opacity-40"
                      >
                        <Ticket className="h-4 w-4" />
                        {t('cardUi.event.issuePassBtn')}
                      </Button>
                      <p className="text-[10px] text-gray-600">{t('cardUi.event.issuePassHint')}</p>

                      {eventPasses.length > 0 && (
                        <div className="space-y-2 border-t border-white/8 pt-3">
                          <p className="text-[10px] font-black uppercase tracking-widest text-gray-600">{t('cardUi.event.issuedPasses')}</p>
                          {eventPasses.slice(0, 6).map((p) => (
                            <div key={p.id} className="flex items-center justify-between gap-2 text-[11px]">
                              <span className="truncate text-gray-400">
                                {p.holder ? `${nip19.npubEncode(p.holder).slice(0, 12)}…` : '—'}
                              </span>
                              <span className="flex shrink-0 items-center gap-1.5">
                                <NfcWriteButton compact url={user ? cardVerifyUrl(PARK_ACCESS_CARD_KIND, user.pubkey, p.d) : undefined} />
                                {p.status === 'revoked' ? (
                                  <span className="font-bold uppercase text-red-400">{t('cardUi.parkRevoked')}</span>
                                ) : (
                                  <Button
                                    size="sm"
                                    variant="outline"
                                    className="h-7 shrink-0 border-white/10 text-[10px]"
                                    disabled={revokingPass}
                                    onClick={() => {
                                      void revokePass(p)
                                        .then(() => toast({ title: t('cardUi.parkRevoked') }))
                                        .catch(() => toast({ title: t('cardUi.parkRevokeFailed'), variant: 'destructive' }));
                                    }}
                                  >
                                    {t('cardUi.parkRevoke')}
                                  </Button>
                                )}
                              </span>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        )}

        {/* TAB: MY BADGES */}
        {pageTab === 'badges' && (
          <div className="mx-auto max-w-2xl space-y-6">
            <div className="py-2 text-center">
              <p className="mx-auto max-w-xs text-sm text-gray-400">{t('labUi.rider.badgesIntro')}</p>
            </div>
            <ReceivedBadgesPanel pubkey={user.pubkey} />
            <div className="border-t border-white/8 pt-2">
              <p className="mb-3 text-center text-xs text-gray-600">{t('labUi.rider.earnMore')}</p>
              <Button
                variant="outline"
                onClick={() => setPageTab('award')}
                className="w-full gap-2 border-yellow-500/30 text-yellow-400 hover:bg-yellow-500/10"
              >
                <Award className="h-4 w-4" />
                {t('labUi.rider.awardSomeone')}
              </Button>
            </div>
          </div>
        )}

        {/* TAB: AWARD BADGE */}
        {pageTab === 'award' && (
          <div className="mx-auto max-w-2xl space-y-5">
            <div className="flex items-center gap-3 rounded-xl border border-yellow-500/20 bg-yellow-500/5 p-4">
              <Award className="h-5 w-5 flex-shrink-0 text-yellow-400" />
              <div>
                <div className="text-sm font-bold text-yellow-300">{t('labUi.rider.youSawIt')}</div>
                <div className="mt-0.5 text-xs text-gray-400">{t('labUi.rider.youSawItDesc')}</div>
              </div>
            </div>

            <AwardBadgeInline issuerPubkey={user.pubkey} onSuccess={() => setPageTab('badges')} />
          </div>
        )}

        {/* TAB: MY PASSES — access passes issued to me */}
        {pageTab === 'passes' && (
          <div className="mx-auto max-w-2xl space-y-5">
            {receivedPasses.length === 0 ? (
              <p className="py-10 text-center text-sm text-gray-500">{t('cardUi.passes.none')}</p>
            ) : (
              <>
                {passCardData && (
                  <div className="space-y-4">
                    <div className="flex justify-center">
                      <CardPreview d={passCardData} zoomable />
                    </div>
                    <Button
                      onClick={handlePrintPass}
                      disabled={rendering}
                      className="h-11 w-full gap-2 bg-white/5 font-black uppercase text-gray-200 hover:bg-white/10"
                    >
                      <Printer className="h-4 w-4" /> {t('labUi.rider.print')}
                    </Button>
                    <NfcWriteButton url={passCardData.verifyUrl} />
                  </div>
                )}
                <div className="space-y-2">
                  {receivedPasses.map((p) => (
                    <button
                      key={p.id}
                      type="button"
                      onClick={() => setSelectedPass(p)}
                      className={cn(
                        'w-full rounded-xl border p-3 text-left transition-all',
                        selectedPass?.id === p.id
                          ? 'border-[#ccff00]/50 bg-[#ccff00]/10'
                          : 'border-white/8 bg-black/30 hover:border-white/20',
                      )}
                    >
                      <div className="flex items-center justify-between gap-2">
                        <span className="truncate text-sm font-bold text-white">{p.issuer || t('cardUi.passes.pass')}</span>
                        {p.status === 'revoked' && (
                          <span className="shrink-0 text-[10px] font-black uppercase text-red-400">{t('cardUi.parkRevoked')}</span>
                        )}
                      </div>
                      <div className="mt-0.5 text-[11px] text-gray-500">
                        {[p.accessLevel, p.validThru ? `${t('cardUi.verify.validThru')} ${p.validThru}` : ''].filter(Boolean).join('  ·  ')}
                      </div>
                    </button>
                  ))}
                </div>
              </>
            )}
          </div>
        )}

      </div>
    </>
  );
}

// ─── Inline award form (used on the Award tab) ────────────────────────────────
function AwardBadgeInline({ issuerPubkey: _issuerPubkey, onSuccess }: { issuerPubkey: string; onSuccess: () => void }) {
  const { t } = useTranslation();
  const { mutate: publishEvent, isPending } = useNostrPublish();
  const { toast } = useToast();
  const [recipientNpub, setRecipientNpub] = useState('');
  const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
  const [spotName, setSpotName] = useState('');

  const toggleSkill = (id: string) =>
    setSelectedSkills(prev => prev.includes(id) ? prev.filter(s => s !== id) : [...prev, id]);

  const handleAward = () => {
    if (!recipientNpub.trim() || selectedSkills.length === 0) {
      toast({ title: t('labUi.rider.addRiderSkill'), variant: 'destructive' });
      return;
    }
    let recipientHex = '';
    try {
      const decoded = nip19.decode(recipientNpub.trim());
      if (decoded.type !== 'npub') throw new Error();
      recipientHex = decoded.data;
    } catch {
      toast({ title: t('labUi.rider.invalidNpub'), variant: 'destructive' });
      return;
    }
    const tags: string[][] = [
      ['p', recipientHex], ['t', 'skill-badge'],
      ['alt', `Skill badge awarded: ${selectedSkills.join(', ')}`],
      ...selectedSkills.map(s => ['skill', s]),
    ];
    if (spotName.trim()) tags.push(['spot', spotName.trim()]);
    publishEvent({ kind: SKILL_BADGE_KIND, content: '', tags }, {
      onSuccess: () => {
        toast({ title: t('labUi.rider.badgeAwarded'), description: t('labUi.rider.badgeSent', { skills: selectedSkills.join(', ') }) });
        setRecipientNpub(''); setSelectedSkills([]); setSpotName('');
        onSuccess();
      },
      onError: (e) => toast({ title: t('labUi.rider.failed'), description: String(e), variant: 'destructive' }),
    });
  };

  return (
    <div className="space-y-5">
      <div>
        <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">{t('labUi.rider.riderNpub')}</Label>
        <Input
          value={recipientNpub}
          onChange={e => setRecipientNpub(e.target.value)}
          placeholder="npub1…"
          className="bg-black/50 border-white/10 font-mono text-xs h-11"
        />
      </div>

      <div>
        <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-2 block">{t('labUi.rider.skillsWitnessed')}</Label>
        <div className="flex flex-wrap gap-1.5">
          {SKILL_OPTIONS.map(s => (
            <button
              key={s.id}
              onClick={() => toggleSkill(s.id)}
              className={cn(
                'px-2.5 py-1.5 rounded-lg text-xs font-bold border transition-all',
                selectedSkills.includes(s.id)
                  ? 'bg-yellow-500/15 border-yellow-400/50 text-yellow-200'
                  : 'bg-black/30 border-white/8 text-gray-500 hover:border-white/20'
              )}
            >
              {s.icon} {s.label}
            </button>
          ))}
        </div>
      </div>

      <div>
        <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">{t('labUi.rider.whereSeen')} <span className="normal-case text-gray-600">{t('labUi.rider.optional')}</span></Label>
        <Input
          value={spotName}
          onChange={e => setSpotName(e.target.value)}
          placeholder="MACBA, The Berrics, Burnside…"
          className="bg-black/50 border-white/10 text-sm h-11"
        />
      </div>

      <Button
        onClick={handleAward}
        disabled={isPending || selectedSkills.length === 0 || !recipientNpub.trim()}
        className="w-full h-12 bg-yellow-500 hover:bg-yellow-400 text-black font-black uppercase gap-2"
      >
        <Award className="h-4 w-4" />
        {isPending ? t('labUi.rider.signingOnNostr') : t('labUi.rider.awardBadge')}
      </Button>
    </div>
  );
}