import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import type { ReactNode } from 'react';
import {
  AlertTriangle,
  Check,
  CheckCheck,
  ChevronDown,
  Copy,
  ImagePlus,
  KeyRound,
  Loader2,
  Lock,
  Plus,
  QrCode,
  RefreshCw,
  Reply,
  ScanLine,
  Search,
  Send,
  Share2,
  ShieldMinus,
  ShieldPlus,
  SmilePlus,
  Trash2,
  UserPlus,
  Users,
  Volume2,
  VolumeX,
  X,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { QRCodeCanvas } from '@/components/ui/qrcode';
import { ImageWithFallback } from '@/components/ImageWithFallback';
import { QRScannerModal } from '@/components/wallet/QRScannerModal';
import { useTranslation } from '@/contexts/language';
import { useAuthor } from '@/hooks/useAuthor';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useNostrPublish } from '@/hooks/useNostrPublish';
import { useQueryClient } from '@tanstack/react-query';
import { useUploadFile } from '@/hooks/useUploadFile';
import { useCordnNative } from '@/hooks/useCordnNative';
import { useDmMute } from '@/hooks/useDmMute';
import { useCordnRoomRead } from '@/hooks/useCordnRoomRead';
import { enqueueCordnOutbox, markCordnOutboxAttempt, readCordnOutbox, removeCordnOutbox } from '@/lib/cordnOutbox';
import { shortNpub } from '@/lib/coordinator';
import { isNativePlatform } from '@/lib/platform';
import { formatDistanceToNow } from '@/lib/dateFnsI18n';
import { cn } from '@/lib/utils';
import type { CordnRoom } from '@/lib/cordn/room';
import { SKATE_CREW_KIND, type SkateCrew } from '@/lib/types';
import { clearPendingJoin, readPendingJoin, writePendingJoin } from '@/lib/cordn/pendingJoin';

type RoomScope = 'crew' | 'community';

interface CordnNativePanelProps {
  crew: CordnRoom;
  /** Founder/admin — may create the group and approve join requests. */
  canManage: boolean;
  /** False for bot-owned rooms: the bot creates, admins still approve. */
  canCreate?: boolean;
  /** Founder or listed member. */
  isMember: boolean;
  /** Switches the room-specific copy (crew vs the app-wide community room). */
  scope?: RoomScope;
  /** Optional share/QR URL override (the community page uses `/#/community`). */
  inviteUrl?: string;
  /** Community bot pubkey — shown with a friendly label in requests/members. */
  botPubkey?: string;
  /** Whether the private-chat tab is the visible tab (drives seen/unread). */
  active?: boolean;
  /** Called when the room has inbound messages newer than the last seen cursor. */
  onUnreadChange?: (hasUnread: boolean) => void;
  /** Called with the number of pending join requests (founder/admin). */
  onRequestsChange?: (count: number) => void;
}

type MemberRole = 'founder' | 'admin' | 'member';

interface PendingMessage {
  text: string;
  imageUrl?: string;
  state: 'sending' | 'failed';
  outboxId?: string;
  attempts?: number;
}

/**
 * The crew's **native Cordn (MLS) chat** — real end-to-end encryption between
 * members, routed through the crew's coordinator. See `lib/cordn/native/`.
 */
