/**
 * 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 { useState, 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 { 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 { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';

import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useAuthor } from '@/hooks/useAuthor';
import { useRiderStats } from '@/hooks/useRiderStats';
import { useNostrPublish } from '@/hooks/useNostrPublish';
import { useToast } from '@/hooks/useToast';
import { useNostr } from '@/hooks/useNostr';
import { useQuery } from '@tanstack/react-query';
import { genUserName } from '@/lib/genUserName';
import { cn } from '@/lib/utils';
import type { NostrEvent } from '@nostrify/nostrify';
import { Printer, Loader2, Share2, Download, Check, Copy, Award, Zap, Info, Palette, Shield, ChevronUp, ChevronDown, User, Building2 } from 'lucide-react';
// ─── Card canvas renderer ─────────────────────────────────────────────────────
// Draws the card entirely via Canvas 2D API — 100% reliable export,
// no CSS capture, no scaling issues, no background-stripping.
// Card is 856×540px (10× credit-card mm, high-res for printing).

const CARD_W = 856;
const CARD_H = 540;

interface CanvasCardData {
  type: 'rider' | 'park';
  themeId: string;
  name: string;
  nip05?: string;
  avatarUrl?: string;
  pubkey: string;
  npub: string;
  style: string;
  skills: string[];
  sponsors: string;
  ridesFor: string;
  showSpots: boolean;
  showZaps: boolean;
  showEvents: boolean;
  spotsAdded: number;
  zapsReceived: number;
  eventsCreated: number;
  memberYear: string;
  receivedBadges: BadgeAward[];
  // Park
  issuerName: string;
  recipientName: string;
  accessLevel: string;
  validThru: string;
}

// Theme palette for canvas drawing
const THEME_PALETTE: Record<string, {
  bg1: string; bg2: string; bg3: string;
  accent: string; accent2: string;
  stripe1: string; stripe2: string;
  muted: string; chipBg: string; chipBorder: string;
  text: string; shopColor: string; sponsorColor: string;
  sidebarBg: string;
}> = {
  thug:     { bg1: '#0a0a0a', bg2: '#180006', bg3: '#0d0d0d', accent: '#ff0040', accent2: '#ccff00', stripe1: '#ff0040', stripe2: '#ff6600', muted: 'rgba(255,255,255,0.5)', chipBg: 'rgba(255,0,64,0.18)', chipBorder: 'rgba(255,0,64,0.45)', text: '#ffffff', shopColor: '#ccff00',   sponsorColor: '#ff9900', sidebarBg: 'rgba(255,0,64,0.07)' },
  lime:     { bg1: '#040c00', bg2: '#081500', bg3: '#040c00', accent: '#ccff00', accent2: '#ff6600', stripe1: '#ccff00', stripe2: '#88ff00', muted: 'rgba(255,255,255,0.5)', chipBg: 'rgba(204,255,0,0.14)', chipBorder: 'rgba(204,255,0,0.4)', text: '#ffffff', shopColor: '#ff6600',   sponsorColor: '#ff0040', sidebarBg: 'rgba(204,255,0,0.05)' },
  chrome:   { bg1: '#111111', bg2: '#252525', bg3: '#0e0e0e', accent: '#d0d0d0', accent2: '#ff6600', stripe1: '#777777', stripe2: '#cccccc', muted: 'rgba(220,220,220,0.55)', chipBg: 'rgba(200,200,200,0.12)', chipBorder: 'rgba(200,200,200,0.3)', text: '#e8e8e8', shopColor: '#ff9900', sponsorColor: '#64cfff', sidebarBg: 'rgba(200,200,200,0.04)' },
  wood:     { bg1: '#2e1804', bg2: '#4a2a0c', bg3: '#261404', accent: '#f5c842', accent2: '#ff6600', stripe1: '#8b5e3c', stripe2: '#d4a05a', muted: 'rgba(245,230,200,0.6)', chipBg: 'rgba(160,100,40,0.25)', chipBorder: 'rgba(200,140,60,0.5)', text: '#f5e6c8', shopColor: '#ff9944', sponsorColor: '#aaffcc', sidebarBg: 'rgba(160,100,40,0.12)' },
  midnight: { bg1: '#010610', bg2: '#040c22', bg3: '#020814', accent: '#64a0ff', accent2: '#ccff00', stripe1: '#2040aa', stripe2: '#64a0ff', muted: 'rgba(200,220,255,0.55)', chipBg: 'rgba(100,160,255,0.12)', chipBorder: 'rgba(100,160,255,0.35)', text: '#d0e4ff', shopColor: '#ccff00',   sponsorColor: '#ff88cc', sidebarBg: 'rgba(100,160,255,0.05)' },
  sunset:   { bg1: '#0e0004', bg2: '#160606', bg3: '#0a040c', accent: '#ff6020', accent2: '#ff0080', stripe1: '#ff0040', stripe2: '#ffaa00', muted: 'rgba(255,200,150,0.6)', chipBg: 'rgba(255,80,0,0.16)', chipBorder: 'rgba(255,80,0,0.4)', text: '#ffd0a0', shopColor: '#ffdd00',   sponsorColor: '#ff88ff', sidebarBg: 'rgba(255,80,0,0.07)' },
};

async function loadImage(url: string): Promise<HTMLImageElement | null> {
  return new Promise((resolve) => {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => resolve(img);
    img.onerror = () => resolve(null);
    // Only proxy actual HTTP URLs — data: URIs must never go through proxy
    if (url.startsWith('data:') || url.startsWith('blob:')) {
      img.src = url;
    } else {
      img.src = `https://proxy.shakespeare.diy/?url=${encodeURIComponent(url)}`;
    }
    setTimeout(() => resolve(null), 5000);
  });
}

// Draw text that wraps or truncates to fit maxWidth, returns lines drawn
function fillTextFit(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, maxWidth: number): void {
  let t = text;
  while (ctx.measureText(t).width > maxWidth && t.length > 2) {
    t = t.slice(0, -1);
  }
  if (t.length < text.length) t = t.slice(0, -1) + '…';
  ctx.fillText(t, x, y);
}

// Draw a labeled row: small muted label above, value below
function _drawLabeledRow(
  ctx: CanvasRenderingContext2D,
  label: string, value: string,
  x: number, y: number, maxW: number,
  labelColor: string, valueColor: string,
  labelSize: number, valueSize: number,
  bold = false,
) {
  ctx.fillStyle = labelColor;
  ctx.font = `${labelSize}px system-ui, sans-serif`;
  ctx.fillText(label.toUpperCase(), x, y);
  ctx.fillStyle = valueColor;
  ctx.font = `${bold ? 'bold ' : ''}${valueSize}px system-ui, sans-serif`;
  fillTextFit(ctx, value, x, y + valueSize + 2, maxW);
}

function roundRect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) {
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.lineTo(x + w - r, y);
  ctx.quadraticCurveTo(x + w, y, x + w, y + r);
  ctx.lineTo(x + w, y + h - r);
  ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
  ctx.lineTo(x + r, y + h);
  ctx.quadraticCurveTo(x, y + h, x, y + h - r);
  ctx.lineTo(x, y + r);
  ctx.quadraticCurveTo(x, y, x + r, y);
  ctx.closePath();
}

async function drawCardToCanvas(data: CanvasCardData): Promise<string> {
  const canvas = document.createElement('canvas');
  canvas.width  = CARD_W;
  canvas.height = CARD_H;
  const ctx = canvas.getContext('2d')!;
  const p = THEME_PALETTE[data.themeId] ?? THEME_PALETTE.thug;

  // ─── 1. Background ───────────────────────────────────────────────────────
  const bgGrad = ctx.createLinearGradient(0, 0, CARD_W, CARD_H);
  bgGrad.addColorStop(0,   p.bg1);
  bgGrad.addColorStop(0.5, p.bg2);
  bgGrad.addColorStop(1,   p.bg3);
  roundRect(ctx, 0, 0, CARD_W, CARD_H, 40);
  ctx.fillStyle = bgGrad;
  ctx.fill();

  // ─── 2. Left sidebar tint ────────────────────────────────────────────────
  const SIDEBAR_W = 240;
  roundRect(ctx, 0, 0, SIDEBAR_W, CARD_H, 40);
  ctx.fillStyle = p.sidebarBg;
  ctx.fill();
  // vertical separator
  ctx.strokeStyle = p.accent;
  ctx.globalAlpha = 0.15;
  ctx.lineWidth = 1;
  ctx.beginPath(); ctx.moveTo(SIDEBAR_W, 40); ctx.lineTo(SIDEBAR_W, CARD_H - 40); ctx.stroke();
  ctx.globalAlpha = 1;

  // ─── 3. Top stripe ───────────────────────────────────────────────────────
  const stripe = ctx.createLinearGradient(0, 0, CARD_W, 0);
  stripe.addColorStop(0, p.stripe1);
  stripe.addColorStop(1, p.stripe2);
  ctx.fillStyle = stripe;
  ctx.fillRect(0, 0, CARD_W, 10);

  // ─── 4. QR code (top-right, generated first — data: URI safe) ────────────
  const qrUrl  = `https://skate-spots.org/${data.npub}`;
  const qrSize = 168;
  const qrX    = CARD_W - 32 - qrSize;
  const qrY    = 28;
  let qrImg: HTMLImageElement | null = null;
  try {
    // Dynamic import — avoids canvas API access at module load time
    const QRCode = (await import('qrcode')).default;
    const qrDataUrl = await QRCode.toDataURL(qrUrl, {
      width: qrSize * 2,
      margin: 2,
      errorCorrectionLevel: 'M',
      color: { dark: '#000000', light: '#ffffff' },
    });
    qrImg = await loadImage(qrDataUrl); // data: URI — no proxy
  } catch { /* skip */ }

  if (qrImg) {
    roundRect(ctx, qrX - 8, qrY - 8, qrSize + 16, qrSize + 16, 10);
    ctx.fillStyle = '#ffffff';
    ctx.fill();
    ctx.drawImage(qrImg, qrX, qrY, qrSize, qrSize);
  }
  ctx.fillStyle = p.muted;
  ctx.font = '13px system-ui, sans-serif';
  ctx.textAlign = 'center';
  ctx.fillText('SCAN TO VERIFY', qrX + qrSize / 2, qrY + qrSize + 20);
  ctx.textAlign = 'left';

  // ─── 5. Load avatar ───────────────────────────────────────────────────────
  let avatarImg: HTMLImageElement | null = null;
  if (data.avatarUrl) avatarImg = await loadImage(data.avatarUrl);

  if (data.type === 'rider') {
    // ═══════════════════════════════════════════════════════════════════════
    // SKATER LICENSE LAYOUT
    // Left sidebar: avatar + stats + since
    // Right zone: name / nip05 / style / shop / sponsors / skills
    // ═══════════════════════════════════════════════════════════════════════

    // ── Left: Avatar ─────────────────────────────────────────────────────
    const avSize = 176;
    const avX = (SIDEBAR_W - avSize) / 2;
    const avY = 22;
    roundRect(ctx, avX, avY, avSize, avSize, 14);
    ctx.fillStyle = p.chipBg;
    ctx.fill();
    if (avatarImg) {
      ctx.save();
      roundRect(ctx, avX, avY, avSize, avSize, 14);
      ctx.clip();
      ctx.drawImage(avatarImg, avX, avY, avSize, avSize);
      ctx.restore();
    } else {
      ctx.font = '72px serif';
      ctx.textAlign = 'center';
      ctx.fillStyle = p.accent;
      ctx.fillText('🛹', avX + avSize / 2, avY + avSize / 2 + 24);
      ctx.textAlign = 'left';
    }

    // ── Left: Stats block ─────────────────────────────────────────────────
    const statsStartY = avY + avSize + 20;
    const statItems = [
      data.showSpots  ? { label: 'SPOTS',    value: String(data.spotsAdded),    color: p.accent  } : null,
      data.showZaps   ? { label: 'ZAPS ⚡',  value: String(data.zapsReceived),  color: p.accent2 } : null,
      data.showEvents ? { label: 'EVENTS',   value: String(data.eventsCreated), color: '#ff7733' } : null,
    ].filter(Boolean) as { label: string; value: string; color: string }[];

    const statColW = SIDEBAR_W / Math.max(statItems.length, 1);
    statItems.forEach((s, i) => {
      const sx = i * statColW + statColW / 2;
      ctx.fillStyle = p.muted;
      ctx.font = '12px system-ui, sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText(s.label, sx, statsStartY);
      ctx.fillStyle = s.color;
      ctx.font = 'bold 30px system-ui, sans-serif';
      ctx.fillText(s.value, sx, statsStartY + 34);
    });
    ctx.textAlign = 'left';

    // ── Left: Since + npub ────────────────────────────────────────────────
    const sinceY = statsStartY + (statItems.length > 0 ? 56 : 0);
    ctx.fillStyle = p.muted;
    ctx.font = '13px system-ui, sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText(`SINCE ${data.memberYear}`, SIDEBAR_W / 2, sinceY);
    ctx.textAlign = 'left';

    // ── Right zone ────────────────────────────────────────────────────────
    const RX = SIDEBAR_W + 28;        // right content X start
    const RMaxW = qrX - RX - 20;     // max width before QR
    let ry = 52;                      // right Y cursor

    // Brand tag (small, above name)
    ctx.fillStyle = p.accent;
    ctx.font = 'bold 14px system-ui, sans-serif';
    ctx.fillText('🛹 SKATESPOTS', RX, ry);
    ry += 6;
    ctx.fillStyle = p.muted;
    ctx.font = '12px system-ui, sans-serif';
    ctx.fillText('SKATER LICENSE', RX, ry + 14);
    ry += 30;

    // Name — big and bold
    ctx.fillStyle = p.text;
    ctx.font = 'bold 52px system-ui, sans-serif';
    fillTextFit(ctx, data.name.toUpperCase(), RX, ry + 48, RMaxW);
    ry += 58;

    // nip05
    if (data.nip05) {
      ctx.fillStyle = p.accent;
      ctx.font = 'italic 20px Georgia, serif';
      fillTextFit(ctx, `@${data.nip05.split('@')[0]}`, RX, ry, RMaxW);
      ry += 28;
    }

    // Thin divider
    ctx.strokeStyle = p.accent;
    ctx.globalAlpha = 0.2;
    ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(RX, ry); ctx.lineTo(RX + RMaxW, ry); ctx.stroke();
    ctx.globalAlpha = 1;
    ry += 18;

    // Style chip
    if (data.style) {
      ctx.font = 'bold 16px system-ui, sans-serif';
      const chipTxt = data.style.toUpperCase();
      const chipW = ctx.measureText(chipTxt).width + 24;
      roundRect(ctx, RX, ry - 18, chipW, 26, 6);
      ctx.fillStyle = p.chipBg;
      ctx.fill();
      ctx.strokeStyle = p.chipBorder;
      ctx.lineWidth = 1;
      ctx.stroke();
      ctx.fillStyle = p.accent;
      ctx.fillText(chipTxt, RX + 12, ry - 1);
      ry += 22;
    }

    // ── SKATE SHOP — distinctive color + italic font ──────────────────────
    if (data.ridesFor) {
      ctx.fillStyle = p.muted;
      ctx.font = '11px system-ui, sans-serif';
      ctx.fillText('RIDES FOR', RX, ry);
      ry += 4;
      ctx.fillStyle = p.shopColor;
      ctx.font = 'bold italic 22px Georgia, serif';
      fillTextFit(ctx, data.ridesFor, RX, ry + 20, RMaxW);
      ry += 32;
    }

    // ── SPONSORS — different color + lighter weight ────────────────────────
    if (data.sponsors) {
      ctx.fillStyle = p.muted;
      ctx.font = '11px system-ui, sans-serif';
      ctx.fillText('SPONSORS', RX, ry);
      ry += 4;
      ctx.fillStyle = p.sponsorColor;
      ctx.font = '19px system-ui, sans-serif';
      fillTextFit(ctx, data.sponsors, RX, ry + 18, RMaxW);
      ry += 30;
    }

    // Thin divider before skills
    if (data.skills.length > 0 || data.receivedBadges.length > 0) {
      ctx.strokeStyle = p.accent;
      ctx.globalAlpha = 0.15;
      ctx.lineWidth = 1;
      const divY = Math.max(ry + 4, CARD_H - 130);
      ctx.beginPath(); ctx.moveTo(RX, divY); ctx.lineTo(RX + RMaxW, divY); ctx.stroke();
      ctx.globalAlpha = 1;

      // ── Skill chips ────────────────────────────────────────────────────
      const skillsToShow = [
        ...data.skills.slice(0, 5).map(id => {
          const s = SKILL_OPTIONS.find(o => o.id === id);
          return s ? { label: s.label, gold: false } : null;
        }).filter(Boolean),
        ...data.receivedBadges.slice(0, 3).map(b => {
          const s = SKILL_OPTIONS.find(o => o.id === b.skill);
          return s ? { label: `★ ${s.label}`, gold: true } : null;
        }).filter(Boolean),
      ] as { label: string; gold: boolean }[];

      let chipX = RX;
      let chipY = divY + 14;
      ctx.font = 'bold 14px system-ui, sans-serif';
      skillsToShow.forEach(chip => {
        const chipW = ctx.measureText(chip.label).width + 18;
        if (chipX + chipW > RX + RMaxW) { chipX = RX; chipY += 28; }
        roundRect(ctx, chipX, chipY, chipW, 22, 5);
        ctx.fillStyle = chip.gold ? 'rgba(255,215,0,0.18)' : p.chipBg;
        ctx.fill();
        ctx.strokeStyle = chip.gold ? 'rgba(255,215,0,0.5)' : p.chipBorder;
        ctx.lineWidth = 0.8;
        ctx.stroke();
        ctx.fillStyle = chip.gold ? '#ffd700' : p.accent;
        ctx.fillText(chip.label, chipX + 9, chipY + 16);
        chipX += chipW + 6;
      });
    }

    // ── Full npub — bottom of right zone ──────────────────────────────────
    const npubY = CARD_H - 44;
    ctx.fillStyle = p.muted;
    ctx.font = '12px monospace';
    ctx.fillText(data.npub.slice(0, 44), RX, npubY);
    ctx.fillText(data.npub.slice(44), RX, npubY + 16);

  } else {
    // ═══════════════════════════════════════════════════════════════════════
    // PARK ACCESS LAYOUT
    // ═══════════════════════════════════════════════════════════════════════

    // ── Left: Avatar ─────────────────────────────────────────────────────
    const avSize = 176;
    const avX = (SIDEBAR_W - avSize) / 2;
    const avY = 22;
    roundRect(ctx, avX, avY, avSize, avSize, 14);
    ctx.fillStyle = p.chipBg;
    ctx.fill();
    if (avatarImg) {
      ctx.save();
      roundRect(ctx, avX, avY, avSize, avSize, 14);
      ctx.clip();
      ctx.drawImage(avatarImg, avX, avY, avSize, avSize);
      ctx.restore();
    }

    // Access level chip under avatar
    const alTxt = (data.accessLevel || 'FULL ACCESS').toUpperCase();
    ctx.font = 'bold 16px system-ui, sans-serif';
    const alW = ctx.measureText(alTxt).width + 24;
    const alX = (SIDEBAR_W - alW) / 2;
    const alY = avY + avSize + 16;
    roundRect(ctx, alX, alY, alW, 30, 7);
    ctx.fillStyle = p.accent;
    ctx.fill();
    ctx.fillStyle = p.bg1;
    ctx.fillText(alTxt, alX + 12, alY + 21);

    // valid thru under access level
    if (data.validThru) {
      ctx.fillStyle = p.muted;
      ctx.font = '12px system-ui, sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText('VALID THRU', SIDEBAR_W / 2, alY + 52);
      ctx.fillStyle = p.accent;
      ctx.font = 'bold 20px system-ui, sans-serif';
      ctx.fillText(data.validThru, SIDEBAR_W / 2, alY + 76);
      ctx.textAlign = 'left';
    }

    // ── Right zone ────────────────────────────────────────────────────────
    const RX = SIDEBAR_W + 28;
    const RMaxW = qrX - RX - 20;
    let ry = 52;

    // Park name + label
    ctx.fillStyle = p.accent;
    ctx.font = 'bold 14px system-ui, sans-serif';
    ctx.fillText(`🏟️ ${(data.issuerName || 'SKATEPARK').toUpperCase()}`, RX, ry);
    ry += 6;
    ctx.fillStyle = p.muted;
    ctx.font = '12px system-ui, sans-serif';
    ctx.fillText('PARK ACCESS CARD', RX, ry + 14);
    ry += 34;

    // Member name
    ctx.fillStyle = p.text;
    ctx.font = 'bold 50px system-ui, sans-serif';
    fillTextFit(ctx, (data.recipientName || 'MEMBER').toUpperCase(), RX, ry + 46, RMaxW);
    ry += 60;

    // Divider
    ctx.strokeStyle = p.accent;
    ctx.globalAlpha = 0.2;
    ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(RX, ry); ctx.lineTo(RX + RMaxW, ry); ctx.stroke();
    ctx.globalAlpha = 1;
    ry += 22;

    // Issued by
    ctx.fillStyle = p.muted;
    ctx.font = '13px system-ui, sans-serif';
    ctx.fillText('ISSUED BY PARK OWNER · NOSTR-SIGNED', RX, ry);
    ry += 26;

    // Full npub
    ctx.fillStyle = p.accent;
    ctx.font = '14px monospace';
    ctx.fillText(data.npub.slice(0, 44), RX, ry);
    ry += 20;
    ctx.fillText(data.npub.slice(44), RX, ry);
  }

  // ─── 6. Bottom bar ───────────────────────────────────────────────────────
  ctx.fillStyle = p.muted;
  ctx.globalAlpha = 0.18;
  ctx.fillRect(0, CARD_H - 36, CARD_W, 36);
  ctx.globalAlpha = 1;

  ctx.fillStyle = p.muted;
  ctx.font = '13px system-ui, sans-serif';
  ctx.fillText('SKATE-SPOTS.ORG · POWERED BY NOSTR', 32, CARD_H - 13);
  ctx.textAlign = 'right';
  ctx.fillText(data.memberYear, CARD_W - 32, CARD_H - 13);
  ctx.textAlign = 'left';

  return canvas.toDataURL('image/png');
}

