import { useSeoMeta } from '@unhead/react';
import { Link, useSearchParams } from 'react-router-dom';
import { Layout } from '@/components/Layout';
import { EditProfileForm } from '@/components/EditProfileForm';
import { SkaterDirectoryCard } from '@/components/SkaterDirectoryCard';
import { RelayListManager } from '@/components/RelayListManager';

import { WalletModal } from '@/components/WalletModal';
import { SecuritySettings } from '@/components/SecuritySettings';
import { RelatrSettings } from '@/components/RelatrSettings';
import { CVMHealthCheck } from '@/components/CVMHealthCheck';
import { LanguageSelector } from '@/components/LanguageToggle';
import { DesktopNavManager } from '@/components/DesktopNavManager';
import { MyDataTab } from '@/components/MyDataTab';
import { useQueryClient } from '@tanstack/react-query';
import { useNostr } from '@nostrify/react';
import { NSchema as n } from '@nostrify/nostrify';
import { nip19 } from 'nostr-tools';
import { useState, useEffect, useRef, useCallback } from 'react';
import { LoginArea } from '@/components/auth/LoginArea';
import { Button } from '@/components/ui/button';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useAppContext } from '@/hooks/useAppContext';
import { useCitrine } from '@/hooks/useCitrine';
import { toast } from '@/hooks/useToast';
import { cn } from '@/lib/utils';
import { NIP05_PROVIDERS } from '@/lib/nip05Providers';
import QRCode from 'qrcode';
import { User, Radio, Wallet, Wrench, RotateCcw, Shield, ExternalLink, Languages, RefreshCw, AlertCircle, Database, Package, ChevronRight, ChevronLeft, Network, Copy, Check, Smartphone, Download, Globe, Zap, WifiOff } from 'lucide-react';

// ─── Types ────────────────────────────────────────────────────────────────────

type Section =
  | null
  | 'profile'
  | 'follows'
  | 'nip05'
  | 'security'
  | 'mydata'
  | 'language'
  | 'appearance'
  | 'relays'
  | 'crewnetwork'
  | 'wallet'
  | 'stash'
  | 'advanced';

// ─── Back header ──────────────────────────────────────────────────────────────

function BackHeader({ title, onBack }: { title: string; onBack: () => void }) {
  return (
    <div className="flex items-center gap-3 mb-5">
      <button
        onClick={onBack}
        aria-label="Back"
        className="flex items-center justify-center w-8 h-8 rounded-xl bg-white/5 hover:bg-white/10 active:scale-95 transition-all"
      >
        <ChevronLeft className="h-4 w-4 text-white" />
      </button>
      <h2 className="text-lg font-black uppercase tracking-wide text-white">{title}</h2>
    </div>
  );
}

// ─── Menu row ────────────────────────────────────────────────────────────────