export function CordnNativePanel({
  crew,
  canManage,
  canCreate = canManage,
  isMember,
  scope = 'crew',
  inviteUrl: inviteUrlProp,
  botPubkey,
  active = true,
  onUnreadChange,
  onRequestsChange,
}: CordnNativePanelProps) {
  const { t } = useTranslation();
  const { user } = useCurrentUser();
  const { mutateAsync: publishEvent } = useNostrPublish();
  const queryClient = useQueryClient();
  const [roleBusy, setRoleBusy] = useState<string | null>(null);
  const isCommunity = scope === 'community';
  const waitingApprovalKey = isCommunity ? 'communityUi.waitingApproval' : 'cordnUi.waitingApproval';
  const waitingApprovalManualKey = isCommunity
    ? 'communityUi.waitingApprovalManual'
    : 'cordnUi.waitingApprovalManual';
  const noInviteKey = isCommunity ? 'communityUi.noInvite' : 'cordnUi.noInvite';

  const sourceCrew = crew as SkateCrew;
  const canChangeRoles = !isCommunity && user?.pubkey === crew.pubkey && !!sourceCrew.event;
  const copy = {
    title: isCommunity ? t('communityUi.title') : t('cordnUi.title'),
    subtitle: isCommunity ? t('communityUi.subtitle') : t('cordnUi.subtitle'),
    notLoggedIn: isCommunity ? t('communityUi.notLoggedIn') : t('cordnUi.notLoggedIn'),
    noGroupAdmin: isCommunity ? t('communityUi.noGroupAdmin') : t('cordnUi.noGroupAdmin'),
    noGroupMember: isCommunity ? t('communityUi.noGroupMember') : t('cordnUi.noGroupMember'),
    create: isCommunity ? t('communityUi.create') : t('cordnUi.create'),
    setupDeviceBody: isCommunity
      ? t('communityUi.setupDeviceBody')
      : t('cordnUi.setupDeviceBody'),
    encryptedNote: isCommunity ? t('communityUi.encryptedNote') : t('cordnUi.encryptedNote'),
    shareInviteText: isCommunity
      ? t('communityUi.shareInviteText')
      : t('cordnUi.shareInviteText', { crew: crew.name }),
    qrTitle: isCommunity ? t('communityUi.qrTitle') : t('cordnUi.qrTitle'),
    qrHint: isCommunity ? t('communityUi.qrHint') : t('cordnUi.qrHint'),
    owner: isCommunity ? t('communityUi.owner') : t('cordnUi.roleFounder'),
    botName: t('communityUi.botName'),
    founderSteps: isCommunity
      ? [
          t('communityUi.onboardingFounder1'),
          t('communityUi.onboardingFounder2'),
          t('communityUi.onboardingFounder3'),
        ]
      : [
          t('cordnUi.onboardingFounder1'),
          t('cordnUi.onboardingFounder2'),
          t('cordnUi.onboardingFounder3'),
        ],
    memberSteps: isCommunity
      ? [
          t('communityUi.onboardingMember1'),
          t('communityUi.onboardingMember2'),
          t('communityUi.onboardingMember3'),
        ]
      : [
          t('cordnUi.onboardingMember1'),
          t('cordnUi.onboardingMember2'),
          t('cordnUi.onboardingMember3'),
        ],
  };
  const native = useCordnNative({ crew, enabled: !!user && isMember, active });
  // Stable callbacks (the hook's return object is recreated each render).
  const sendNative = native.send;
  const checkInviteNative = native.checkInvite;
  const [draft, setDraft] = useState('');
  const [searchOpen, setSearchOpen] = useState(false);
  const [search, setSearch] = useState('');
  const [online, setOnline] = useState(() => typeof navigator === 'undefined' || navigator.onLine);
  const [replyTo, setReplyTo] = useState<{ id: string; content: string } | null>(null);
  const [reactingTo, setReactingTo] = useState<string | null>(null);
  const readSentRef = useRef<Set<string>>(new Set());
  const [copied, setCopied] = useState(false);
  const [copiedLink, setCopiedLink] = useState(false);
  const [copiedDevice, setCopiedDevice] = useState(false);
  const [notice, setNotice] = useState<string | null>(null);
  const [awaiting, setAwaiting] = useState(() =>
    user?.pubkey ? readPendingJoin(user.pubkey, native.groupId) : false,
  );
  const [pending, setPending] = useState<PendingMessage | null>(null);
  const [sentIds, setSentIds] = useState<Set<string>>(() => new Set());
  const [inviteOpen, setInviteOpen] = useState(false);
  const [deviceLinkOpen, setDeviceLinkOpen] = useState(false);
  const [deviceLinkCode, setDeviceLinkCode] = useState<string | null>(null);
  const [deviceLinkPending, setDeviceLinkPending] = useState(false);
  const [scannerOpen, setScannerOpen] = useState(false);
  const scrollRef = useRef<HTMLDivElement>(null);
  const { isMuted, toggle: toggleMute } = useDmMute();
  const { reads, markActive, markSeen } = useCordnRoomRead(user?.pubkey);
  const muteKey = native.groupId ? `cordn:${native.groupId}` : undefined;
  const muted = isMuted(muteKey);
  const fileRef = useRef<HTMLInputElement>(null);
  const checkingRef = useRef(false);
  const loadedRequestsRef = useRef(false);
  const { mutateAsync: uploadFile, isPending: uploading } = useUploadFile();

  const inviteUrl = useMemo(() => {
    if (inviteUrlProp) return inviteUrlProp;
    // In the Android/iOS shell the page origin is `https://localhost`, which is
    // useless in a QR code. Share the public site there; keep the live origin on
    // the web (including previews).
    const origin = isNativePlatform() ? 'https://skate-spots.org' : window.location.origin;
    return `${origin}/#/crew/${crew.pubkey}/${crew.identifier}?tab=mls`;
  }, [crew.pubkey, crew.identifier, inviteUrlProp]);

  useEffect(() => {
    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
  }, [native.messages.length, pending?.state]);

  // Read receipts: when the tab is visible, acknowledge the latest inbound
  // message once. Control receipts are filtered out of `native.messages`.
  useEffect(() => {
    if (!active || !native.ready || !user?.pubkey || native.interactiveHintVisible) return;
    const lastInbound = [...native.messages]
      .reverse()
      .find((m) => m.direction === 'inbound' && m.sender !== user.pubkey);
    if (!lastInbound || readSentRef.current.has(lastInbound.id)) return;
    readSentRef.current.add(lastInbound.id);
    void native.markRead(lastInbound.id);
  }, [active, native, native.messages, native.markRead, native.ready, user?.pubkey]);

  useEffect(() => {
    if (!user?.pubkey) return;
    setAwaiting(readPendingJoin(user.pubkey, native.groupId));
  }, [user?.pubkey, native.groupId]);

  const latestInboundAt = useMemo(
    () =>
      native.messages.reduce(
        (max, message) =>
          message.direction === 'inbound' && message.sender !== user?.pubkey
            ? Math.max(max, message.createdAt)
            : max,
        0,
      ),
    [native.messages, user?.pubkey],
  );

  useEffect(() => {
    if (native.groupId && latestInboundAt > 0) markActive(native.groupId, latestInboundAt);
  }, [native.groupId, latestInboundAt, markActive]);

  useEffect(() => {
    if (active && native.groupId && latestInboundAt > 0) markSeen(native.groupId, latestInboundAt);
  }, [active, native.groupId, latestInboundAt, markSeen]);

  useEffect(() => {
    const onOnline = () => setOnline(true);
    const onOffline = () => setOnline(false);
    window.addEventListener('online', onOnline);
    window.addEventListener('offline', onOffline);
    return () => {
      window.removeEventListener('online', onOnline);
      window.removeEventListener('offline', onOffline);
    };
  }, []);

  // A different room must not inherit the previous room's draft/pending bubble.
  useEffect(() => {
    setPending(null);
    setReplyTo(null);
    setReactingTo(null);
    setSearch('');
    setSearchOpen(false);
  }, [native.groupId]);

  // Restore the oldest failed send after a reload/room switch. It is retried
  // automatically a few times when the app is online, then stays queued for a
  // deliberate tap.
  useEffect(() => {
    if (!user?.pubkey || !native.groupId) return;
    const [next] = readCordnOutbox(user.pubkey, native.groupId);
    if (!next) return;
    setPending((current) =>
      current ?? {
        text: next.text,
        imageUrl: next.imageUrl,
        state: 'failed',
        outboxId: next.id,
        attempts: next.attempts,
      },
    );
  }, [user?.pubkey, native.groupId]);

  const displayMessages = useMemo(() => {
    const query = search.trim().toLowerCase();
    if (!query) return native.messages;
    return native.messages.filter(
      (message) =>
        message.content.toLowerCase().includes(query) ||
        (message.imageUrl ?? '').toLowerCase().includes(query),
    );
  }, [native.messages, search]);

  useEffect(() => {
    if (native.group && awaiting) {
      if (user?.pubkey) clearPendingJoin(user.pubkey, native.groupId);
      setAwaiting(false);
      setDeviceLinkOpen(false);
      setDeviceLinkCode(null);
      setDeviceLinkPending(false);
    }
  }, [native.group, awaiting, user?.pubkey, native.groupId]);

  // Founders should see waiting requests without hunting for the check button.
  // Quiet reads keep the tab badge fresh without toggling the composer's busy
  // state. Amber is excluded: a background ContextVM request would pop the
  // signer; those users use the explicit Check requests button.
  const loadRequestsQuietNative = native.loadRequestsQuiet;
  const interactive = native.interactiveHintVisible;
  const groupGid = native.group?.gid;
  useEffect(() => {
    // Hidden tabs only do this for nsec/bunker. Extension/Amber users either
    // open the tab once (extension) or use the manual Check requests button.
    if (!canManage || !groupGid || !native.ready || interactive || (!native.passiveSigner && !active) || loadedRequestsRef.current) return;
    loadedRequestsRef.current = true;
    void loadRequestsQuietNative();
  }, [canManage, groupGid, native.ready, interactive, native.passiveSigner, active, loadRequestsQuietNative]);

  useEffect(() => {
    if (!canManage || !groupGid || !native.ready || interactive || !native.passiveSigner) return;
    const id = window.setInterval(() => void loadRequestsQuietNative(), 60_000);
    return () => window.clearInterval(id);
  }, [canManage, groupGid, native.ready, interactive, native.passiveSigner, loadRequestsQuietNative]);

  useEffect(() => {
    onRequestsChange?.(canManage ? native.requests.length : 0);
  }, [canManage, native.requests.length, onRequestsChange]);

  // "New since last opened" marker. The panel records the latest inbound
  // timestamp; a hidden tab compares it with the local seen cursor. The first
  // observation seeds the cursor so old history never reads as unread.
  useEffect(() => {
    if (!user?.pubkey || !groupGid || !native.ready) {
      onUnreadChange?.(false);
      return;
    }
    if (active) {
      onUnreadChange?.(false);
      return;
    }
    const state = reads[groupGid];
    if (!state) {
      markSeen(groupGid, latestInboundAt);
      onUnreadChange?.(false);
      return;
    }
    markActive(groupGid, latestInboundAt);
    onUnreadChange?.(latestInboundAt > state.seenAt);
  }, [
    active,
    groupGid,
    native.ready,
    user?.pubkey,
    reads,
    latestInboundAt,
    markActive,
    markSeen,
    onUnreadChange,
  ]);

  // Opening the private tab pulls anything missed while it was hidden. Silent
  // signers also poll in the hook; this makes tab activation immediate.
  const refreshNative = native.refresh;
  useEffect(() => {
    if (!active || !native.ready || !groupGid || interactive) return;
    void refreshNative();
  }, [active, native.ready, groupGid, interactive, refreshNative]);

  const markSent = useCallback((id: string) => {
    if (!id) return;
    setSentIds((prev) => new Set(prev).add(id));
    window.setTimeout(() => {
      setSentIds((prev) => {
        const next = new Set(prev);
        next.delete(id);
        return next;
      });
    }, 3000);
  }, []);

  const withReply = useCallback(
    (text: string) =>
      replyTo
        ? `> ${replyTo.content.replace(/\n/g, '\n> ')}\n\n${text}`
        : text,
    [replyTo],
  );

  const copyMessage = useCallback(async (text: string) => {
    if (!text) return;
    try {
      await navigator.clipboard.writeText(text);
      setNotice(t('common.copied'));
      window.setTimeout(() => setNotice(null), 1500);
    } catch {
      // clipboard blocked
    }
  }, [t]);

  const deliver = useCallback(
    async (text: string, imageUrl?: string, outboxId?: string): Promise<boolean> => {
      setNotice(null);
      const currentAttempt = outboxId
        ? readCordnOutbox(user?.pubkey, native.groupId).find((item) => item.id === outboxId)?.attempts
        : undefined;
      setPending({
        text,
        imageUrl,
        state: 'sending',
        outboxId,
        attempts: currentAttempt,
      });
      const sent = await sendNative(text, imageUrl);
      if (sent) {
        markSent(sent.id);
        if (outboxId) removeCordnOutbox(user?.pubkey, native.groupId, outboxId);
        const [next] = readCordnOutbox(user?.pubkey, native.groupId);
        setPending(next ? {
          text: next.text,
          imageUrl: next.imageUrl,
          state: 'failed',
          outboxId: next.id,
          attempts: next.attempts,
        } : null);
        return true;
      }

      let nextOutboxId = outboxId;
      let attempts = currentAttempt ?? 0;
      if (nextOutboxId) {
        markCordnOutboxAttempt(user?.pubkey, native.groupId, nextOutboxId);
        attempts += 1;
      } else {
        const item = enqueueCordnOutbox(user?.pubkey, native.groupId, text, imageUrl);
        nextOutboxId = item?.id;
        attempts = item?.attempts ?? 1;
      }
      setPending({
        text,
        imageUrl,
        state: 'failed',
        outboxId: nextOutboxId,
        attempts,
      });
      return false;
    },
    [sendNative, markSent, user?.pubkey, native.groupId],
  );

  const handleSend = useCallback(async () => {
    const body = draft.trim();
    if (!body || native.busy) return;
    setDraft('');
    const content = withReply(body);
    const ok = await deliver(content);
    if (ok) setReplyTo(null);
  }, [draft, native.busy, withReply, deliver]);

  const retrySend = useCallback(async () => {
    if (!pending || pending.state !== 'failed') return;
    await deliver(pending.text, pending.imageUrl, pending.outboxId);
  }, [pending, deliver]);

  const discardPending = useCallback(() => {
    if (pending?.outboxId) removeCordnOutbox(user?.pubkey, native.groupId, pending.outboxId);
    const [next] = readCordnOutbox(user?.pubkey, native.groupId);
    setPending(next ? {
      text: next.text,
      imageUrl: next.imageUrl,
      state: 'failed',
      outboxId: next.id,
      attempts: next.attempts,
    } : null);
  }, [pending, user?.pubkey, native.groupId]);

  // A failed send is retried a few times when the app is online, then left for
  // the explicit Retry button. This avoids both data loss and infinite retry.
  useEffect(() => {
    if (
      !pending ||
      pending.state !== 'failed' ||
      !online ||
      !native.ready ||
      (pending.attempts ?? 0) >= 3
    ) return;
    const timer = window.setTimeout(() => void retrySend(), 12_000);
    return () => window.clearTimeout(timer);
  }, [pending, online, native.ready, retrySend]);

  const onPickImage = useCallback(
    async (file: File | undefined) => {
      if (!file) return;
      try {
        const tags = await uploadFile(file);
        const url = tags[0]?.[1];
        if (!url) throw new Error('upload returned no url');
        const caption = draft.trim();
        setDraft('');
        await deliver(withReply(caption), url);
      } catch {
        setNotice(t('cordnUi.uploadFailed'));
      }
    },
    [uploadFile, draft, deliver, withReply, t],
  );

  const copyRef = useCallback(async () => {
    if (!native.groupRef) return;
    try {
      await navigator.clipboard.writeText(native.groupRef);
      setCopied(true);
      window.setTimeout(() => setCopied(false), 1500);
    } catch {
      // clipboard unavailable — the ref is still visible to select.
    }
  }, [native.groupRef]);

  const copyInvite = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(inviteUrl);
      setCopiedLink(true);
      window.setTimeout(() => setCopiedLink(false), 1500);
    } catch {
      // clipboard blocked — the link is visible to select.
    }
  }, [inviteUrl]);

  const openDeviceLink = useCallback(async () => {
    setDeviceLinkOpen(true);
    setDeviceLinkCode(null);
    setDeviceLinkPending(true);
    setNotice(null);
    const code = await native.createDeviceLink();
    if (!code) {
      setDeviceLinkPending(false);
      setNotice(t('cordnUi.deviceLinkFailed'));
      return;
    }
    setDeviceLinkCode(code);
    if (user?.pubkey) writePendingJoin(user.pubkey, native.groupId);
    setAwaiting(true);
  }, [native, user?.pubkey, t]);

  const copyDeviceLink = useCallback(async () => {
    if (!deviceLinkCode) return;
    try {
      await navigator.clipboard.writeText(deviceLinkCode);
      setCopiedDevice(true);
      window.setTimeout(() => setCopiedDevice(false), 1500);
    } catch {
      // clipboard blocked — the code is visible
    }
  }, [deviceLinkCode]);

  const addScannedDevice = useCallback(async (raw: string) => {
    setNotice(null);
    const ok = await native.addDevice(raw);
    setNotice(ok ? t('cordnUi.deviceLinked') : t('cordnUi.deviceLinkFailed'));
  }, [native, t]);

  const checkNow = useCallback(async () => {
    if (checkingRef.current) return false;
    checkingRef.current = true;
    try {
      return await checkInviteNative();
    } finally {
      checkingRef.current = false;
    }
  }, [checkInviteNative]);

  const handleRequestJoin = useCallback(async () => {
    setNotice(null);
    const requested = await native.requestJoin();
    if (!requested || !user?.pubkey) return;
    writePendingJoin(user.pubkey, native.groupId);
    setAwaiting(true);
  }, [native, user?.pubkey]);

  const handleApprove = useCallback(async (request: { pk: string; kp_ref: string; at: number }) => {
    const ok = await native.approve(
      request.kp_ref || request.pk,
      request.pk,
      { pk: request.pk, at: request.at },
    );
    if (ok) {
      setNotice(t('cordnUi.requestHandled'));
      window.setTimeout(() => setNotice(null), 2500);
    }
  }, [native, t]);

  const handleCheckInvite = useCallback(async () => {
    if (native.busy) return;
    setNotice(null);
    const joined = await checkNow();
    if (joined) {
      if (user?.pubkey) clearPendingJoin(user.pubkey, native.groupId);
      setAwaiting(false);
      return;
    }
    if (!awaiting) setNotice(t(noInviteKey));
  }, [checkNow, awaiting, t, noInviteKey, native.busy, user?.pubkey, native.groupId]);

  // Keep the latest checker in a ref: the poll must not restart just because a
  // parent re-render gave the hook callbacks new identities.
  const checkNowRef = useRef(checkNow);
  useEffect(() => {
    checkNowRef.current = checkNow;
  }, [checkNow]);

  // Poll the coordinator while a join request is pending. Backs off from 10s to
  // 30s so a founder who approves later is picked up without a manual tap.
  // Interactive signers (Amber) are excluded — polling would pop their signer.
  useEffect(() => {
    if (!awaiting || native.group || !native.ready || native.interactiveHintVisible || (!active && !native.passiveSigner)) return;
    let cancelled = false;
    let timer: number | undefined;
    let delay = 10_000;

    const tick = async () => {
      if (cancelled) return;
      const joined = await checkNowRef.current();
      if (cancelled) return;
      if (joined) {
        setAwaiting(false);
        setNotice(null);
        return;
      }
      delay = Math.min(30_000, Math.round(delay * 1.5));
      timer = window.setTimeout(() => void tick(), delay);
    };

    timer = window.setTimeout(() => void tick(), delay);
    return () => {
      cancelled = true;
      if (timer !== undefined) window.clearTimeout(timer);
    };
  }, [awaiting, native.group, native.ready, native.interactiveHintVisible, active, native.passiveSigner]);

  // "Join our crew chat" invite. The chat needs the person to be a crew member
  // first, so the link just drops them on this crew's private-chat tab with the
  // "Ask to join" flow ready. Uses the OS share sheet where available.
  const shareInvite = useCallback(async () => {
    try {
      if (navigator.share) {
        await navigator.share({
          title: crew.name,
          text: copy.shareInviteText,
          url: inviteUrl,
        });
        return;
      }
      await navigator.clipboard.writeText(inviteUrl);
      setNotice(t('cordnUi.inviteCopied'));
      window.setTimeout(() => setNotice(null), 2500);
    } catch {
      // share cancelled or clipboard blocked — nothing to do
    }
  }, [crew.name, copy.shareInviteText, inviteUrl, t]);

  if (!user) {
    return <Notice icon={<Lock className="h-5 w-5" />} text={copy.notLoggedIn} />;
  }
  if (!isMember) {
    return <Notice icon={<Lock className="h-5 w-5" />} text={t('cordnUi.membersOnly')} />;
  }
  if (!native.coordinator) {
    return <Notice icon={<KeyRound className="h-5 w-5" />} text={t('cordnUi.noCoordinator')} />;
  }

  const status = native.ready ? t('cordnUi.ready') : t('cordnUi.connecting');
  const steps = canCreate ? copy.founderSteps : copy.memberSteps;

  const roleOf = (pubkey: string): MemberRole =>
    pubkey === crew.pubkey ? 'founder' : crew.admins.includes(pubkey) ? 'admin' : 'member';

  const updateAdminRole = async (memberPubkey: string, makeAdmin: boolean) => {
    if (!canChangeRoles || !sourceCrew.event) return;
    setRoleBusy(memberPubkey);
    try {
      const tags = sourceCrew.event.tags.filter(
        ([name, value]) => !(name === 'p' && value === memberPubkey),
      );
      tags.push(makeAdmin ? ['p', memberPubkey, '', 'admin'] : ['p', memberPubkey]);
      await publishEvent({
        kind: SKATE_CREW_KIND,
        content: sourceCrew.event.content,
        tags,
      });
      await queryClient.invalidateQueries({ queryKey: ['skate-crew'] });
      await queryClient.invalidateQueries({ queryKey: ['skate-crews'] });
      setNotice(t(makeAdmin ? 'cordnUi.adminAdded' : 'cordnUi.adminRemoved'));
    } catch {
      setNotice(t('cordnUi.roleUpdateFailed'));
    } finally {
      setRoleBusy(null);
    }
  };

  return (
    <Card className="border-white/10 bg-black/40">
      <CardHeader className="pb-3">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <CardTitle className="flex items-center gap-2 text-base">
            <Lock className="h-4 w-4 text-teal-400" /> {copy.title}
          </CardTitle>
          <div className="flex flex-wrap items-center justify-end gap-2">
            {native.group && (
              <>
                <Button
                  size="icon"
                  variant="ghost"
                  className="h-7 w-7 text-gray-400 hover:text-teal-300"
                  onClick={() => {
                    setSearchOpen((open) => !open);
                    if (searchOpen) setSearch('');
                  }}
                  aria-label={t('common.search')}
                  title={t('common.search')}
                >
                  <Search className="h-3.5 w-3.5" />
                </Button>
                {muteKey && (
                  <Button
                    size="icon"
                    variant="ghost"
                    className={cn('h-7 w-7 hover:text-amber-300', muted ? 'text-amber-400' : 'text-gray-400')}
                    onClick={() => toggleMute(muteKey)}
                    aria-pressed={muted}
                    aria-label={muted ? t('walletUi.trust.unmute') : t('walletUi.trust.mute')}
                    title={muted ? t('walletUi.trust.unmute') : t('walletUi.trust.mute')}
                  >
                    {muted ? <Volume2 className="h-3.5 w-3.5" /> : <VolumeX className="h-3.5 w-3.5" />}
                  </Button>
                )}
              </>
            )}
            {native.group && (
              <Badge variant="secondary" className="text-[10px]">
                {t('cordnUi.memberCount', { count: native.group.members.length })}
              </Badge>
            )}
            {native.error ? (
              <>
                <Badge
                  variant="outline"
                  className="gap-1 border-red-500/40 text-[10px] text-red-300"
                >
                  <AlertTriangle className="h-3 w-3" /> {t('cordnUi.unreachable')}
                </Badge>
                <Button
                  size="icon"
                  variant="ghost"
                  className="h-7 w-7"
                  onClick={native.retry}
                  aria-label={t('cordnUi.retry')}
                >
                  <RefreshCw className="h-3.5 w-3.5" />
                </Button>
              </>
            ) : (
              <>
                <Badge
                  variant="outline"
                  className={cn(
                    'text-[10px]',
                    native.ready ? 'border-teal-500/40 text-teal-300' : 'text-gray-400',
                  )}
                >
                  {status}
                </Badge>
                {!native.ready && (
                  <Button
                    size="icon"
                    variant="ghost"
                    className="h-7 w-7"
                    onClick={native.retry}
                    aria-label={t('cordnUi.retry')}
                  >
                    <RefreshCw className="h-3.5 w-3.5" />
                  </Button>
                )}
              </>
            )}
            {native.group && (
              <Button
                size="sm"
                variant="outline"
                className="h-7 gap-1 px-2 text-xs"
                onClick={() => setInviteOpen(true)}
              >
                <Share2 className="h-3 w-3" /> {t('cordnUi.shareInvite')}
              </Button>
            )}
          </div>
        </div>
        <p className="pt-1 text-xs text-gray-500">{copy.subtitle}</p>
        {native.group && native.lastCheckedAt && (
          <p className="pt-0.5 text-[10px] text-gray-600">
            {t('cordnUi.lastChecked')} {formatDistanceToNow(new Date(native.lastCheckedAt), { addSuffix: true })}
          </p>
        )}
        {!isCommunity && (
          <details className="group mt-1 rounded-md border border-white/10 bg-black/20 px-2.5 py-1.5">
            <summary className="flex cursor-pointer list-none items-center gap-1 text-[11px] text-gray-400">
              <ChevronDown className="h-3 w-3 transition-transform group-open:rotate-180" />
              {t('cordnUi.compareTitle')}
            </summary>
            <div className="mt-1.5 space-y-1 text-[11px] leading-relaxed text-gray-500">
              <p>{t('cordnUi.compareChat')}</p>
              <p>{t('cordnUi.comparePrivate')}</p>
            </div>
          </details>
        )}
      </CardHeader>

      <CardContent className="space-y-3">
        {isCommunity && native.group && botPubkey && !native.group.members.some((member) => member.pubkey === botPubkey) && (
          <div role="status" className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
            {t('communityUi.botMissing')}
          </div>
        )}

        {native.error && (
          <div className="rounded-md border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-200">
            <div className="flex flex-wrap items-center justify-between gap-2">
              <p>{t('cordnUi.errorUnreachable')}</p>
              <Button
                size="sm"
                variant="outline"
                className="h-7 gap-1 border-red-500/30 text-red-200 hover:text-red-100"
                onClick={native.retry}
              >
                <RefreshCw className="h-3 w-3" /> {t('cordnUi.retry')}
              </Button>
            </div>
            <details className="mt-1">
              <summary className="cursor-pointer text-[10px] text-red-300/70">
                {t('cordnUi.errorDetails')}
              </summary>
              <p className="mt-1 break-words font-mono text-[10px] text-red-300/70">
                {native.error}
              </p>
            </details>
          </div>
        )}

        {!native.group ? (
          <div className="space-y-4 py-4 text-center">
            <p className="text-sm text-gray-400">
              {canCreate
                ? copy.noGroupAdmin
                : native.keyPackageReady
                  ? copy.noGroupMember
                  : copy.setupDeviceBody}
            </p>

            <ol className="mx-auto max-w-sm space-y-2 text-left">
              {steps.map((step, index) => {
                // Members see the setup move visibly: device key prepared →
                // request sent → waiting for an admin. Founders start at step 1.
                const stepDone = !canCreate && index === 0 && (awaiting || native.keyPackageReady);
                const stepWaiting = !canCreate && index === 1 && awaiting;
                return (
                  <li
                    key={step}
                    className={cn(
                      'flex items-start gap-2 text-xs',
                      stepDone || stepWaiting ? 'text-teal-200' : 'text-gray-400',
                    )}
                  >
                    <span className={cn(
                      'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-bold',
                      stepDone ? 'bg-teal-500/20 text-teal-300' : 'bg-teal-500/15 text-teal-300',
                    )}>
                      {stepDone ? <Check className="h-2.5 w-2.5" /> : stepWaiting ? <Loader2 className="h-2.5 w-2.5 animate-spin" /> : index + 1}
                    </span>
                    <span>{step}</span>
                  </li>
                );
              })}
            </ol>

            <p className="mx-auto max-w-sm text-[11px] text-gray-500">
              {copy.encryptedNote}
            </p>

            {/* Amber needs one foreground approval for the device key and one
                for the join request. Show the two translated step labels so the
                second prompt is expected, not a mystery. */}
            {native.interactiveHintVisible && !canCreate && (
              <p className="mx-auto flex max-w-sm items-center justify-center gap-1.5 text-[11px] text-amber-300/80">
                <KeyRound className="h-3 w-3 shrink-0" />
                <span>Amber</span>
                <span aria-hidden="true">·</span>
                <span>{t('cordnUi.setupDevice')}</span>
                <span aria-hidden="true">→</span>
                <span>{t('cordnUi.requestJoin')}</span>
              </p>
            )}

            <div className="flex flex-wrap items-center justify-center gap-2">
              {canCreate ? (
                <Button
                  size="sm"
                  disabled={!native.ready || native.busy}
                  onClick={() => void native.createChat()}
                  className="gap-1.5 bg-teal-500 font-semibold text-black hover:bg-teal-400"
                >
                  {native.busy ? (
                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
                  ) : (
                    <Plus className="h-3.5 w-3.5" />
                  )}
                  {copy.create}
                </Button>
              ) : (
                <>
                  <Button
                    size="sm"
                    disabled={!native.ready || native.busy || awaiting}
                    onClick={() => void handleRequestJoin()}
                    className="gap-1.5 bg-teal-500 font-semibold text-black hover:bg-teal-400"
                  >
                    <UserPlus className="h-3.5 w-3.5" />{' '}
                    {native.keyPackageReady ? t('cordnUi.requestJoin') : t('cordnUi.setupDevice')}
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    disabled={!native.ready || native.busy}
                    onClick={() => void handleCheckInvite()}
                    className="gap-1.5"
                  >
                    <RefreshCw className="h-3.5 w-3.5" /> {t('cordnUi.checkInvite')}
                  </Button>
                </>
              )}
              <Button
                size="sm"
                variant="outline"
                disabled={!native.ready || native.busy}
                onClick={() => void openDeviceLink()}
                className="gap-1.5"
              >
                <QrCode className="h-3.5 w-3.5" /> {t('cordnUi.linkDevice')}
              </Button>
            </div>

            {awaiting && (
              <p className="flex items-center justify-center gap-1.5 text-xs text-teal-300">
                {deviceLinkPending ? (
                  <>
                    <QrCode className="h-3.5 w-3.5" /> {t('cordnUi.waitingDevice')}
                  </>
                ) : native.interactiveHintVisible ? (
                  <>
                    <RefreshCw className="h-3.5 w-3.5" /> {t(waitingApprovalManualKey)}
                  </>
                ) : (
                  <>
                    <Loader2 className="h-3.5 w-3.5 animate-spin" /> {t(waitingApprovalKey)}
                  </>
                )}
              </p>
            )}

            {awaiting && !deviceLinkPending && (
              <button
                type="button"
                disabled={!native.ready || native.busy}
                onClick={() => void handleRequestJoin()}
                className="mx-auto block text-[11px] text-teal-300 underline underline-offset-2 hover:text-teal-200 disabled:opacity-50"
              >
                {t('cordnUi.requestAgain')}
              </button>
            )}

            {isCommunity && (
              <p className="mx-auto max-w-sm text-center text-[11px] text-gray-500">
                {t('communityUi.secondDeviceHint')}
              </p>
            )}

            {notice && <p className="text-center text-xs text-teal-300">{notice}</p>}

            <AdvancedPanel
              groupRef={native.groupRef}
              coordinatorPubkey={native.coordinator.serverPubkey}
              keyPackageReady={native.keyPackageReady}
              lastCheckedAt={native.lastCheckedAt}
              copied={copied}
              onCopyRef={() => void copyRef()}
            />
          </div>
        ) : (
          <>
            <details className="group rounded-md border border-white/10 bg-black/20 px-2.5 py-2">
              <summary className="flex cursor-pointer list-none items-center gap-1.5 text-xs text-gray-400">
                <Users className="h-3.5 w-3.5 text-teal-400" />
                {t('cordnUi.members')}
                <span className="text-gray-600">· {native.group.members.length}</span>
                <ChevronDown className="ml-auto h-3 w-3 transition-transform group-open:rotate-180" />
              </summary>
              <div className="mt-2 space-y-2">
                {native.group.members.map((member) => (
                  <MemberRow
                    key={`${member.pubkey}-${member.leafIndex}`}
                    pubkey={member.pubkey}
                    role={roleOf(member.pubkey)}
                    isSelf={member.pubkey === user.pubkey}
                    founderLabel={copy.owner}
                    botPubkey={botPubkey}
                    botName={copy.botName}
                    canChangeRole={canChangeRoles && member.pubkey !== user.pubkey && member.pubkey !== crew.pubkey}
                    roleBusy={roleBusy === member.pubkey}
                    onToggleAdmin={() => void updateAdminRole(member.pubkey, roleOf(member.pubkey) !== 'admin')}
                    canRemove={canManage && member.pubkey !== user.pubkey && member.pubkey !== crew.pubkey}
                    onRemove={() => {
                      void native.removeMember(member.leafIndex).then((ok) => {
                        if (!ok) setNotice(t('cordnUi.removeMemberFailed'));
                      });
                    }}
                  />
                ))}
              </div>
              <div className="mt-2 flex flex-wrap justify-end gap-2">
                {!isCommunity && user.pubkey === crew.pubkey && (
                  <Button asChild size="sm" variant="ghost" className="h-7 gap-1 px-2 text-xs">
                    <Link to={`/edit-crew/${crew.pubkey}/${crew.identifier}`}>
                      <Users className="h-3 w-3" /> {t('socialUi.editCrew.title')}
                    </Link>
                  </Button>
                )}
                <Button
                  size="sm"
                  variant="outline"
                  className="h-7 gap-1 px-2 text-xs"
                  onClick={() => setScannerOpen(true)}
                >
                  <ScanLine className="h-3 w-3" /> {t('cordnUi.addDevice')}
                </Button>
              </div>
            </details>

            {searchOpen && (
              <div className="flex items-center gap-2">
                <Input
                  value={search}
                  onChange={(event) => setSearch(event.target.value)}
                  placeholder={t('common.search')}
                  aria-label={t('common.search')}
                  className="h-8 border-white/10 bg-black/40 text-xs"
                  autoFocus
                />
                {search && (
                  <Button
                    size="icon"
                    variant="ghost"
                    className="h-8 w-8 text-gray-400"
                    onClick={() => setSearch('')}
                    aria-label={t('common.clear')}
                    title={t('common.clear')}
                  >
                    <X className="h-3.5 w-3.5" />
                  </Button>
                )}
              </div>
            )}

            <div
              ref={scrollRef}
              className="max-h-80 space-y-2 overflow-y-auto rounded-md border border-white/10 bg-black/30 p-3"
            >
              {displayMessages.length === 0 && !pending ? (
                <p className="py-6 text-center text-xs text-gray-500">
                  {search.trim() ? t('common.noResults') : t('cordnUi.placeholder')}
                </p>
              ) : (
                displayMessages.map((m) => (
                  <div
                    key={m.id}
                    className={cn('flex flex-col gap-0.5', m.direction === 'outbound' && 'items-end')}
                  >
                    <div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-gray-500">
                      <span>
                        {m.sender === user.pubkey ? t('cordnUi.you') : shortNpub(m.sender)}
                      </span>
                      <span>
                        {formatDistanceToNow(new Date(m.createdAt * 1000), { addSuffix: true })}
                      </span>
                      {m.direction === 'outbound' && sentIds.has(m.id) && (
                        <span className="flex items-center gap-0.5 text-teal-400">
                          <Check className="h-3 w-3" /> {t('cordnUi.sent')}
                        </span>
                      )}
                      {m.direction === 'outbound' && (native.readBy[m.id]?.length ?? 0) > 0 && (
                        <span className="flex items-center gap-0.5 text-teal-400">
                          <CheckCheck className="h-3 w-3" /> {t('cordnUi.readBy', { count: native.readBy[m.id].length })}
                        </span>
                      )}
                      <span className="ml-auto flex items-center gap-0.5">
                        <button
                          type="button"
                          onClick={() => setReactingTo(reactingTo === m.id ? null : m.id)}
                          className="rounded p-0.5 text-gray-500 hover:bg-white/10 hover:text-gray-200"
                          aria-label={t('cordnUi.addReaction')}
                          title={t('cordnUi.addReaction')}
                        >
                          <SmilePlus className="h-3 w-3" />
                        </button>
                        <button
                          type="button"
                          onClick={() => void copyMessage(m.content)}
                          className="rounded p-0.5 text-gray-500 hover:bg-white/10 hover:text-gray-200"
                          aria-label={t('common.copy')}
                          title={t('common.copy')}
                        >
                          <Copy className="h-3 w-3" />
                        </button>
                        <button
                          type="button"
                          onClick={() => setReplyTo({ id: m.id, content: m.content })}
                          className="rounded p-0.5 text-gray-500 hover:bg-white/10 hover:text-gray-200"
                          aria-label={t('cordnUi.reply')}
                          title={t('cordnUi.reply')}
                        >
                          <Reply className="h-3 w-3" />
                        </button>
                        {m.direction === 'outbound' && (
                          <button
                            type="button"
                            onClick={() => {
                              if (!window.confirm(t('cordnUi.deleteMessageConfirm'))) return;
                              void native.deleteMessage(m.id);
                            }}
                            className="rounded p-0.5 text-gray-500 hover:bg-red-500/10 hover:text-red-300"
                            aria-label={t('cordnUi.deleteMessage')}
                            title={t('cordnUi.deleteMessage')}
                          >
                            <Trash2 className="h-3 w-3" />
                          </button>
                        )}
                      </span>
                    </div>
                    <div
                      className={cn(
                        'max-w-[85%] space-y-1 overflow-hidden rounded-2xl px-3 py-1.5 text-sm',
                        m.direction === 'outbound'
                          ? 'bg-teal-500/20 text-teal-100'
                          : 'bg-white/10 text-gray-100',
                      )}
                    >
                      {m.imageUrl && (
                        <ImageWithFallback
                          src={m.imageUrl}
                          alt=""
                          loading="lazy"
                          className="max-h-60 w-full rounded-lg object-cover"
                        />
                      )}
                      {m.content && (
                        <div className="whitespace-pre-wrap break-words">{m.content}</div>
                      )}
                    </div>
                    {reactingTo === m.id && (
                      <div className="flex items-center gap-1 rounded-full border border-white/10 bg-black/80 px-2 py-1">
                        {['👍', '❤️', '🔥', '😂'].map((emoji) => (
                          <button
                            key={emoji}
                            type="button"
                            onClick={() => {
                              void native.toggleReaction(m.id, emoji);
                              setReactingTo(null);
                            }}
                            className="rounded px-1 text-sm hover:bg-white/10"
                          >
                            {emoji}
                          </button>
                        ))}
                      </div>
                    )}
                    {Object.values(native.reactions[m.id] ?? {}).some((pks) => pks.length > 0) && (
                      <div className={cn('flex flex-wrap gap-1', m.direction === 'outbound' && 'justify-end')}>
                        {Object.entries(native.reactions[m.id] ?? {})
                          .filter(([, pks]) => pks.length > 0)
                          .map(([emoji, pks]) => (
                            <button
                              key={emoji}
                              type="button"
                              onClick={() => void native.toggleReaction(m.id, emoji)}
                              className={cn(
                                'rounded-full border px-1.5 py-0.5 text-[10px]',
                                user?.pubkey && pks.includes(user.pubkey)
                                  ? 'border-teal-500/40 bg-teal-500/10 text-teal-200'
                                  : 'border-white/10 bg-white/5 text-gray-300',
                              )}
                            >
                              {emoji} {pks.length}
                            </button>
                          ))}
                      </div>
                    )}
                  </div>
                ))
              )}

              {pending && (
                <div className="flex flex-col items-end gap-1">
                  <div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-gray-500">
                    <span>{t('cordnUi.you')}</span>
                    <span className={cn(pending.state === 'failed' && 'text-red-300')}>
                      {pending.state === 'sending'
                        ? t('cordnUi.sending')
                        : t('cordnUi.sendFailed')}
                      {pending.state === 'failed' && pending.outboxId && (
                        <span className="ml-1 text-gray-500">· {t('cordnUi.queued')}</span>
                      )}
                    </span>
                  </div>
                  <div className="max-w-[85%] space-y-1 overflow-hidden rounded-2xl bg-teal-500/20 px-3 py-1.5 text-sm text-teal-100 opacity-80">
                    {pending.imageUrl && (
                      <img
                        src={pending.imageUrl}
                        alt=""
                        className="max-h-60 w-full rounded-lg object-cover"
                      />
                    )}
                    {pending.text && (
                      <div className="whitespace-pre-wrap break-words">{pending.text}</div>
                    )}
                  </div>
                  {pending.state === 'failed' && (
                    <div className="flex items-center gap-1">
                      <Button
                        size="sm"
                        variant="outline"
                        className="h-7 gap-1 px-2 text-xs"
                        onClick={() => void retrySend()}
                      >
                        <RefreshCw className="h-3 w-3" /> {t('cordnUi.retry')}
                      </Button>
                      <Button
                        size="sm"
                        variant="ghost"
                        className="h-7 gap-1 px-2 text-xs text-gray-400"
                        onClick={discardPending}
                      >
                        <X className="h-3 w-3" /> {t('cordnUi.dismiss')}
                      </Button>
                    </div>
                  )}
                </div>
              )}
            </div>

            {replyTo && (
              <div className="flex items-start gap-2 rounded-md border-l-2 border-teal-400 bg-teal-500/10 px-2 py-1 text-xs text-gray-300">
                <Reply className="mt-0.5 h-3 w-3 shrink-0 text-teal-300" />
                <span className="min-w-0 flex-1 truncate">
                  {t('cordnUi.reply')}: {replyTo.content || t('cordnUi.attachImage')}
                </span>
                <button
                  type="button"
                  onClick={() => setReplyTo(null)}
                  className="shrink-0 rounded p-0.5 text-gray-500 hover:text-gray-200"
                  aria-label={t('common.cancel')}
                >
                  <X className="h-3 w-3" />
                </button>
              </div>
            )}

            <div className="flex items-center gap-2">
              <input
                ref={fileRef}
                type="file"
                accept="image/*"
                className="hidden"
                onChange={(e) => {
                  void onPickImage(e.target.files?.[0]);
                  e.target.value = '';
                }}
              />
              <Button
                size="icon"
                variant="outline"
                disabled={uploading || native.busy}
                onClick={() => fileRef.current?.click()}
                aria-label={t('cordnUi.attachImage')}
              >
                {uploading ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
                  <ImagePlus className="h-4 w-4" />
                )}
              </Button>
              <Input
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    void handleSend();
                  }
                }}
                placeholder={t('cordnUi.placeholder')}
                className="flex-1"
              />
              <Button
                size="icon"
                disabled={native.busy || !draft.trim()}
                onClick={() => void handleSend()}
                aria-label={t('cordnUi.send')}
              >
                {native.busy ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
                  <Send className="h-4 w-4" />
                )}
              </Button>
              <Button
                size="icon"
                variant="outline"
                onClick={() => void native.refresh()}
                aria-label={t('cordnUi.refresh')}
              >
                <RefreshCw className={cn('h-4 w-4', native.busy && 'animate-spin')} />
              </Button>
            </div>

            {notice && <p className="text-xs text-teal-300">{notice}</p>}

            {native.interactiveHintVisible && (
              <p className="text-[11px] text-gray-500">{t('cordnUi.interactiveHint')}</p>
            )}

            <AdvancedPanel
              groupRef={native.groupRef}
              coordinatorPubkey={native.coordinator.serverPubkey}
              keyPackageReady={native.keyPackageReady || !!native.group}
              lastCheckedAt={native.lastCheckedAt}
              copied={copied}
              onCopyRef={() => void copyRef()}
            />

            {canManage && (
              <div
                id={isCommunity ? 'community-requests' : undefined}
                className="scroll-mt-24 space-y-2 rounded-md border border-white/10 bg-black/20 p-2"
              >
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium text-gray-300">
                    {t('cordnUi.requests')}
                  </span>
                  <Button
                    size="sm"
                    variant="ghost"
                    disabled={native.busy}
                    onClick={() => void native.loadRequests()}
                    className="h-7 gap-1 text-xs"
                  >
                    <RefreshCw className="h-3 w-3" /> {t('cordnUi.checkRequests')}
                  </Button>
                </div>
                {native.requests.length === 0 ? (
                  <p className="px-1 text-[11px] text-gray-500">
                    {native.group.members.length <= 1
                      ? t('cordnUi.inviteHint')
                      : t('cordnUi.noRequests')}
                  </p>
                ) : (
                  native.requests.map((req) => (
                    <RequestRow
                      key={`${req.pk}-${req.kp_ref}`}
                      pubkey={req.pk}
                      disabled={native.busy}
                      onApprove={() => void handleApprove(req)}
                      botPubkey={botPubkey}
                      botName={copy.botName}
                    />
                  ))
                )}
              </div>
            )}
          </>
        )}
      </CardContent>

      <Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
        <DialogContent className="max-w-sm border-white/10 bg-zinc-950">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <QrCode className="h-4 w-4 text-teal-400" /> {copy.qrTitle}
            </DialogTitle>
            <DialogDescription>{copy.qrHint}</DialogDescription>
          </DialogHeader>
          <div className="flex justify-center rounded-xl bg-white p-3">
            <QRCodeCanvas value={inviteUrl} size={220} level="M" />
          </div>
          <code className="block break-all rounded bg-black/50 px-2 py-1.5 text-[10px] text-gray-400">
            {inviteUrl}
          </code>
          <div className="flex flex-wrap gap-2">
            <Button size="sm" onClick={() => void shareInvite()} className="flex-1 gap-1.5">
              <Share2 className="h-3.5 w-3.5" /> {t('cordnUi.shareInvite')}
            </Button>
            <Button
              size="sm"
              variant="outline"
              onClick={() => void copyInvite()}
              className="flex-1 gap-1.5"
            >
              {copiedLink ? (
                <Check className="h-3.5 w-3.5 text-teal-400" />
              ) : (
                <Copy className="h-3.5 w-3.5" />
              )}
              {copiedLink ? t('cordnUi.copied') : t('cordnUi.copyRef')}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      <Dialog
        open={deviceLinkOpen}
        onOpenChange={(open) => {
          setDeviceLinkOpen(open);
          if (!open) setDeviceLinkCode(null);
        }}
      >
        <DialogContent className="max-w-sm border-white/10 bg-zinc-950">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <QrCode className="h-4 w-4 text-teal-400" /> {t('cordnUi.linkDeviceTitle')}
            </DialogTitle>
            <DialogDescription>{t('cordnUi.linkDeviceHint')}</DialogDescription>
          </DialogHeader>
          {deviceLinkCode ? (
            <>
              <div className="flex justify-center rounded-xl bg-white p-3">
                <QRCodeCanvas value={deviceLinkCode} size={240} level="L" />
              </div>
              <code className="block max-h-20 break-all overflow-y-auto rounded bg-black/50 px-2 py-1.5 text-[10px] text-gray-400">
                {deviceLinkCode}
              </code>
              <div className="flex flex-wrap gap-2">
                <Button size="sm" onClick={() => void copyDeviceLink()} className="flex-1 gap-1.5">
                  {copiedDevice ? (
                    <Check className="h-3.5 w-3.5 text-teal-400" />
                  ) : (
                    <Copy className="h-3.5 w-3.5" />
                  )}
                  {copiedDevice ? t('cordnUi.copied') : t('cordnUi.copyRef')}
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => {
                    setDeviceLinkOpen(false);
                    setDeviceLinkCode(null);
                  }}
                >
                  {t('common.close')}
                </Button>
              </div>
            </>
          ) : (
            <div className="flex items-center justify-center gap-2 py-8 text-xs text-gray-400">
              <Loader2 className="h-4 w-4 animate-spin" /> {t('common.loading')}
            </div>
          )}
          <p className="text-[11px] text-gray-500">{t('cordnUi.linkDeviceNote')}</p>
        </DialogContent>
      </Dialog>

      <QRScannerModal
        isOpen={scannerOpen}
        onClose={() => setScannerOpen(false)}
        onResult={(result) => void addScannedDevice(result.value)}
      />
    </Card>
  );
}