// ─── Nostr kinds ──────────────────────────────────────────────────────────────
export const PARK_ACCESS_CARD_KIND = 35679;  // Park issues to rider
export const SKILL_BADGE_KIND      = 1293;   // Witness awards skill badge to rider

// ─── Themes ───────────────────────────────────────────────────────────────────
const THEMES = [
  { id: 'thug',     label: 'THUG',     emoji: '🔴', desc: 'Black + Neon Red' },
  { id: 'lime',     label: 'LIME',     emoji: '🟢', desc: 'Black + Neon Lime' },
  { id: 'chrome',   label: 'CHROME',   emoji: '⚪', desc: 'Steel & Silver' },
  { id: 'wood',     label: 'WOOD',     emoji: '🟤', desc: 'Woodgrain Classic' },
  { id: 'midnight', label: 'MIDNIGHT', emoji: '🔵', desc: 'Deep Blue' },
  { id: 'sunset',   label: 'SUNSET',   emoji: '🟠', desc: 'Orange & Pink' },
] as const;
type ThemeId = typeof THEMES[number]['id'];

// ─── Skill badges ─────────────────────────────────────────────────────────────
const SKILL_OPTIONS = [
  { id: 'kickflip',    label: 'Kickflip',    icon: '🛹' },
  { id: 'heelflip',   label: 'Heelflip',    icon: '👟' },
  { id: 'switch',     label: 'Switch',       icon: '🔄' },
  { id: 'nollie',     label: 'Nollie',       icon: '⬆️' },
  { id: 'fakie',      label: 'Fakie',        icon: '↩️' },
  { id: 'grind',      label: 'Grinds',       icon: '⚡' },
  { id: 'slide',      label: 'Slides',       icon: '➡️' },
  { id: 'manual',     label: 'Manuals',      icon: '🎯' },
  { id: 'vert',       label: 'Vert',         icon: '🏄' },
  { id: 'bowl',       label: 'Bowl',         icon: '🥣' },
  { id: 'street',     label: 'Street',       icon: '🏙️' },
  { id: 'park',       label: 'Park',         icon: '🌿' },
  { id: 'film',       label: 'Filmer',       icon: '🎥' },
  { id: 'diy',        label: 'DIY Builder',  icon: '🔨' },
] as const;