function MenuRow({
  icon: Icon,
  label,
  sublabel,
  iconColor,
  iconBg,
  onClick,
  href,
  badge,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  sublabel?: string;
  iconColor: string;
  iconBg: string;
  onClick?: () => void;
  href?: string;
  badge?: string;
}) {
  const inner = (
    <div className="flex items-center gap-3 w-full py-3 px-4 hover:bg-white/5 active:scale-[0.99] transition-all">
      <div className={cn('w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0', iconBg)}>
        <Icon className={cn('h-4 w-4', iconColor)} />
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-sm font-bold text-white leading-tight">{label}</p>
        {sublabel && <p className="text-xs text-muted-foreground leading-tight mt-0.5">{sublabel}</p>}
      </div>
      {badge && (
        <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-[#ccff00]/20 text-[#ccff00] border border-[#ccff00]/30 flex-shrink-0">
          {badge}
        </span>
      )}
      <ChevronRight className="h-4 w-4 text-muted-foreground/50 flex-shrink-0" />
    </div>
  );

  if (href) {
    return <Link to={href} className="block">{inner}</Link>;
  }

  return <button onClick={onClick} className="w-full text-left">{inner}</button>;
}

// ─── Menu group ───────────────────────────────────────────────────────────────

function MenuGroup({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div>
      <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/50 px-4 mb-1">{title}</p>
      <div className="rounded-2xl border border-white/8 overflow-hidden divide-y divide-white/5 bg-white/2">
        {children}
      </div>
    </div>
  );
}

// ─── Profile sub-screen ───────────────────────────────────────────────────────

const PROFILE_FALLBACK_RELAYS = ['wss://purplepag.es', 'wss://relay.damus.io', 'wss://nos.lol'];

function ProfileScreen({ onBack }: { onBack: () => void }) {
  const { user, metadata } = useCurrentUser();
  const { nostr } = useNostr();
  const queryClient = useQueryClient();
  const [isRefreshing, setIsRefreshing] = useState(false);

  const handleRefresh = async () => {
    if (!user) return;
    setIsRefreshing(true);
    try {
      queryClient.invalidateQueries({ queryKey: ['author', user.pubkey] });
      let events = await nostr.query([{ kinds: [0], authors: [user.pubkey], limit: 1 }], { signal: AbortSignal.timeout(8000) });
      if (events.length === 0) {
        const fallback = nostr.group(PROFILE_FALLBACK_RELAYS);
        events = await fallback.query([{ kinds: [0], authors: [user.pubkey], limit: 1 }], { signal: AbortSignal.timeout(8000) });
      }
      if (events.length > 0) {
        const profileMetadata = n.json().pipe(n.metadata()).parse(events[0].content);
        queryClient.setQueryData(['author', user.pubkey], { metadata: profileMetadata, event: events[0] });
        toast({ title: 'Profile refreshed!', description: `Found: ${profileMetadata.name || 'unnamed'}` });
      } else {
        toast({ title: 'Profile not found', description: 'Not found on any relay.', variant: 'destructive' });
      }
    } catch {
      toast({ title: 'Refresh failed', description: 'Could not connect to relays.', variant: 'destructive' });
    } finally {
      setIsRefreshing(false);
    }
  };

  return (
    <div>
      <BackHeader title="Edit Profile" onBack={onBack} />
      {!user ? (
        <div className="text-center py-16">
          <User className="h-10 w-10 mx-auto mb-3 text-muted-foreground/40" />
          <p className="text-muted-foreground text-sm mb-5">Log in to edit your profile</p>
          <LoginArea className="justify-center" />
        </div>
      ) : (
        <div className="space-y-4">
          {/* Quick link to the user's own public profile page */}
          <Link
            to={`/${nip19.npubEncode(user.pubkey)}`}
            className="flex items-center justify-between gap-3 p-3 rounded-2xl bg-muted/50 border border-border hover:bg-muted transition-colors"
          >
            <span className="flex items-center gap-2 text-sm font-medium">
              <User className="h-4 w-4 text-[#ff0040]" />
              View my public profile
            </span>
            <ExternalLink className="h-4 w-4 text-muted-foreground" />
          </Link>
          {!metadata?.name && (
            <div className="flex items-center gap-3 p-3 rounded-2xl bg-yellow-950/30 border border-yellow-500/40">
              <AlertCircle className="h-4 w-4 text-yellow-500 flex-shrink-0" />
              <p className="text-xs text-yellow-200 flex-1">Profile not loaded from relays.</p>
              <Button onClick={handleRefresh} disabled={isRefreshing} size="sm" variant="outline" className="border-yellow-500/50 text-yellow-400 hover:bg-yellow-500/10 flex-shrink-0 h-8">
                <RefreshCw className={cn('h-3.5 w-3.5', isRefreshing && 'animate-spin')} />
              </Button>
            </div>
          )}
          <SkaterDirectoryCard />
          <EditProfileForm />
        </div>
      )}
    </div>
  );
}

// ─── NIP-05 sub-screen ────────────────────────────────────────────────────────

function Nip05Screen({ onBack }: { onBack: () => void }) {
  const providers = NIP05_PROVIDERS;

  return (
    <div>
      <BackHeader title="NIP-05 Verification" onBack={onBack} />
      <div className="space-y-4">
        <p className="text-sm text-muted-foreground leading-relaxed">
          Get a verified Nostr address (like name@domain.com) to build trust. Required for creating events, coaching profiles, and shops.
        </p>
        <div className="rounded-2xl border border-white/8 overflow-hidden divide-y divide-white/5">
          {providers.map((p) => (
            <a
              key={p.name}
              href={p.url}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-between px-4 py-3.5 hover:bg-white/5 active:scale-[0.99] transition-all"
            >
              <div>
                <p className="text-sm font-bold text-white">{p.name}</p>
                <p className="text-xs text-muted-foreground">{p.desc}</p>
              </div>
              <div className="flex items-center gap-2 flex-shrink-0">
                <span className={cn('text-[10px] font-bold px-2 py-0.5 rounded-full border', p.free ? 'bg-green-500/15 text-green-400 border-green-500/30' : 'bg-yellow-500/15 text-yellow-400 border-yellow-500/30')}>
                  {p.free ? 'Free' : 'Paid'}
                </span>
                <ExternalLink className="h-3.5 w-3.5 text-muted-foreground" />
              </div>
            </a>
          ))}
        </div>
        <div className="p-3 rounded-2xl bg-[#ccff00]/5 border border-[#ccff00]/20 text-xs text-muted-foreground">
          After getting your NIP-05, add it in the Profile field and save.
        </div>
      </div>
    </div>
  );
}

// ─── Local relay (Citrine) card ───────────────────────────────────────────────

/**
 * Android-only opt-in for the local on-device Citrine relay. Renders nothing on
 * non-Android platforms (citrine.possible === false). When enabled, the local
 * relay is folded into skate-content reads (instant local hits) and writes
 * (on-device backup + offline capture) via useSkateRelays.
 *
 * UX states:
 *   off        — muted, invites the user to speed things up.
 *   searching  — enabled, probe in flight: breathing lime dot.
 *   live       — enabled + reachable: glowing lime, benefit chips, celebratory.
 *   waiting    — enabled + not reachable: orange, actionable install CTA.
 */
function CitrineCard() {
  const citrine = useCitrine();

  // Not on native Android → the local relay can't exist. Hide entirely.
  if (!citrine.possible) return null;

  // Normal computed state. In dev preview (citrine.preview set), a forced state
  // overrides it purely for visual review — real relay behaviour is unaffected.
  const computedState: 'off' | 'searching' | 'live' | 'waiting' = !citrine.enabled
    ? 'off'
    : citrine.reachable
      ? 'live'
      : citrine.probing || !citrine.settled
        ? 'searching'
        : 'waiting';

  const state = citrine.preview ?? computedState;
  // Treat any non-off forced preview state as "enabled" so the expanded detail
  // (chips / CTA / status) renders for review.
  const enabled = citrine.preview ? citrine.preview !== 'off' : citrine.enabled;
  // Spinner reflects a real probe, or a forced "searching" preview state.
  const probing = citrine.probing || state === 'searching';

  const handleToggle = () => {
    // In dev preview we don't mutate the real setting — the forced state owns
    // the visuals. Toggling is a no-op for review (avoids a misleading toast and
    // flipping the underlying config while inspecting the UI).
    if (citrine.preview) return;

    const next = !citrine.enabled;
    citrine.setEnabled(next);
    toast({
      title: next ? 'Local relay on' : 'Local relay off',
      description: next
        ? 'Looking for Citrine on this device…'
        : 'No longer using the on-device relay.',
    });
  };

  return (
    <div
      className={cn(
        'rounded-2xl border overflow-hidden transition-all duration-500',
        state === 'live'
          ? 'border-[#ccff00]/40 bg-[#ccff00]/[0.05] shadow-[0_0_28px_-8px_rgba(204,255,0,0.35)]'
          : state === 'waiting'
            ? 'border-orange-500/25 bg-orange-500/[0.04]'
            : 'border-white/8 bg-white/3',
      )}
    >
      {/* Header row */}
      <div className="flex items-center justify-between gap-3 p-4">
        <div className="flex items-center gap-3 min-w-0">
          {/* Icon tile with live status pip */}
          <div className="relative flex-shrink-0">
            <div
              className={cn(
                'w-10 h-10 rounded-xl flex items-center justify-center transition-colors duration-500',
                state === 'live'
                  ? 'bg-[#ccff00]/15'
                  : state === 'waiting'
                    ? 'bg-orange-500/10'
                    : 'bg-white/5',
              )}
            >
              <Smartphone
                className={cn(
                  'w-[18px] h-[18px] transition-colors duration-500',
                  state === 'live'
                    ? 'text-[#ccff00]'
                    : state === 'waiting'
                      ? 'text-orange-400'
                      : 'text-white/70',
                )}
              />
            </div>
            {enabled && (
              <span
                aria-hidden="true"
                className={cn(
                  'absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-black motion-reduce:animate-none',
                  state === 'live' && 'bg-[#ccff00] animate-status-live',
                  state === 'searching' && 'bg-[#ccff00] animate-status-breathe',
                  state === 'waiting' && 'bg-orange-500',
                )}
              />
            )}
          </div>

          <div className="min-w-0">
            <p className="text-sm font-bold text-white flex items-center gap-2 leading-none">
              Local Relay
              <span
                className={cn(
                  'text-[9px] font-black uppercase tracking-[0.15em] transition-colors',
                  state === 'live' ? 'text-[#ccff00]' : 'text-white/40',
                )}
              >
                Citrine
              </span>
            </p>
            <p
              className={cn(
                'text-xs mt-1 transition-colors duration-300',
                state === 'live'
                  ? 'text-[#ccff00]/90'
                  : state === 'waiting'
                    ? 'text-orange-300/80'
                    : 'text-muted-foreground',
              )}
            >
              {state === 'off' && 'Faster reads & offline backup on this device'}
              {state === 'searching' && 'Searching for Citrine on this device…'}
              {state === 'live' && 'Connected — reading & backing up locally'}
              {state === 'waiting' && 'Enabled — start Citrine to connect'}
            </p>
          </div>
        </div>

        {/* Toggle */}
        <button
          onClick={handleToggle}
          className={cn(
            'relative w-11 h-6 rounded-full transition-all duration-300 flex-shrink-0 active:scale-95',
            enabled ? 'bg-[#ccff00]' : 'bg-white/10',
          )}
          role="switch"
          aria-checked={enabled}
          aria-label="Toggle local Citrine relay"
        >
          <span
            className={cn(
              'absolute top-0.5 w-5 h-5 rounded-full bg-black transition-all duration-300 ease-out',
              enabled ? 'left-[calc(100%-22px)]' : 'left-0.5',
            )}
          />
        </button>
      </div>

      {/* Expanding detail — only when enabled */}
      {enabled && (
        <div className="px-4 pb-4 space-y-3 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none">
          {/* Status row + recheck */}
          <div className="flex items-center gap-2 text-xs">
            <span
              aria-hidden="true"
              className={cn(
                'inline-flex w-2 h-2 rounded-full motion-reduce:animate-none',
                state === 'live' && 'bg-[#ccff00] animate-status-live',
                state === 'searching' && 'bg-[#ccff00] animate-status-breathe',
                state === 'waiting' && 'bg-orange-500',
              )}
            />
            <span
              role="status"
              aria-live="polite"
              className={cn(
                'font-medium',
                state === 'live'
                  ? 'text-[#ccff00]'
                  : state === 'searching'
                    ? 'text-[#ccff00]/70'
                    : 'text-orange-400',
              )}
            >
              {state === 'live' && 'Citrine relay detected'}
              {state === 'searching' && 'Looking for Citrine…'}
              {state === 'waiting' && 'Citrine not detected'}
            </span>
            <button
              onClick={() => citrine.recheck()}
              disabled={probing}
              aria-label="Re-check for the Citrine relay"
              className={cn(
                'ml-auto inline-flex items-center gap-1 rounded-full px-2 py-1 -mr-1 text-muted-foreground',
                'hover:text-white hover:bg-white/5 transition-colors disabled:opacity-50',
              )}
            >
              <RefreshCw className={cn('w-3 h-3 motion-reduce:animate-none', probing && 'animate-spin')} />
              {probing ? 'Checking' : 'Recheck'}
            </button>
          </div>

          {/* LIVE: benefit chips — the reward for connecting */}
          {state === 'live' && (
            <div className="flex flex-wrap gap-1.5 animate-pop-in motion-reduce:animate-none">
              {[
                { icon: Zap, label: 'Instant reads' },
                { icon: WifiOff, label: 'Works offline' },
                { icon: Database, label: 'On-device backup' },
              ].map(({ icon: Icon, label }) => (
                <span
                  key={label}
                  className="inline-flex items-center gap-1 rounded-full bg-[#ccff00]/12 border border-[#ccff00]/25 px-2.5 py-1 text-[10px] font-bold text-[#ccff00]"
                >
                  <Icon className="w-3 h-3" />
                  {label}
                </span>
              ))}
            </div>
          )}

          {/* WAITING: install / start CTA */}
          {state === 'waiting' && (
            <div className="rounded-xl border border-orange-500/20 bg-orange-500/[0.06] p-3 space-y-2.5">
              <p className="text-[11px] leading-relaxed text-orange-100/90">
                <strong className="text-orange-300">Can't reach Citrine.</strong>{' '}
                Make sure the free Citrine app is installed and its relay is
                <em> started</em>, then tap Recheck. It runs a private Nostr relay
                on your phone for instant reads and an offline backup.
              </p>
              <ol className="text-[11px] leading-relaxed text-orange-100/70 list-decimal list-inside space-y-0.5">
                <li>Open Citrine → tap <strong className="text-orange-200">Start</strong></li>
                <li>Come back here → tap <strong className="text-orange-200">Recheck</strong></li>
              </ol>
              <a
                href="https://github.com/greenart7c3/Citrine"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1.5 rounded-full bg-[#ccff00] px-3 py-1.5 text-[11px] font-black uppercase tracking-wide text-black hover:bg-[#ccff00]/90 active:scale-95 transition-all"
              >
                <Download className="w-3.5 h-3.5" /> Get Citrine
                <ExternalLink className="w-2.5 h-2.5" />
              </a>
            </div>
          )}

          {/* Privacy reassurance — always present when enabled */}
          <div className="flex items-start gap-2 rounded-xl bg-black/20 border border-white/5 p-2.5">
            <Shield className="w-3.5 h-3.5 text-white/40 flex-shrink-0 mt-0.5" />
            <p className="text-[10px] leading-relaxed text-muted-foreground/70">
              Your Stash and messages stay end-to-end encrypted here, exactly like
              everywhere else. The local relay only speeds things up and keeps a
              copy on your device — it never replaces encryption.
            </p>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Relays sub-screen ────────────────────────────────────────────────────────

function RelaysScreen({ onBack }: { onBack: () => void }) {
  const { user } = useCurrentUser();
  const { config, updateConfig } = useAppContext();
  const useSkateRelay = config.useSkateRelay ?? true;

  const handleToggle = () => {
    updateConfig((current) => ({ ...current, useSkateRelay: !useSkateRelay }));
    toast({
      title: useSkateRelay ? 'Community relay disabled' : 'Community relay enabled',
      description: useSkateRelay ? 'Using only your configured relays.' : 'SkateSpots relay included.',
    });
  };

  return (
    <div>
      <BackHeader title="Relays" onBack={onBack} />
      <div className="space-y-4">
        {user && (
          <div className="flex items-center justify-between p-4 rounded-2xl bg-white/3 border border-white/8">
            <div className="flex-1 min-w-0">
              <p className="text-sm font-bold text-white">Community Relay</p>
              <p className="text-xs text-muted-foreground mt-0.5">
                {useSkateRelay ? 'Syncing with global skate community' : 'Using only personal relays'}
              </p>
            </div>
            <button
              onClick={handleToggle}
              className={cn(
                'relative w-11 h-6 rounded-full transition-all flex-shrink-0',
                useSkateRelay ? 'bg-[#ccff00]' : 'bg-white/10'
              )}
            >
              <span className={cn(
                'absolute top-0.5 w-5 h-5 rounded-full bg-black transition-all',
                useSkateRelay ? 'left-[calc(100%-22px)]' : 'left-0.5'
              )} />
            </button>
          </div>
        )}
        <CitrineCard />
        <RelayListManager />
      </div>
    </div>
  );
}

// ─── Appearance sub-screen ────────────────────────────────────────────────────

function AppearanceScreen({ onBack }: { onBack: () => void }) {
  return (
    <div>
      <BackHeader title="Appearance" onBack={onBack} />
      <div className="space-y-4">
        <div>
          <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/50 mb-2">Language</p>
          <div className="rounded-2xl border border-white/8 p-4 bg-white/2">
            <LanguageSelector />
          </div>
        </div>
        <div className="rounded-2xl border border-white/8 p-5 bg-white/2 text-center">
          <div className="text-3xl mb-3">🌙</div>
          <p className="font-black text-white uppercase tracking-wide text-sm mb-2">Dark Mode Only</p>
          <p className="text-xs text-muted-foreground leading-relaxed">
            SkateSpots runs a dark neon aesthetic inspired by skate culture. Black background, neon pink, lime, and orange.
          </p>
        </div>

        {/* Desktop top-nav customization (Option B). Only relevant on wider
            screens, so hide the control on mobile where the bottom-bar
            customizer is used instead. */}
        <div className="hidden md:block">
          <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/50 mb-2">Navigation</p>
          <div className="rounded-2xl border border-white/8 p-4 bg-white/2">
            <DesktopNavManager />
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Advanced sub-screen ──────────────────────────────────────────────────────

function AdvancedScreen({ onBack }: { onBack: () => void }) {
  const handleResetSasquatch = () => {
    localStorage.removeItem('sasquatch-minimized');
    alert('The Sasquatch has been expanded! 🦧 Refresh the page to see him.');
    window.location.reload();
  };

  return (
    <div>
      <BackHeader title="Advanced" onBack={onBack} />
      <div className="space-y-4">
        <RelatrSettings />
        {/* Owner-only — renders null for everyone except platform owners. */}
        <CVMHealthCheck />
        <div className="rounded-2xl border border-amber-500/20 overflow-hidden bg-white/2">
          <div className="px-4 py-3.5 border-b border-white/5">
            <p className="text-sm font-bold text-amber-400">🦧 Sasquatch Guide</p>
            <p className="text-xs text-muted-foreground mt-0.5">Reset the onboarding guide to expanded view</p>
          </div>
          <div className="px-4 py-3.5">
            <button
              onClick={handleResetSasquatch}
              className="flex items-center gap-2 text-sm font-bold text-amber-400 hover:text-amber-300 transition-colors"
            >
              <RotateCcw className="h-4 w-4" />
              Expand The Sasquatch
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Wallet sub-screen ────────────────────────────────────────────────────────

function WalletScreen({ onBack }: { onBack: () => void }) {
  const { user } = useCurrentUser();
  return (
    <div>
      <BackHeader title="Wallet" onBack={onBack} />
      {!user ? (
        <div className="text-center py-16">
          <Wallet className="h-10 w-10 mx-auto mb-3 text-muted-foreground/40" />
          <p className="text-muted-foreground text-sm mb-5">Log in to manage your wallet</p>
          <LoginArea className="justify-center" />
        </div>
      ) : (
        <div className="space-y-3">
          <Link to="/wallet" className="flex items-center justify-between p-4 rounded-2xl bg-orange-500/10 border border-orange-500/20 hover:bg-orange-500/15 active:scale-[0.99] transition-all">
            <div className="flex items-center gap-3">
              <div className="w-9 h-9 rounded-xl bg-orange-500/20 flex items-center justify-center">
                <Wallet className="h-4 w-4 text-orange-400" />
              </div>
              <div>
                <p className="text-sm font-bold text-white">Open Wallet</p>
                <p className="text-xs text-muted-foreground">Balance, send, receive</p>
              </div>
            </div>
            <ChevronRight className="h-4 w-4 text-muted-foreground/50" />
          </Link>

          <WalletModal>
            <button className="w-full flex items-center justify-between p-4 rounded-2xl bg-purple-500/10 border border-purple-500/20 hover:bg-purple-500/15 active:scale-[0.99] transition-all">
              <div className="flex items-center gap-3">
                <div className="w-9 h-9 rounded-xl bg-purple-500/20 flex items-center justify-center">
                  <ExternalLink className="h-4 w-4 text-purple-400" />
                </div>
                <div className="text-left">
                  <p className="text-sm font-bold text-white">Connect NWC Wallet</p>
                  <p className="text-xs text-muted-foreground">Alby, Minibits, Zeus, Coinos</p>
                </div>
              </div>
              <ChevronRight className="h-4 w-4 text-muted-foreground/50" />
            </button>
          </WalletModal>
        </div>
      )}
    </div>
  );
}

// ─── Crew Network sub-screen ──────────────────────────────────────────────────

const NOSTR_VPN_APP_STORE = 'https://apps.apple.com/app/nostr-vpn/id6785410348';
const NOSTR_VPN_GITHUB = 'https://github.com/mmalmi/nostr-vpn/releases/latest';
const NOSTR_VPN_TESTFLIGHT = 'https://testflight.apple.com/join/58sg4agv';
const NOSTR_VPN_ANDROID = 'https://github.com/mmalmi/nostr-vpn/releases/latest';

/** Detect the user's OS/platform to surface the most relevant download first. */
function detectPlatform(): 'ios' | 'android' | 'desktop' {
  const ua = navigator.userAgent;
  if (/android/i.test(ua)) return 'android';
  if (/iphone|ipad|ipod/i.test(ua)) return 'ios';
  return 'desktop';
}

const ALL_PLATFORMS = [
  { id: 'ios',       label: 'iOS App Store',         sublabel: 'iPhone & iPad',         icon: Smartphone, url: NOSTR_VPN_APP_STORE,  color: 'text-blue-400',   bg: 'bg-blue-500/15',   badge: 'Free'        },
  { id: 'testflight',label: 'iOS TestFlight',         sublabel: 'Beta builds',           icon: Smartphone, url: NOSTR_VPN_TESTFLIGHT, color: 'text-indigo-400', bg: 'bg-indigo-500/15', badge: 'Beta'        },
  { id: 'android',   label: 'Android APK',            sublabel: 'arm64 devices',         icon: Smartphone, url: NOSTR_VPN_ANDROID,    color: 'text-green-400',  bg: 'bg-green-500/15',  badge: 'APK'         },
  { id: 'desktop',   label: 'macOS / Linux / Windows',sublabel: 'Native desktop apps',   icon: Download,   url: NOSTR_VPN_GITHUB,     color: 'text-amber-400',  bg: 'bg-amber-500/15',  badge: 'Open source' },
];

function CrewNetworkScreen({ onBack }: { onBack: () => void }) {
  const { user, metadata } = useCurrentUser();
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [copied, setCopied] = useState(false);
  const [qrReady, setQrReady] = useState(false);
  const [qrError, setQrError] = useState(false);
  const [openingApp, setOpeningApp] = useState(false);

  // Detect platform once — sort most-relevant download to the top.
  const platform = detectPlatform();
  const platforms = [...ALL_PLATFORMS].sort((a) => {
    if (platform === 'ios' && (a.id === 'ios' || a.id === 'testflight')) return -1;
    if (platform === 'android' && a.id === 'android') return -1;
    if (platform === 'desktop' && a.id === 'desktop') return -1;
    return 0;
  });

  // Build the join-request deep link using the user's npub as device identity.
  // Format: nvpn://join-request?pubkey=<hex>&name=<displayName>&relay=<relay>
  const joinUri = user
    ? `nvpn://join-request?pubkey=${user.pubkey}&name=${encodeURIComponent(metadata?.name ?? 'Skater')}&relay=${encodeURIComponent('wss://goskatespots.nostr1.com')}`
    : '';

  const renderQR = useCallback(async () => {
    if (!canvasRef.current || !joinUri) return;
    try {
      setQrError(false);
      await QRCode.toCanvas(canvasRef.current, joinUri, {
        width: 220,
        margin: 2,
        color: { dark: '#000000', light: '#ffffff' },
        errorCorrectionLevel: 'M',
      });
      setQrReady(true);
    } catch {
      setQrError(true);
    }
  }, [joinUri]);

  useEffect(() => {
    renderQR();
  }, [renderQR]);

  const handleCopy = async () => {
    if (!joinUri) return;
    try {
      await navigator.clipboard.writeText(joinUri);
      setCopied(true);
      setTimeout(() => setCopied(false), 2500);
      toast({ title: 'Copied!', description: 'Join request link copied to clipboard.' });
    } catch {
      toast({ title: 'Copy failed', description: 'Could not access clipboard.', variant: 'destructive' });
    }
  };

  // Save the QR canvas as a PNG the user can share.
  const handleDownloadQR = () => {
    if (!canvasRef.current || !qrReady) return;
    const link = document.createElement('a');
    link.download = 'nostr-vpn-join-request.png';
    link.href = canvasRef.current.toDataURL('image/png');
    link.click();
  };

  // Open the deep link on the device. On iOS Safari, window.location.href inside
  // a user-gesture handler is the only reliable way to fire custom schemes.
  // After 2 s with no visibility change, assume the app isn't installed and
  // redirect to the correct store page.
  const handleOpenApp = () => {
    if (!joinUri) return;
    setOpeningApp(true);

    const fallbackUrl = platform === 'android' ? NOSTR_VPN_ANDROID : NOSTR_VPN_APP_STORE;

    const timeout = setTimeout(() => {
      // Still here → app not installed → go to store/release page
      window.location.href = fallbackUrl;
    }, 2000);

    // Cancel the fallback if the page loses focus (app opened successfully).
    const cancel = () => {
      clearTimeout(timeout);
      setOpeningApp(false);
    };
    window.addEventListener('blur', cancel, { once: true });
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) cancel();
    }, { once: true });

    window.location.href = joinUri;
  };

  // Steps adapt: if the user is logged out, step 2 says "log in" instead of "show QR".
  const steps = [
    { n: '1', text: 'Install nostr-vpn on your device (free, open source)' },
    { n: '2', text: user ? 'Show your QR code above to a crew admin' : 'Log in to SkateSpots to generate your personal QR' },
    { n: '3', text: 'Admin approves — you receive a cryptographically signed roster' },
    { n: '4', text: 'WireGuard-grade encrypted mesh tunnel connects you to your crew' },
  ];

  return (
    <div>
      <BackHeader title="Crew Network" onBack={onBack} />
      <div className="space-y-5">

        {/* Hero explainer */}
        <div className="relative rounded-2xl overflow-hidden border border-[#ccff00]/20 bg-gradient-to-br from-[#ccff00]/5 to-transparent p-5">
          <div className="flex items-start gap-3">
            <div className="w-10 h-10 rounded-2xl bg-[#ccff00]/15 flex items-center justify-center flex-shrink-0 mt-0.5">
              <Shield className="h-5 w-5 text-[#ccff00]" aria-hidden="true" />
            </div>
            <div>
              <p className="text-sm font-black text-white uppercase tracking-wide leading-tight">Private Encrypted Mesh</p>
              <p className="text-xs text-muted-foreground mt-1 leading-relaxed">
                <strong className="text-white">nostr-vpn</strong> turns your Nostr keys into a private WireGuard mesh for your crew.
                No accounts, no central server — your key is your identity. Your crew, your network.
              </p>
            </div>
          </div>
        </div>

        {/* QR + join request */}
        {user ? (
          <div className="space-y-3">
            <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/50 px-1">
              Your Join Request
            </p>
            <div className="rounded-2xl border border-white/8 bg-white/2 p-5 flex flex-col items-center gap-4">

              {/* QR canvas — fixed container prevents layout shift */}
              <div className="relative w-[236px] h-[236px] flex-shrink-0">
                <div className="absolute inset-0 rounded-xl overflow-hidden bg-white shadow-lg shadow-black/40 flex items-center justify-center">
                  {/* Loading spinner — shown until QR renders */}
                  {!qrReady && !qrError && (
                    <div
                      role="status"
                      aria-label="Generating QR code"
                      className="flex flex-col items-center gap-2"
                    >
                      <div className="w-8 h-8 rounded-full border-2 border-black/15 border-t-black animate-spin" />
                      <p className="text-[10px] text-black/40 font-medium">Generating…</p>
                    </div>
                  )}
                  {/* Error state */}
                  {qrError && (
                    <div className="flex flex-col items-center gap-2 px-4 text-center">
                      <AlertCircle className="h-6 w-6 text-red-400" />
                      <p className="text-[11px] text-black/60">QR failed to render</p>
                      <button
                        onClick={renderQR}
                        className="text-[11px] font-bold text-blue-600 underline"
                      >
                        Retry
                      </button>
                    </div>
                  )}
                  <canvas
                    ref={canvasRef}
                    role="img"
                    aria-label="nostr-vpn join request QR code — scan with the nostr-vpn app to join your crew network"
                    className={cn(
                      'block p-2 transition-opacity duration-300',
                      qrReady ? 'opacity-100' : 'opacity-0 absolute'
                    )}
                  />
                </div>
              </div>

              <div className="w-full space-y-2.5 text-center">
                <p className="text-xs text-muted-foreground leading-relaxed">
                  Show this QR to an admin in the nostr-vpn app.
                  They scan → approve → you're on the encrypted mesh.
                </p>

                {/* URI display — improved contrast, selectable */}
                <div className="rounded-xl bg-black/40 border border-white/10 px-3 py-2.5 text-left">
                  <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/50 mb-1">Join URI</p>
                  <p
                    className="text-[10px] font-mono text-white/70 break-all leading-relaxed select-all cursor-text"
                    title="Tap to select all, then copy"
                  >
                    {joinUri.length > 130 ? joinUri.slice(0, 130) + '…' : joinUri}
                  </p>
                </div>

                {/* Actions row */}
                <div className="flex gap-2 pt-0.5">
                  <button
                    onClick={handleCopy}
                    aria-label={copied ? 'Link copied to clipboard' : 'Copy join request link'}
                    className="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 text-xs font-bold text-white transition-all active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
                  >
                    {copied
                      ? <Check className="h-3.5 w-3.5 text-[#ccff00]" aria-hidden="true" />
                      : <Copy className="h-3.5 w-3.5" aria-hidden="true" />}
                    {copied ? 'Copied!' : 'Copy link'}
                  </button>
                  <button
                    onClick={handleDownloadQR}
                    disabled={!qrReady}
                    aria-label="Download QR code as PNG image"
                    className="flex items-center justify-center gap-1.5 px-3 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 text-xs font-bold text-white transition-all active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 disabled:opacity-40 disabled:cursor-not-allowed"
                  >
                    <Download className="h-3.5 w-3.5" aria-hidden="true" />
                    Save QR
                  </button>
                  <button
                    onClick={handleOpenApp}
                    disabled={openingApp}
                    aria-label="Open nostr-vpn app with this join request"
                    className="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl bg-[#ccff00]/15 hover:bg-[#ccff00]/25 border border-[#ccff00]/30 text-xs font-bold text-[#ccff00] transition-all active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]/50 disabled:opacity-60"
                  >
                    <Network className="h-3.5 w-3.5" aria-hidden="true" />
                    {openingApp ? 'Opening…' : 'Open app'}
                  </button>
                </div>

                {/* Deep link hint */}
                <p className="text-[10px] text-muted-foreground/40 leading-tight">
                  "Open app" requires nostr-vpn installed. If not installed, you'll be redirected to the download page.
                </p>
              </div>
            </div>
          </div>
        ) : (
          <div className="rounded-2xl border border-white/8 bg-white/2 p-6 text-center">
            <Shield className="h-8 w-8 mx-auto mb-3 text-muted-foreground/30" aria-hidden="true" />
            <p className="text-sm font-bold text-white mb-1">Login required</p>
            <p className="text-xs text-muted-foreground mb-4 leading-relaxed">
              Log in with your Nostr keys to generate a personal join request QR for your crew's encrypted mesh.
            </p>
            <LoginArea className="justify-center" />
          </div>
        )}

        {/* How it works — steps adapt based on login state */}
        <div>
          <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/50 px-1 mb-2">
            How It Works
          </p>
          <ol className="rounded-2xl border border-white/8 bg-white/2 divide-y divide-white/5 overflow-hidden" aria-label="Steps to join a crew network">
            {steps.map(({ n, text }) => (
              <li key={n} className="flex items-center gap-3 px-4 py-3">
                <span
                  aria-hidden="true"
                  className="w-6 h-6 rounded-full bg-[#ccff00]/15 text-[#ccff00] text-[11px] font-black flex items-center justify-center flex-shrink-0"
                >
                  {n}
                </span>
                <p className="text-xs text-muted-foreground leading-snug">{text}</p>
              </li>
            ))}
          </ol>
        </div>

        {/* Download links — platform-sorted */}
        <div>
          <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/50 px-1 mb-2">
            Get nostr-vpn
          </p>
          <div className="rounded-2xl border border-white/8 overflow-hidden divide-y divide-white/5 bg-white/2" role="list" aria-label="Download options">
            {platforms.map(({ id, label, sublabel, icon: Icon, url, color, bg, badge }) => (
              <a
                key={id}
                href={url}
                target="_blank"
                rel="noopener noreferrer"
                role="listitem"
                aria-label={`${label} — ${badge}`}
                className="flex items-center gap-3 px-4 py-3 hover:bg-white/5 active:scale-[0.99] transition-all focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-white/30"
              >
                <div className={cn('w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0', bg)} aria-hidden="true">
                  <Icon className={cn('h-4 w-4', color)} />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-bold text-white leading-tight">{label}</p>
                  <p className="text-[11px] text-muted-foreground leading-tight mt-0.5">{sublabel}</p>
                </div>
                <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-white/5 text-muted-foreground border border-white/10 flex-shrink-0">
                  {badge}
                </span>
                <ExternalLink className="h-3.5 w-3.5 text-muted-foreground/40 flex-shrink-0" aria-hidden="true" />
              </a>
            ))}
          </div>
        </div>

        {/* Use cases */}
        <div className="rounded-2xl border border-white/8 bg-white/2 p-4 space-y-3">
          <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/50">Why Skaters Use It</p>
          <ul className="grid grid-cols-2 gap-2" aria-label="Use cases">
            {[
              { emoji: '🔒', label: 'Private crew comms' },
              { emoji: '📍', label: 'Secret spot sharing' },
              { emoji: '🌍', label: 'Censorship bypass' },
              { emoji: '📶', label: 'Offline session mesh' },
            ].map(({ emoji, label }) => (
              <li key={label} className="flex items-center gap-2 p-2.5 rounded-xl bg-white/[0.03] border border-white/[0.06]">
                <span className="text-base leading-none" aria-hidden="true">{emoji}</span>
                <p className="text-xs text-white/80 font-medium leading-tight">{label}</p>
              </li>
            ))}
          </ul>
        </div>

        {/* Learn more */}
        <a
          href="https://github.com/mmalmi/nostr-vpn"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="nostr-vpn on GitHub — source code, docs, protocol spec (opens in new tab)"
          className="flex items-center justify-between px-4 py-3.5 rounded-2xl border border-white/8 bg-white/2 hover:bg-white/5 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30"
        >
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-xl bg-white/8 flex items-center justify-center flex-shrink-0" aria-hidden="true">
              <Globe className="h-4 w-4 text-muted-foreground" />
            </div>
            <div>
              <p className="text-sm font-bold text-white">nostr-vpn on GitHub</p>
              <p className="text-xs text-muted-foreground">Source code, docs, protocol spec</p>
            </div>
          </div>
          <ExternalLink className="h-3.5 w-3.5 text-muted-foreground/40 flex-shrink-0" aria-hidden="true" />
        </a>

      </div>
    </div>
  );
}

// ─── Main settings menu ───────────────────────────────────────────────────────

function SettingsMenu({ onNavigate }: { onNavigate: (s: Section) => void }) {
  const { user, metadata } = useCurrentUser();

  return (
    <div className="space-y-5">
      {/* Account */}
      <MenuGroup title="Account">
        <MenuRow
          icon={User}
          label="Edit Profile"
          sublabel={metadata?.name ?? (user ? 'Not loaded' : 'Not logged in')}
          iconColor="text-[#ccff00]"
          iconBg="bg-[#ccff00]/15"
          onClick={() => onNavigate('profile')}
        />
        <MenuRow
          icon={Shield}
          label="Security"
          sublabel="Keys, signing, Amber"
          iconColor="text-red-400"
          iconBg="bg-red-500/15"
          onClick={() => onNavigate('security')}
        />
        <MenuRow
          icon={User}
          label="NIP-05 Verification"
          sublabel="Get a verified Nostr address"
          iconColor="text-blue-400"
          iconBg="bg-blue-500/15"
          onClick={() => onNavigate('nip05')}
        />
      </MenuGroup>

      {/* App */}
      <MenuGroup title="App">
        <MenuRow
          icon={Wallet}
          label="Wallet"
          sublabel="Lightning, Cashu, NWC"
          iconColor="text-orange-400"
          iconBg="bg-orange-500/15"
          onClick={() => onNavigate('wallet')}
        />
        <MenuRow
          icon={Package}
          label="My Stash"
          sublabel="Private gear inventory"
          iconColor="text-purple-400"
          iconBg="bg-purple-500/15"
          href="/stash"
        />
        <MenuRow
          icon={Radio}
          label="Relays"
          sublabel="Nostr relay connections"
          iconColor="text-cyan-400"
          iconBg="bg-cyan-500/15"
          onClick={() => onNavigate('relays')}
        />
        <MenuRow
          icon={Network}
          label="Crew Network"
          sublabel="Private mesh VPN via nostr-vpn"
          iconColor="text-[#ccff00]"
          iconBg="bg-[#ccff00]/10"
          badge="NEW"
          onClick={() => onNavigate('crewnetwork')}
        />
        <MenuRow
          icon={Languages}
          label="Appearance"
          sublabel="Language and theme"
          iconColor="text-pink-400"
          iconBg="bg-pink-500/15"
          onClick={() => onNavigate('appearance')}
        />
      </MenuGroup>

      {/* Data & Advanced */}
      <MenuGroup title="Data">
        <MenuRow
          icon={Database}
          label="My Data"
          sublabel="Export, import, manage"
          iconColor="text-green-400"
          iconBg="bg-green-500/15"
          onClick={() => onNavigate('mydata')}
        />
        <MenuRow
          icon={Wrench}
          label="Advanced"
          sublabel="Relatr, Sasquatch, tools"
          iconColor="text-gray-400"
          iconBg="bg-white/8"
          onClick={() => onNavigate('advanced')}
        />
      </MenuGroup>

      {/* Login area */}
      {!user && (
        <div className="pt-2">
          <LoginArea className="w-full" />
        </div>
      )}
    </div>
  );
}

// ─── Page ─────────────────────────────────────────────────────────────────────

export default function SettingsPage() {
  useSeoMeta({
    title: 'Settings - SkateSpots',
    description: 'Manage your SkateSpots account settings.',
  });

  const [searchParams] = useSearchParams();

  // Allow deep-linking into a specific section via ?section=profile etc.
  // Only sections that actually render are accepted; anything else (e.g. a
  // stale bookmark to ?section=language) falls back to the menu rather than a
  // blank screen with no way back.
  const RENDERABLE_SECTIONS: Section[] = [
    'profile', 'security', 'nip05', 'mydata', 'relays', 'crewnetwork', 'appearance', 'wallet', 'advanced',
  ];
  const requestedSection = searchParams.get('section') as Section;
  const initialSection =
    requestedSection && RENDERABLE_SECTIONS.includes(requestedSection) ? requestedSection : null;
  const [section, setSection] = useState<Section>(initialSection);

  const handleNavigate = (s: Section) => setSection(s);
  const handleBack = () => setSection(null);

  return (
    <Layout>
      <div className="container px-4 py-5 max-w-lg mx-auto">
        {/* Header — only shown on the main menu */}
        {!section && (
          <div className="mb-5">
            <h1 className="text-4xl md:text-5xl font-black uppercase leading-none mb-1">
              <span className="text-white">SETTINGS</span>
            </h1>
            <p className="text-muted-foreground text-sm">Account and app preferences</p>
          </div>
        )}

        {/* Sub-screens */}
        {section === 'profile' && <ProfileScreen onBack={handleBack} />}
        {section === 'security' && (
          <div>
            <BackHeader title="Security" onBack={handleBack} />
            <SecuritySettings />
          </div>
        )}
        {section === 'nip05' && <Nip05Screen onBack={handleBack} />}
        {section === 'mydata' && (
          <div>
            <BackHeader title="My Data" onBack={handleBack} />
            <MyDataTab />
          </div>
        )}
        {section === 'relays' && <RelaysScreen onBack={handleBack} />}
        {section === 'crewnetwork' && <CrewNetworkScreen onBack={handleBack} />}
        {section === 'appearance' && <AppearanceScreen onBack={handleBack} />}
        {section === 'wallet' && <WalletScreen onBack={handleBack} />}
        {section === 'advanced' && <AdvancedScreen onBack={handleBack} />}

        {/* Main menu */}
        {!section && <SettingsMenu onNavigate={handleNavigate} />}
      </div>
    </Layout>
  );
}