function AdvancedPanel({
  groupRef,
  coordinatorPubkey,
  keyPackageReady,
  lastCheckedAt,
  copied,
  onCopyRef,
}: {
  groupRef: string | null;
  coordinatorPubkey: string;
  keyPackageReady: boolean;
  lastCheckedAt: number | null;
  copied: boolean;
  onCopyRef: () => void;
}) {
  const { t } = useTranslation();
  const [copiedCordn, setCopiedCordn] = useState(false);
  const cordnUrl = groupRef ? `https://cordn.net/chat/${groupRef}` : null;
  const copyCordn = async () => {
    if (!cordnUrl) return;
    try {
      await navigator.clipboard.writeText(cordnUrl);
      setCopiedCordn(true);
      window.setTimeout(() => setCopiedCordn(false), 1500);
    } catch {
      // clipboard blocked — the link is visible to select.
    }
  };

  return (
    <details className="group rounded-md border border-white/10 bg-black/20 px-2.5 py-2 text-left">
      <summary className="flex cursor-pointer list-none items-center gap-1.5 text-[11px] text-gray-500">
        <ChevronDown className="h-3 w-3 transition-transform group-open:rotate-180" />
        {t('cordnUi.advanced')}
      </summary>
      <div className="space-y-2 pt-2">
        <div className="flex items-center justify-between gap-2 text-[11px] text-gray-500">
          <span>{t('cordnUi.coordinator')}</span>
          <code className="truncate rounded bg-black/40 px-1.5 py-0.5 text-gray-400">
            {shortNpub(coordinatorPubkey)}
          </code>
        </div>
        <div className="flex items-center justify-between gap-2 text-[11px] text-gray-500">
          <span>{t('cordnUi.keyPackage')}</span>
          <span className={keyPackageReady ? 'text-teal-300' : 'text-amber-300'}>
            {keyPackageReady ? t('cordnUi.keyPackageReady') : t('cordnUi.keyPackageMissing')}
          </span>
        </div>
        <div className="flex items-center justify-between gap-2 text-[11px] text-gray-500">
          <span>{t('cordnUi.lastChecked')}</span>
          <span className="text-gray-400">
            {lastCheckedAt
              ? formatDistanceToNow(new Date(lastCheckedAt), { addSuffix: true })
              : '—'}
          </span>
        </div>
        {groupRef && (
          <>
            <div className="flex items-center gap-2 text-[11px] text-gray-500">
              <span className="shrink-0">{t('cordnUi.groupRef')}</span>
              <code className="min-w-0 flex-1 truncate rounded bg-black/40 px-1.5 py-0.5 text-gray-400">
                {groupRef}
              </code>
              <Button
                size="sm"
                variant="ghost"
                className="h-7 gap-1 px-2 text-xs"
                onClick={onCopyRef}
              >
                {copied ? (
                  <Check className="h-3 w-3 text-teal-400" />
                ) : (
                  <Copy className="h-3 w-3" />
                )}
                {copied ? t('cordnUi.copied') : t('cordnUi.copyRef')}
              </Button>
            </div>
            <div className="flex flex-wrap items-center gap-2">
              <span className="w-full text-[10px] text-gray-600">
                {t('cordnUi.cordnWebCaveat')}
              </span>
              <Button
                size="sm"
                variant="ghost"
                className="h-7 gap-1 px-2 text-[11px] text-gray-400"
                onClick={() => void copyCordn()}
              >
                {copiedCordn ? (
                  <Check className="h-3 w-3 text-teal-400" />
                ) : (
                  <Copy className="h-3 w-3" />
                )}
                {copiedCordn ? t('cordnUi.copied') : t('cordnUi.copyCordnLink')}
              </Button>
            </div>
          </>
        )}
      </div>
    </details>
  );
}