const STYLES = ['Street', 'Park', 'Vert', 'Bowl', 'DIY', 'All-terrain'] as const;

// ─── Helpers ──────────────────────────────────────────────────────────────────
function shortNpub(pubkey: string) {
  if (!pubkey) return '—';
  const npub = nip19.npubEncode(pubkey);
  return `${npub.slice(0, 12)}…${npub.slice(-6)}`;
}

function fullNpub(pubkey: string) {
  if (!pubkey) return '';
  return nip19.npubEncode(pubkey);
}

function memberSince(createdAt: number) {
  return new Date(createdAt * 1000).getFullYear().toString();
}

// Verification URL — scanning this on a phone opens the profile on skate-spots.org
function _verifyUrl(pubkey: string) {
  if (!pubkey) return 'https://skate-spots.org';
  return `https://skate-spots.org/${nip19.npubEncode(pubkey)}`;
}

// ─── Badge award event type ───────────────────────────────────────────────────
interface BadgeAward {
  witnessName: string;
  witnessPubkey: string;
  skill: string;
  spotName?: string;
  timestamp: number;
}

// ─── Card data shape ──────────────────────────────────────────────────────────
interface CardData {
  type: 'rider' | 'park';
  theme: ThemeId;
  holographic: boolean;
  // Rider
  name: string;
  nip05?: string;
  avatar?: string;
  pubkey: string;
  npub: string;
  style: string;
  skills: string[];
  sponsors: string;
  ridesFor: string;
  showSpots: boolean;
  showZaps: boolean;
  showEvents: boolean;
  spotsAdded: number;
  zapsReceived: number;
  eventsCreated: number;
  memberYear: string;
  receivedBadges: BadgeAward[];
  // Park
  issuerName: string;
  recipientName: string;
  accessLevel: string;
  validThru: string;
}