function PersonLabel({
  pubkey,
  isSelf,
  botPubkey,
  botName,
}: {
  pubkey: string;
  isSelf?: boolean;
  botPubkey?: string;
  botName?: string;
}) {
  const { t } = useTranslation();
  const { data } = useAuthor(pubkey);
  const isBot = !!botPubkey && pubkey === botPubkey;
  const name = isBot
    ? (botName ?? shortNpub(pubkey))
    : data?.metadata?.display_name || data?.metadata?.name || shortNpub(pubkey);
  const picture = isBot ? undefined : data?.metadata?.picture;
  const initials = name.replace(/^@/, '').slice(0, 2).toUpperCase();

  return (
    <div className="flex min-w-0 items-center gap-2">
      <Avatar className="h-6 w-6">
        <AvatarImage src={picture} alt={name} />
        <AvatarFallback className="bg-teal-900/40 text-[9px] font-bold text-teal-300">
          {initials}
        </AvatarFallback>
      </Avatar>
      <span className="truncate text-xs text-gray-300">
        {name}
        {isSelf && <span className="text-gray-500"> ({t('cordnUi.you')})</span>}
      </span>
    </div>
  );
}

function MemberRow({
  pubkey,
  role,
  isSelf,
  founderLabel,
  botPubkey,
  botName,
  canRemove,
  onRemove,
  canChangeRole,
  roleBusy,
  onToggleAdmin,
}: {
  pubkey: string;
  role: MemberRole;
  isSelf: boolean;
  founderLabel: string;
  botPubkey?: string;
  botName?: string;
  canRemove?: boolean;
  onRemove?: () => void;
  canChangeRole?: boolean;
  roleBusy?: boolean;
  onToggleAdmin?: () => void;
}) {
  const { t } = useTranslation();
  const label =
    role === 'founder'
      ? founderLabel
      : role === 'admin'
        ? t('cordnUi.roleAdmin')
        : t('cordnUi.roleMember');
  return (
    <div className="flex items-center justify-between gap-2">
      <PersonLabel pubkey={pubkey} isSelf={isSelf} botPubkey={botPubkey} botName={botName} />
      <div className="flex shrink-0 items-center gap-1">
      <Badge
        variant="outline"
        className={cn(
          'shrink-0 text-[9px]',
          role === 'founder' && 'border-teal-500/40 text-teal-300',
          role === 'admin' && 'border-amber-500/40 text-amber-300',
          role === 'member' && 'text-gray-400',
        )}
      >
        {label}
      </Badge>
      {canChangeRole && onToggleAdmin && (
        <Button
          size="icon"
          variant="ghost"
          className="h-6 w-6 text-gray-500 hover:bg-amber-500/10 hover:text-amber-300"
          onClick={onToggleAdmin}
          disabled={roleBusy}
          aria-label={role === 'admin' ? t('cordnUi.removeAdmin') : t('cordnUi.makeAdmin')}
          title={role === 'admin' ? t('cordnUi.removeAdmin') : t('cordnUi.makeAdmin')}
        >
          {roleBusy ? (
            <Loader2 className="h-3 w-3 animate-spin" />
          ) : role === 'admin' ? (
            <ShieldMinus className="h-3 w-3" />
          ) : (
            <ShieldPlus className="h-3 w-3" />
          )}
        </Button>
      )}
      {canRemove && onRemove && (
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button
              size="icon"
              variant="ghost"
              className="h-6 w-6 text-gray-500 hover:bg-red-500/10 hover:text-red-300"
              aria-label={t('common.remove')}
              title={t('common.remove')}
            >
              <Trash2 className="h-3 w-3" />
            </Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>{t('common.remove')}</AlertDialogTitle>
              <AlertDialogDescription>
                {t('cordnUi.removeMemberConfirm', { name: shortNpub(pubkey) })}
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
              <AlertDialogAction onClick={onRemove}>{t('common.remove')}</AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      )}
      </div>
    </div>
  );
}

function RequestRow({
  pubkey,
  disabled,
  onApprove,
  botPubkey,
  botName,
}: {
  pubkey: string;
  disabled: boolean;
  onApprove: () => void;
  botPubkey?: string;
  botName?: string;
}) {
  const { t } = useTranslation();
  return (
    <div className="flex items-center justify-between gap-2">
      <PersonLabel pubkey={pubkey} botPubkey={botPubkey} botName={botName} />
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button
            size="sm"
            disabled={disabled}
            className="h-7 shrink-0 gap-1 text-xs"
          >
            <UserPlus className="h-3 w-3" /> {t('cordnUi.approve')}
          </Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{t('cordnUi.approveTitle')}</AlertDialogTitle>
            <AlertDialogDescription>
              {t('cordnUi.approveDesc', { name: shortNpub(pubkey) })}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
            <AlertDialogAction onClick={onApprove}>{t('cordnUi.approve')}</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}

function Notice({ icon, text }: { icon: ReactNode; text: string }) {
  return (
    <Card className="border-dashed border-white/10 bg-black/40">
      <CardContent className="flex items-center gap-3 py-8 text-sm text-gray-400">
        <span className="text-teal-400">{icon}</span>
        {text}
      </CardContent>
    </Card>
  );
}