// ─── 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);
}

// ─── Card visual: Rider front ─────────────────────────────────────────────────
// Layout is STRICTLY pixel-fixed to match the 340×214px card container.
// No flex-1 / flex-grow — every row has a fixed pixel height.
function RiderFront({ d }: { d: CardData }) {
  const witnessedBadges = d.receivedBadges.slice(0, 2);

  return (
    // absolute inset — fills the card exactly
    <div className="absolute inset-0" style={{ padding: '10px 10px 20px 10px' }}>

      {/* ── Row 1: header (26px) ── */}
      <div className="flex items-start justify-between" style={{ height: '26px' }}>
        <div>
          <div className="text-[8px] font-black uppercase tracking-[0.18em] card-accent leading-none">
            🛹 SkateSpots
          </div>
          <div className="text-[6px] card-muted uppercase tracking-widest mt-[2px]">Skater License</div>
        </div>
        <div className="text-right">
          <div className="text-[5px] card-muted uppercase tracking-wide leading-none">npub</div>
          <div className="text-[6px] font-bold card-accent font-mono tracking-tight leading-none mt-[1px]">
            {shortNpub(d.pubkey)}
          </div>
          <div className="text-[5px] card-muted mt-[1px]">Since {d.memberYear}</div>
        </div>
      </div>

      {/* ── Row 2: main body (118px) ── */}
      <div className="flex items-stretch gap-[8px]" style={{ height: '118px', marginTop: '6px' }}>

        {/* Avatar */}
        <div className="flex-shrink-0 flex flex-col gap-[4px]">
          <div className="w-[52px] h-[52px] rounded-[6px] overflow-hidden border-[1.5px] border-white/20">
            {d.avatar ? (
              <img src={d.avatar} alt={d.name} className="w-full h-full object-cover" crossOrigin="anonymous" />
            ) : (
              <div className="w-full h-full flex items-center justify-center card-bg-chip text-[18px]">🛹</div>
            )}
          </div>
          {/* Stats under avatar */}
          <div className="space-y-[2px]">
            {d.showSpots && (
              <div className="flex items-center justify-between gap-1">
                <span className="text-[5px] card-muted">Spots</span>
                <span className="text-[7px] font-black card-accent leading-none">{d.spotsAdded}</span>
              </div>
            )}
            {d.showZaps && (
              <div className="flex items-center justify-between gap-1">
                <span className="text-[5px] card-muted">⚡</span>
                <span className="text-[7px] font-black card-accent2 leading-none">{d.zapsReceived}</span>
              </div>
            )}
            {d.showEvents && (
              <div className="flex items-center justify-between gap-1">
                <span className="text-[5px] card-muted">Evts</span>
                <span className="text-[7px] font-black leading-none" style={{ color: '#ff6600' }}>{d.eventsCreated}</span>
              </div>
            )}
          </div>
        </div>

        {/* Identity block */}
        <div className="flex-1 min-w-0 flex flex-col justify-start gap-[3px]">
          <div className="text-[14px] font-black uppercase truncate leading-tight">{d.name}</div>
          {d.nip05 && (
            <div className="text-[6.5px] card-accent truncate leading-none">@{d.nip05.split('@')[0]}</div>
          )}
          {d.style && (
            <span className="card-bg-chip text-[5.5px] font-bold uppercase px-[4px] py-[1px] rounded-[3px] card-accent w-fit">
              {d.style}
            </span>
          )}
          {d.ridesFor && (
            <div className="text-[5.5px] card-muted truncate leading-none">🏪 {d.ridesFor}</div>
          )}
          {d.sponsors && (
            <div className="text-[5.5px] card-muted truncate leading-none">🤝 {d.sponsors}</div>
          )}
          {/* Skills */}
          <div className="flex flex-wrap gap-[2px] mt-[2px]">
            {d.skills.slice(0, 4).map(sk => {
              const s = SKILL_OPTIONS.find(o => o.id === sk);
              return s ? (
                <span key={sk} className="card-bg-chip text-[5px] font-bold px-[3px] py-[1px] rounded-[2px] leading-none">
                  {s.icon} {s.label}
                </span>
              ) : null;
            })}
            {witnessedBadges.map((b, i) => {
              const s = SKILL_OPTIONS.find(o => o.id === b.skill);
              return s ? (
                <span
                  key={`w${i}`}
                  className="text-[5px] font-bold px-[3px] py-[1px] rounded-[2px] leading-none"
                  style={{ background: 'rgba(255,215,0,0.2)', border: '1px solid rgba(255,215,0,0.5)', color: '#ffd700' }}
                >
                  ⭐ {s.label}
                </span>
              ) : null;
            })}
          </div>
        </div>

        {/* QR placeholder — real QR renders in exported PNG */}
        <div className="flex-shrink-0 flex flex-col items-end justify-end">
          <div className="rounded-[3px]" style={{ background: '#fff', padding: '3px', width: '44px', height: '44px' }}>
            <div style={{ width: '38px', height: '38px', display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: '1px' }}>
              {Array.from({ length: 25 }).map((_, i) => (
                <div key={i} style={{ background: [0,1,2,5,6,7,10,14,17,18,19,22,23,24].includes(i) ? '#000' : '#fff' }} />
              ))}
            </div>
          </div>
          <div className="text-[4.5px] card-muted uppercase tracking-wide mt-[2px] text-right">Scan to verify</div>
        </div>
      </div>

      {/* ── Bottom bar: npub + website (absolute at bottom) ── */}
      <div
        className="absolute left-0 right-0 flex items-center justify-between px-[10px]"
        style={{ bottom: '6px' }}
      >
        <span className="card-muted text-[5px] uppercase tracking-widest">
          skate-spots.org · Powered by Nostr
        </span>
        <span className="card-muted text-[5px] font-mono" style={{ maxWidth: '120px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {shortNpub(d.pubkey)}
        </span>
      </div>
    </div>
  );
}

// ─── Card visual: Park Access front ──────────────────────────────────────────
function ParkFront({ d }: { d: CardData }) {

  return (
    <div className="absolute inset-0" style={{ padding: '10px 10px 20px 10px' }}>

      {/* Row 1: header */}
      <div className="flex items-center justify-between" style={{ height: '26px' }}>
        <div>
          <div className="text-[8px] font-black uppercase tracking-[0.15em] card-accent leading-none">
            🏟️ {d.issuerName || 'Skatepark'}
          </div>
          <div className="text-[6px] card-muted uppercase tracking-widest mt-[2px]">Access Pass</div>
        </div>
        <div className="card-bg-chip px-[6px] py-[2px] rounded-[4px]">
          <span className="text-[7px] font-black uppercase card-accent">{d.accessLevel || 'Full Access'}</span>
        </div>
      </div>

      {/* Row 2: main body */}
      <div className="flex items-stretch gap-[8px]" style={{ height: '118px', marginTop: '6px' }}>

        {/* Avatar */}
        <div className="flex-shrink-0">
          <div className="w-[52px] h-[52px] rounded-[6px] overflow-hidden border-[1.5px] border-white/20">
            {d.avatar ? (
              <img src={d.avatar} alt={d.recipientName} className="w-full h-full object-cover" crossOrigin="anonymous" />
            ) : (
              <div className="w-full h-full flex items-center justify-center card-bg-chip text-[18px]">🛹</div>
            )}
          </div>
        </div>

        {/* Identity */}
        <div className="flex-1 min-w-0 flex flex-col justify-start gap-[3px]">
          <div className="text-[13px] font-black uppercase truncate leading-tight">{d.recipientName || 'Member Name'}</div>
          <div className="text-[5.5px] card-muted font-mono leading-none truncate">{shortNpub(d.pubkey)}</div>
          <div className="text-[5.5px] card-muted leading-none">Issued by park owner · Nostr-signed</div>
          {d.validThru && (
            <div className="flex items-center gap-1 mt-[3px]">
              <span className="text-[5.5px] card-muted uppercase">Valid thru</span>
              <span className="text-[8px] font-black card-accent leading-none">{d.validThru}</span>
            </div>
          )}
        </div>

        {/* QR placeholder */}
        <div className="flex-shrink-0 flex flex-col items-end justify-end">
          <div className="rounded-[3px]" style={{ background: '#fff', padding: '3px', width: '44px', height: '44px' }}>
            <div style={{ width: '38px', height: '38px', display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: '1px' }}>
              {Array.from({ length: 25 }).map((_, i) => (
                <div key={i} style={{ background: [0,1,2,5,6,7,10,14,17,18,19,22,23,24].includes(i) ? '#000' : '#fff' }} />
              ))}
            </div>
          </div>
          <div className="text-[4.5px] card-muted uppercase tracking-wide mt-[2px] text-right">Scan to verify</div>
        </div>
      </div>

      {/* Bottom bar */}
      <div
        className="absolute left-0 right-0 flex items-center justify-between px-[10px]"
        style={{ bottom: '6px' }}
      >
        <span className="card-muted text-[5px] uppercase tracking-widest">
          skate-spots.org · Powered by Nostr
        </span>
        <div className="flex items-center gap-1">
          <Shield className="card-muted" style={{ width: '8px', height: '8px', opacity: 0.5 }} />
          <span className="card-muted text-[5px] uppercase tracking-widest">Nostr-verified</span>
        </div>
      </div>
    </div>
  );
}

// ─── Main card wrapper ────────────────────────────────────────────────────────
function RiderCardFront({ d, printRef }: { d: CardData; printRef?: React.RefObject<HTMLDivElement> }) {
  const themeClass = `card-theme-${d.theme}`;
  const holoClass = d.holographic ? 'rider-card-holo' : '';

  return (
    <div
      ref={printRef}
      className={cn('rider-card', themeClass, holoClass, 'select-none')}
      style={{ fontFamily: "'Inter Variable', 'Inter', system-ui, sans-serif" }}
    >
      {/* Top color stripe */}
      <div className="card-stripe absolute top-0 left-0 right-0 h-[4px]" />

      {d.type === 'rider' && <RiderFront d={d} />}
      {d.type === 'park'  && <ParkFront d={d} />}
    </div>
  );
}

// ─── Received badges panel ────────────────────────────────────────────────────
function ReceivedBadgesPanel({ pubkey }: { pubkey: string }) {
  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">No badges yet. Skate in front of someone and ask them to witness your tricks!</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 ? 'Show less' : `Show ${badgeEvents.length - 3} more`}
        </button>
      )}
    </div>
  );
}

function BadgeEventRow({ event }: { event: NostrEvent }) {
  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">
          Witnessed by <span className="text-yellow-400 font-medium">{witnessName}</span>
          {spot && <> 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()}
      </div>
    </div>
  );
}

// ─── Page ─────────────────────────────────────────────────────────────────────
export default function RiderCardPage() {
  useSeoMeta({
    title: 'Skater Card — SkateSpots',
    description: 'Create your printable SkateSpots Skater License or Park Access Card.',
  });

  const { user } = useCurrentUser();
  const author = useAuthor(user?.pubkey ?? '');
  const metadata = author.data?.metadata;
  const { data: stats } = useRiderStats(user?.pubkey);
  const { mutate: publishEvent } = useNostrPublish();
  const { toast } = useToast();
  const printRef = useRef<HTMLDivElement>(null);

  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' ────────────────────────────────
  const [pageTab, setPageTab] = useState<'card' | 'badges' | 'award'>('card');

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

  // Rider fields
  const [style, setStyle]       = useState('Street');
  const [skills, setSkills]     = useState<string[]>([]);
  const [sponsors, setSponsors] = useState('');
  const [ridesFor, setRidesFor] = useState('');
  const [showSpots, setShowSpots]   = useState(true);
  const [showZaps, setShowZaps]     = useState(true);
  const [showEvents, setShowEvents] = useState(true);

  // 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);

  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 ?? '') : recipientPubkey;
  const cardData: CardData = useMemo(
    () => ({
      type: cardType, theme, holographic,
      name: cardType === 'rider' ? displayName : recipientName,
      nip05: metadata?.nip05,
      avatar: metadata?.picture,
      pubkey: cardPubkey,
      npub: cardPubkey ? fullNpub(cardPubkey) : '',
      style, skills, sponsors, ridesFor,
      showSpots, showZaps, showEvents,
      spotsAdded:    stats?.spotsAdded    ?? 0,
      zapsReceived:  stats?.zapsReceived  ?? 0,
      eventsCreated: stats?.eventsCreated ?? 0,
      memberYear: metadata?.created_at
        ? memberSince(metadata.created_at as number)
        : new Date().getFullYear().toString(),
      receivedBadges,
      issuerName, recipientName, accessLevel, validThru,
    }),
    [
      cardType, theme, holographic, displayName, recipientName, metadata,
      cardPubkey, style, skills, sponsors, ridesFor, showSpots, showZaps,
      showEvents, stats, receivedBadges, issuerName, accessLevel, validThru,
    ],
  );

  const renderCardToImage = useCallback(async (): Promise<string | null> => {
    setRendering(true);
    try {
      return await drawCardToCanvas({
        type: cardData.type, themeId: cardData.theme,
        name: cardData.name, nip05: cardData.nip05,
        avatarUrl: cardData.avatar, pubkey: cardData.pubkey, npub: cardData.npub,
        style: cardData.style, skills: cardData.skills,
        sponsors: cardData.sponsors, ridesFor: cardData.ridesFor,
        showSpots: cardData.showSpots, showZaps: cardData.showZaps, showEvents: cardData.showEvents,
        spotsAdded: cardData.spotsAdded, zapsReceived: cardData.zapsReceived, eventsCreated: cardData.eventsCreated,
        memberYear: cardData.memberYear, receivedBadges: cardData.receivedBadges,
        issuerName: cardData.issuerName, recipientName: cardData.recipientName,
        accessLevel: cardData.accessLevel, validThru: cardData.validThru,
      });
    } catch (err) { console.error('Card render failed:', err); return null; }
    finally { setRendering(false); }
  }, [cardData]);

  const handlePrint = useCallback(async () => {
    const dataUrl = await renderCardToImage();
    if (!dataUrl) { toast({ title: 'Could not render card', variant: 'destructive' }); return; }
    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: 'Popup blocked', description: 'Allow popups for this site.', variant: 'destructive' }); return; }
    win.document.write(`<!DOCTYPE html><html><head><title>SkateSpots Rider 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}</style></head><body><img src="${dataUrl}"/><scr${''}ipt>window.onload=function(){window.focus();window.print()}</scr${''}ipt></body></html>`);
    win.document.close();
  }, [renderCardToImage, toast]);

  const handleDownload = useCallback(async () => {
    const dataUrl = await renderCardToImage();
    if (!dataUrl) { toast({ title: 'Could not render card', 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]);

  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: 'Could not render card', 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/${cardData.npub}`, files: [file] });
        return;
      } catch { /* fall through */ }
    }
    await navigator.clipboard.writeText(`https://skate-spots.org/${cardData.npub}`);
    toast({ title: '🔗 Link copied!' });
  }, [renderCardToImage, cardData.name, cardData.npub, toast]);

  const handlePublishParkCard = useCallback(() => {
    if (!user || !recipientPubkey) { toast({ title: "Enter the rider's npub", variant: 'destructive' }); return; }
    const tags: string[][] = [
      ['d', `park-access-${recipientPubkey.slice(0, 16)}-${Date.now()}`],
      ['p', recipientPubkey], ['t', 'skatepark-access'], ['alt', 'Skatepark Access Card'],
      ['issuer', issuerName], ['access-level', accessLevel], ['theme', theme],
    ];
    if (validThru) tags.push(['valid-thru', validThru]);
    publishEvent({ kind: PARK_ACCESS_CARD_KIND, content: '', tags }, {
      onSuccess: () => toast({ title: '✅ Park Access Card published!' }),
      onError: (e) => toast({ title: 'Publish failed', description: String(e), variant: 'destructive' }),
    });
  }, [user, recipientPubkey, issuerName, accessLevel, validThru, theme, publishEvent, toast]);

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

  // ── 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">RIDER</span>
            <span className="text-white"> CARD</span>
          </h1>
          <p className="text-gray-400 max-w-sm mb-2">
            Your verifiable skater identity. Nostr-signed, print-ready, impossible to fake.
          </p>
          <p className="text-gray-600 text-sm mb-8 max-w-xs">
            Earn witnessed skill badges from other skaters. Get park access passes. Share your card anywhere.
          </p>
          <LoginArea className="justify-center" />
        </div>
      </>
    );
  }

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

        {/* ── 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">RIDER</span>
            <span className="text-white"> CARD</span>
          </h1>
          <p className="text-gray-500 text-xs tracking-widest uppercase">Nostr-signed · Print-ready · QR-verified</p>
        </div>

        {/* ── Top tabs: My Card / My Badges / Award Badge ── */}
        <div className="flex rounded-xl overflow-hidden border border-white/10 mb-8 bg-black/40">
          {([
            { id: 'card',   label: '🪪 My Card' },
            { id: 'badges', label: `🏅 Badges${receivedBadges.length > 0 ? ` (${receivedBadges.length})` : ''}` },
            { id: 'award',  label: '⭐ Award' },
          ] 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:text-gray-300 hover:bg-white/5'
              )}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* ══════════════════════════════════════════════
            TAB: MY CARD
        ══════════════════════════════════════════════ */}
        {pageTab === 'card' && (
          <div className="space-y-8">

            {/* ── Hero card preview ── */}
            <div className="flex flex-col items-center gap-4">
              {/* Stage */}
              <div
                className="w-full rounded-2xl flex items-center justify-center py-8 relative overflow-hidden"
                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)' }}
              >
                {/* Subtle glow behind card */}
                <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-32 blur-3xl opacity-30"
                  style={{ background: `radial-gradient(ellipse, ${theme === 'lime' ? '#ccff00' : theme === 'midnight' ? '#64a0ff' : theme === 'wood' ? '#f5c842' : theme === 'chrome' ? '#888' : theme === 'sunset' ? '#ff6020' : '#ff0040'}, transparent)` }}
                />
                <RiderCardFront d={cardData} printRef={printRef} />
              </div>

              {/* Primary CTA */}
              <Button
                onClick={handleShare}
                disabled={rendering}
                size="lg"
                className="w-full h-14 bg-gradient-to-r from-[#ff0040] to-[#ff6600] hover:opacity-90 font-black uppercase text-base rounded-xl shadow-xl shadow-[#ff0040]/20 gap-2"
              >
                {rendering ? <Loader2 className="h-5 w-5 animate-spin" /> : <Share2 className="h-5 w-5" />}
                {rendering ? 'Rendering…' : 'Share Card'}
              </Button>

              {/* Secondary actions row */}
              <div className="grid grid-cols-3 gap-2 w-full">
                <Button
                  variant="outline"
                  onClick={handleDownload}
                  disabled={rendering}
                  className="gap-1.5 border-white/10 hover:border-white/30 text-xs font-bold uppercase h-10"
                >
                  <Download className="h-3.5 w-3.5" />
                  Save PNG
                </Button>
                <Button
                  variant="outline"
                  onClick={handlePrint}
                  disabled={rendering}
                  className="gap-1.5 border-white/10 hover:border-white/30 text-xs font-bold uppercase h-10"
                >
                  <Printer className="h-3.5 w-3.5" />
                  Print
                </Button>
                <Button
                  variant="outline"
                  onClick={handleCopyNpub}
                  className="gap-1.5 border-white/10 hover:border-white/30 text-xs font-bold uppercase h-10"
                >
                  {copied ? <Check className="h-3.5 w-3.5 text-green-400" /> : <Copy className="h-3.5 w-3.5" />}
                  {copied ? 'Copied!' : 'Copy ID'}
                </Button>
              </div>
            </div>

            {/* ── Card type toggle ── */}
            <div>
              <p className="text-[10px] font-black uppercase tracking-widest text-gray-600 mb-2">Card Type</p>
              <div className="grid grid-cols-2 gap-2">
                {([
                  { id: 'rider', label: 'Skater License', sub: 'Your personal rider identity', icon: User },
                  { id: 'park',  label: 'Park Access',    sub: 'Issue passes as a park owner', icon: Building2 },
                ] as const).map(({ id, label, sub, icon: Icon }) => (
                  <button
                    key={id}
                    onClick={() => setCardType(id)}
                    className={cn(
                      'p-4 rounded-xl border text-left transition-all',
                      cardType === id
                        ? 'bg-[#ff0040]/10 border-[#ff0040]/60 text-white'
                        : 'bg-black/30 border-white/8 text-gray-500 hover:border-white/20 hover:text-gray-300'
                    )}
                  >
                    <Icon className={cn('h-5 w-5 mb-2', cardType === id ? 'text-[#ff0040]' : 'text-gray-600')} />
                    <div className="text-xs font-black uppercase">{label}</div>
                    <div className="text-[10px] mt-0.5 opacity-60">{sub}</div>
                  </button>
                ))}
              </div>
            </div>

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

            {/* ── Holographic toggle ── */}
            <div className="flex items-center justify-between px-4 py-3 rounded-xl bg-white/3 border border-white/8">
              <div>
                <div className="text-sm font-bold">✨ Holographic Shimmer</div>
                <div className="text-xs text-gray-500">Animated foil effect</div>
              </div>
              <Switch checked={holographic} onCheckedChange={setHolographic} />
            </div>

            {/* ── RIDER fields ── */}
            {cardType === 'rider' && (
              <div className="space-y-5">
                <p className="text-[10px] font-black uppercase tracking-widest text-gray-600 border-t border-white/8 pt-4">Card Details</p>

                {/* Style */}
                <div>
                  <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Skate Style</Label>
                  <Select value={style} onValueChange={setStyle}>
                    <SelectTrigger className="bg-black/50 border-white/10 h-11">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {STYLES.map(s => <SelectItem key={s} value={s}>{s}</SelectItem>)}
                    </SelectContent>
                  </Select>
                </div>

                {/* Rides For + Sponsors — side by side */}
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Rides For</Label>
                    <Input
                      placeholder="Local shop…"
                      value={ridesFor}
                      onChange={e => setRidesFor(e.target.value)}
                      className="bg-black/50 border-white/10 text-sm h-11"
                    />
                  </div>
                  <div>
                    <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Sponsors</Label>
                    <Input
                      placeholder="Brands…"
                      value={sponsors}
                      onChange={e => setSponsors(e.target.value)}
                      className="bg-black/50 border-white/10 text-sm h-11"
                    />
                  </div>
                </div>

                {/* Stats toggles */}
                <div>
                  <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-2 block">Show on Card</Label>
                  <div className="grid grid-cols-3 gap-2">
                    {[
                      { label: 'Spots', value: stats?.spotsAdded ?? 0, state: showSpots, set: setShowSpots },
                      { label: 'Zaps ⚡', value: stats?.zapsReceived ?? 0, state: showZaps, set: setShowZaps },
                      { label: 'Events', value: stats?.eventsCreated ?? 0, state: showEvents, set: setShowEvents },
                    ].map(({ label, value, state, set }) => (
                      <button
                        key={label}
                        onClick={() => set(!state)}
                        className={cn(
                          'p-3 rounded-xl border text-center transition-all',
                          state
                            ? 'bg-[#ff0040]/10 border-[#ff0040]/40 text-white'
                            : 'bg-black/30 border-white/8 text-gray-600'
                        )}
                      >
                        <div className={cn('text-lg font-black', state ? 'text-[#ff0040]' : 'text-gray-700')}>{value}</div>
                        <div className="text-[9px] uppercase tracking-wide mt-0.5">{label}</div>
                      </button>
                    ))}
                  </div>
                </div>

                {/* Skills */}
                <div>
                  <div className="flex items-center justify-between mb-2">
                    <Label className="text-[10px] uppercase tracking-widest text-gray-500">Skills</Label>
                    <span className="text-[10px] text-gray-600">{skills.length}/6 selected</span>
                  </div>
                  <div className="flex flex-wrap gap-1.5">
                    {SKILL_OPTIONS.map(s => (
                      <button
                        key={s.id}
                        onClick={() => toggleSkill(s.id)}
                        disabled={!skills.includes(s.id) && skills.length >= 6}
                        className={cn(
                          'px-2.5 py-1.5 rounded-lg text-xs font-bold border transition-all',
                          skills.includes(s.id)
                            ? 'bg-[#ff0040]/15 border-[#ff0040]/50 text-white'
                            : 'bg-black/30 border-white/8 text-gray-500 hover:border-white/20 disabled:opacity-25 disabled:cursor-not-allowed'
                        )}
                      >
                        {s.icon} {s.label}
                      </button>
                    ))}
                  </div>
                  <p className="text-[10px] text-gray-600 mt-2">
                    ⭐ Gold badges on your card come from other skaters witnessing you — see the <button onClick={() => setPageTab('badges')} className="text-yellow-500 underline">Badges tab</button>.
                  </p>
                </div>
              </div>
            )}

            {/* ── PARK fields ── */}
            {cardType === 'park' && (
              <div className="space-y-5">
                <div className="flex items-start gap-3 p-4 rounded-xl bg-blue-500/5 border border-blue-500/20 text-xs text-gray-400">
                  <Info className="h-4 w-4 text-blue-400 flex-shrink-0 mt-0.5" />
                  <div>
                    <span className="font-bold text-blue-300">Park owners only.</span>{' '}
                    Issue this using the same Nostr key that published your park listing. Anyone can scan the QR and verify the signature on-chain — no central authority needed.
                  </div>
                </div>

                <p className="text-[10px] font-black uppercase tracking-widest text-gray-600 border-t border-white/8 pt-4">Park Details</p>

                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Park Name</Label>
                    <Input value={issuerName} onChange={e => setIssuerName(e.target.value)}
                      placeholder="The Berrics…" className="bg-black/50 border-white/10 h-11" />
                  </div>
                  <div>
                    <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Rider Name</Label>
                    <Input value={recipientName} onChange={e => setRecipientName(e.target.value)}
                      placeholder="Name on card" className="bg-black/50 border-white/10 h-11" />
                  </div>
                </div>

                <div>
                  <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Rider's Nostr ID (npub)</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 className="grid grid-cols-2 gap-3">
                  <div>
                    <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Access Level</Label>
                    <Select value={accessLevel} onValueChange={setAccessLevel}>
                      <SelectTrigger className="bg-black/50 border-white/10 h-11"><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="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Valid Thru</Label>
                    <Input type="text" value={validThru} onChange={e => setValidThru(e.target.value)}
                      placeholder="2026-12-31" className="bg-black/50 border-white/10 h-11" />
                  </div>
                </div>

                <Button
                  onClick={handlePublishParkCard}
                  className="w-full h-12 bg-[#ccff00] hover:bg-[#b8e600] text-black font-black uppercase gap-2"
                >
                  <Zap className="h-4 w-4" />
                  Publish to Nostr
                </Button>
              </div>
            )}
          </div>
        )}

        {/* ══════════════════════════════════════════════
            TAB: MY BADGES
        ══════════════════════════════════════════════ */}
        {pageTab === 'badges' && (
          <div className="space-y-6">
            <div className="text-center py-2">
              <p className="text-gray-400 text-sm max-w-xs mx-auto">
                These badges were witnessed and signed by other skaters on Nostr. They appear as gold ⭐ chips on your card.
              </p>
            </div>
            <ReceivedBadgesPanel pubkey={user.pubkey} />
            <div className="pt-2 border-t border-white/8">
              <p className="text-xs text-gray-600 text-center mb-3">Want to earn more? Skate in front of someone and ask them to witness your trick.</p>
              <Button
                variant="outline"
                onClick={() => setPageTab('award')}
                className="w-full border-yellow-500/30 text-yellow-400 hover:bg-yellow-500/10 gap-2"
              >
                <Award className="h-4 w-4" />
                Award a Badge to Someone Else
              </Button>
            </div>
          </div>
        )}

        {/* ══════════════════════════════════════════════
            TAB: AWARD BADGE (inline, no dialog)
        ══════════════════════════════════════════════ */}
        {pageTab === 'award' && (
          <div className="space-y-5">
            <div className="flex items-center gap-3 p-4 rounded-xl bg-yellow-500/5 border border-yellow-500/20">
              <Award className="h-5 w-5 text-yellow-400 flex-shrink-0" />
              <div>
                <div className="text-sm font-bold text-yellow-300">You saw it happen</div>
                <div className="text-xs text-gray-400 mt-0.5">Sign the proof on Nostr. It becomes part of their permanent record — cryptographically tied to your key.</div>
              </div>
            </div>

            {/* Inline award form — the dialog was removed as dead code */}
            <AwardBadgeInline issuerPubkey={user.pubkey} onSuccess={() => setPageTab('badges')} />
          </div>
        )}

      </div>
    </>
  );
}

// ─── Inline award form (used on the Award tab) ────────────────────────────────
function AwardBadgeInline({ issuerPubkey: _issuerPubkey, onSuccess }: { issuerPubkey: string; onSuccess: () => void }) {
  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: 'Add rider npub + at least one skill', 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: 'Invalid npub', 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: '🏅 Badge awarded!', description: `${selectedSkills.join(', ')} sent.` });
        setRecipientNpub(''); setSelectedSkills([]); setSpotName('');
        onSuccess();
      },
      onError: (e) => toast({ title: '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">Rider's Nostr ID (npub)</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">Skills you witnessed</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">Where did you see it? <span className="normal-case text-gray-600">(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 ? 'Signing on Nostr…' : 'Award Badge'}
      </Button>
    </div>
  );
}