import React, { useEffect, useRef, useState } from 'react';
import { AnimatePresence, motion } from 'motion/react';
import {
  CheckCircle,
  ChevronRight,
  Clock3,
  Copy,
  DownloadCloud,
  File as FileIcon,
  Folder,
  FolderPlus,
  Link as LinkIcon,
  Loader2,
  Monitor,
  Plus,
  Send,
  Shield,
  Smartphone,
  Trash2,
  UploadCloud,
  X,
  LogIn,
} from 'lucide-react';
import { useNavigate, useSearchParams } from 'react-router-dom';

import { useAuth } from '@/src/auth/AuthProvider';
import { Button } from '@/src/components/ui/button';
import { appendTransferRelayHint } from '@/src/lib/transfer-ice';
import { buildTransferShareUrl, getTransferRouterMode } from '@/src/lib/transfer-links';
import {
  createTransferFileManifest,
  createTransferFileManifestMessage,
  createTransferCompleteMessage,
  createTransferFileCompleteMessage,
  createTransferFileId,
  createTransferFileMetaMessage,
  type TransferFileDescriptor,
  SIGNAL_POLL_INTERVAL_MS,
} from '@/src/lib/transfer-protocol';
import {
  shouldPublishTransferProgress,
  resolveTransferChunkSize,
} from '@/src/lib/transfer-runtime';
import { createTransferPeer, type TransferPeerAdapter } from '@/src/lib/transfer-peer';
import {
  DEFAULT_TRANSFER_ICE_SERVERS,
  TRANSFER_HAS_RELAY_SUPPORT,
  createTransferSession,
  listMyOfflineTransferSessions,
  pollTransferSignals,
  postTransferSignal,
  uploadOfflineTransferFile,
} from '@/src/lib/transfer';
import type { TransferMode, TransferSessionResponse } from '@/src/lib/types';
import { cn } from '@/src/lib/utils';

import {
  buildQrImageUrl,
  canSendTransferFiles,
  getAvailableTransferModes,
  formatTransferSize,
  getOfflineTransferSessionLabel,
  getOfflineTransferSessionSize,
  getTransferModeSummary,
  resolveInitialTransferTab,
} from './transfer-state';
import TransferReceive from './TransferReceive';

type SendPhase = 'idle' | 'creating' | 'waiting' | 'connecting' | 'uploading' | 'transferring' | 'completed' | 'error';

function parseJsonPayload<T>(payload: string): T | null {
  try {
    return JSON.parse(payload) as T;
  } catch {
    return null;
  }
}

function getPhaseMessage(mode: TransferMode, phase: SendPhase, errorMessage: string) {
  if (mode === 'OFFLINE') {
    switch (phase) {
      case 'creating':
        return '正在创建离线快传会话并生成取件链接...';
      case 'uploading':
        return '文件正在上传到站点存储，上传完成后 7 天内都可以反复接收。';
      case 'completed':
        return '离线文件已上传完成，接收方现在可以多次下载或存入网盘。';
      case 'error':
        return errorMessage || '离线快传初始化失败，请重试。';
      default:
        return '拖拽文件后会生成离线取件码，并把文件上传到站点存储保留 7 天。';
    }
  }

  switch (phase) {
    case 'creating':
      return '正在创建快传会话并准备 P2P 连接...';
    case 'waiting':
      return '分享链接和二维码已经生成，等待接收端打开页面并选择要接收的文件。';
    case 'connecting':
      return '接收端已进入页面，正在交换浏览器连接信息并同步文件清单...';
    case 'transferring':
      return 'P2P 直连已建立，文件正在发送到对方浏览器。';
    case 'completed':
      return '本次文件已发送完成，对方页面现在可以下载。';
    case 'error':
      return errorMessage || '快传会话初始化失败，请重试。';
    default:
      return '拖拽文件后会自动生成会话、二维码和公开接收页链接。';
  }
}

export default function Transfer() {
  const navigate = useNavigate();
  const { ready: authReady, session: authSession } = useAuth();
  const [searchParams] = useSearchParams();
  const sessionId = searchParams.get('session');
  const isAuthenticated = Boolean(authSession?.token);
  const allowSend = canSendTransferFiles(isAuthenticated);
  const availableTransferModes = getAvailableTransferModes(isAuthenticated);
  const [activeTab, setActiveTab] = useState(() => resolveInitialTransferTab(allowSend, sessionId));

  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const [transferMode, setTransferMode] = useState<TransferMode>('ONLINE');
  const [session, setSession] = useState<TransferSessionResponse | null>(null);
  const [sendPhase, setSendPhase] = useState<SendPhase>('idle');
  const [sendProgress, setSendProgress] = useState(0);
  const [sendError, setSendError] = useState('');
  const [copied, setCopied] = useState(false);
  const [offlineHistory, setOfflineHistory] = useState<TransferSessionResponse[]>([]);
  const [offlineHistoryLoading, setOfflineHistoryLoading] = useState(false);
  const [offlineHistoryError, setOfflineHistoryError] = useState('');
  const [selectedOfflineSession, setSelectedOfflineSession] = useState<TransferSessionResponse | null>(null);
  const [historyCopiedSessionId, setHistoryCopiedSessionId] = useState<string | null>(null);

  const fileInputRef = useRef<HTMLInputElement>(null);
  const folderInputRef = useRef<HTMLInputElement>(null);
  const copiedTimerRef = useRef<number | null>(null);
  const historyCopiedTimerRef = useRef<number | null>(null);
  const pollTimerRef = useRef<number | null>(null);
  const peerRef = useRef<TransferPeerAdapter | null>(null);
  const cursorRef = useRef(0);
  const bootstrapIdRef = useRef(0);
  const totalBytesRef = useRef(0);
  const sentBytesRef = useRef(0);
  const lastSendProgressPublishAtRef = useRef(0);
  const lastPublishedSendProgressRef = useRef(0);
  const sendingStartedRef = useRef(false);
  const manifestRef = useRef<TransferFileDescriptor[]>([]);

  useEffect(() => {
    if (!folderInputRef.current) {
      return;
    }

    folderInputRef.current.setAttribute('webkitdirectory', '');
    folderInputRef.current.setAttribute('directory', '');
  }, []);

  useEffect(() => {
    return () => {
      cleanupCurrentTransfer();
      if (copiedTimerRef.current) {
        window.clearTimeout(copiedTimerRef.current);
      }
      if (historyCopiedTimerRef.current) {
        window.clearTimeout(historyCopiedTimerRef.current);
      }
    };
  }, []);

  useEffect(() => {
    if (!allowSend || sessionId) {
      setActiveTab('receive');
    }
  }, [allowSend, sessionId]);

  useEffect(() => {
    if (!availableTransferModes.includes(transferMode)) {
      setTransferMode('ONLINE');
    }
  }, [availableTransferModes, transferMode]);

  useEffect(() => {
    if (selectedFiles.length === 0) {
      return;
    }

    void bootstrapTransfer(selectedFiles);
  }, [transferMode]);

  useEffect(() => {
    if (!isAuthenticated) {
      setOfflineHistory([]);
      setOfflineHistoryError('');
      setSelectedOfflineSession(null);
      return;
    }

    void loadOfflineHistory();
  }, [isAuthenticated]);

  const totalSize = selectedFiles.reduce((sum, file) => sum + file.size, 0);
  const shareLink = session
    ? buildTransferShareUrl(window.location.origin, session.sessionId, getTransferRouterMode())
    : '';
  const qrImageUrl = shareLink ? buildQrImageUrl(shareLink) : '';
  const transferModeSummary = getTransferModeSummary(transferMode);
  const selectedOfflineSessionShareLink = selectedOfflineSession
    ? buildTransferShareUrl(window.location.origin, selectedOfflineSession.sessionId, getTransferRouterMode())
    : '';
  const selectedOfflineSessionQrImageUrl = selectedOfflineSessionShareLink
    ? buildQrImageUrl(selectedOfflineSessionShareLink)
    : '';

  function navigateBackToLogin() {
    const nextPath = `${window.location.pathname}${window.location.search}`;
    navigate(`/login?next=${encodeURIComponent(nextPath)}`);
  }

  function isOfflineSessionReady(sessionToCheck: TransferSessionResponse) {
    return sessionToCheck.files.every((file) => file.uploaded);
  }

  async function loadOfflineHistory(options?: {silent?: boolean}) {
    if (!isAuthenticated) {
      return;
    }

    if (!options?.silent) {
      setOfflineHistoryLoading(true);
    }
    setOfflineHistoryError('');

    try {
      const sessions = await listMyOfflineTransferSessions();
      setOfflineHistory(sessions);
      setSelectedOfflineSession((current) => {
        if (!current) {
          return current;
        }
        return sessions.find((item) => item.sessionId === current.sessionId) ?? null;
      });
    } catch (error) {
      setOfflineHistoryError(error instanceof Error ? error.message : '离线快传记录加载失败');
    } finally {
      if (!options?.silent) {
        setOfflineHistoryLoading(false);
      }
    }
  }

  function cleanupCurrentTransfer() {
    if (pollTimerRef.current) {
      window.clearInterval(pollTimerRef.current);
      pollTimerRef.current = null;
    }

    const peer = peerRef.current;
    peerRef.current = null;
    peer?.destroy();

    cursorRef.current = 0;
    lastSendProgressPublishAtRef.current = 0;
    lastPublishedSendProgressRef.current = 0;
    sendingStartedRef.current = false;
  }

  function publishSendProgress(nextProgress: number, options?: {force?: boolean}) {
    const normalizedProgress = Math.max(0, Math.min(100, nextProgress));
    const now = globalThis.performance?.now?.() ?? Date.now();
    if (!options?.force && !shouldPublishTransferProgress({
      nextProgress: normalizedProgress,
      previousProgress: lastPublishedSendProgressRef.current,
      now,
      lastPublishedAt: lastSendProgressPublishAtRef.current,
    })) {
      return;
    }

    lastSendProgressPublishAtRef.current = now;
    lastPublishedSendProgressRef.current = normalizedProgress;
    setSendProgress(normalizedProgress);
  }

  function resetSenderState() {
    cleanupCurrentTransfer();
    setSession(null);
    setSelectedFiles([]);
    setSendPhase('idle');
    publishSendProgress(0, {force: true});
    setSendError('');
  }

  async function copyToClipboard(text: string) {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      if (copiedTimerRef.current) {
        window.clearTimeout(copiedTimerRef.current);
      }
      copiedTimerRef.current = window.setTimeout(() => setCopied(false), 1800);
    } catch {
      setCopied(false);
    }
  }

  function ensureReadyState(nextFiles: File[]) {
    setSelectedFiles(nextFiles);

    if (nextFiles.length === 0) {
      resetSenderState();
      return;
    }

    void bootstrapTransfer(nextFiles);
  }

  function appendFiles(files: FileList | File[]) {
    const nextFiles = [...selectedFiles, ...Array.from(files)];
    ensureReadyState(nextFiles);
  }

  function handleFileSelect(event: React.ChangeEvent<HTMLInputElement>) {
    if (event.target.files?.length) {
      appendFiles(event.target.files);
    }
    event.target.value = '';
  }

  function handleDragOver(event: React.DragEvent) {
    event.preventDefault();
  }

  function handleDrop(event: React.DragEvent) {
    event.preventDefault();
    if (event.dataTransfer.files?.length) {
      appendFiles(event.dataTransfer.files);
    }
  }

  function removeFile(indexToRemove: number) {
    ensureReadyState(selectedFiles.filter((_, index) => index !== indexToRemove));
  }

  async function bootstrapTransfer(files: File[]) {
    const bootstrapId = bootstrapIdRef.current + 1;
    bootstrapIdRef.current = bootstrapId;

    cleanupCurrentTransfer();
    setSendError('');
    setSendPhase('creating');
    publishSendProgress(0, {force: true});
    manifestRef.current = createTransferFileManifest(files);
    totalBytesRef.current = 0;
    sentBytesRef.current = 0;

    try {
      const createdSession = await createTransferSession(files, transferMode);
      if (bootstrapIdRef.current !== bootstrapId) {
        return;
      }

      setSession(createdSession);
      if (createdSession.mode === 'OFFLINE') {
        void loadOfflineHistory({silent: true});
        await uploadOfflineFiles(createdSession, files, bootstrapId);
        return;
      }

      setSendPhase('waiting');
      await setupSenderPeer(createdSession, files, bootstrapId);
    } catch (error) {
      if (bootstrapIdRef.current !== bootstrapId) {
        return;
      }
      setSendPhase('error');
      setSendError(error instanceof Error ? error.message : '快传会话创建失败');
    }
  }

  async function uploadOfflineFiles(createdSession: TransferSessionResponse, files: File[], bootstrapId: number) {
    setSendPhase('uploading');
    totalBytesRef.current = files.reduce((sum, file) => sum + file.size, 0);
    sentBytesRef.current = 0;
    publishSendProgress(0, {force: true});

    for (const [index, file] of files.entries()) {
      if (bootstrapIdRef.current !== bootstrapId) {
        return;
      }

      const sessionFile = createdSession.files[index];
      if (!sessionFile?.id) {
        throw new Error('离线快传文件清单不完整，请重新开始本次发送。');
      }

      let lastLoaded = 0;
      await uploadOfflineTransferFile(createdSession.sessionId, sessionFile.id, file, ({ loaded, total }) => {
        const delta = loaded - lastLoaded;
        lastLoaded = loaded;
        sentBytesRef.current += delta;

        if (loaded >= total) {
          sentBytesRef.current = Math.min(totalBytesRef.current, sentBytesRef.current);
        }

        if (totalBytesRef.current > 0) {
          publishSendProgress(Math.min(99, Math.round((sentBytesRef.current / totalBytesRef.current) * 100)));
        }
      });
    }

    publishSendProgress(100, {force: true});
    setSendPhase('completed');
    void loadOfflineHistory({silent: true});
  }

  async function setupSenderPeer(createdSession: TransferSessionResponse, files: File[], bootstrapId: number) {
    const peer = createTransferPeer({
      initiator: true,
      peerOptions: {
        config: {
          iceServers: DEFAULT_TRANSFER_ICE_SERVERS,
        },
      },
      onSignal: (payload) => {
        void postTransferSignal(createdSession.sessionId, 'sender', 'signal', payload);
      },
      onConnect: () => {
        if (bootstrapIdRef.current !== bootstrapId) {
          return;
        }
        setSendPhase((current) => (current === 'transferring' || current === 'completed' ? current : 'connecting'));
        peer.send(createTransferFileManifestMessage(manifestRef.current));
      },
      onData: (payload) => {
        if (typeof payload !== 'string') {
          return;
        }

        const message = parseJsonPayload<{type?: string; fileIds?: string[]}>(payload);
        if (!message || message.type !== 'receive-request' || !Array.isArray(message.fileIds) || sendingStartedRef.current) {
          return;
        }

        const requestedFiles = manifestRef.current.filter((item) => message.fileIds?.includes(item.id));
        if (requestedFiles.length === 0) {
          return;
        }

        sendingStartedRef.current = true;
        totalBytesRef.current = requestedFiles.reduce((sum, file) => sum + file.size, 0);
        sentBytesRef.current = 0;
        publishSendProgress(0, {force: true});
        void sendSelectedFiles(peer, files, requestedFiles, bootstrapId);
      },
      onError: (error) => {
        if (bootstrapIdRef.current !== bootstrapId) {
          return;
        }
        setSendPhase('error');
        setSendError(appendTransferRelayHint(
          error.message || '数据通道建立失败，请重新开始本次快传。',
          TRANSFER_HAS_RELAY_SUPPORT,
        ));
      },
    });
    peerRef.current = peer;
    startSenderPolling(createdSession.sessionId, bootstrapId);
  }

  function startSenderPolling(sessionId: string, bootstrapId: number) {
    let polling = false;

    pollTimerRef.current = window.setInterval(() => {
      if (polling || bootstrapIdRef.current !== bootstrapId) {
        return;
      }

      polling = true;

      void pollTransferSignals(sessionId, 'sender', cursorRef.current)
        .then(async (response) => {
          if (bootstrapIdRef.current !== bootstrapId) {
            return;
          }

          cursorRef.current = response.nextCursor;

          for (const item of response.items) {
            if (item.type === 'peer-joined') {
              setSendPhase((current) => (current === 'waiting' ? 'connecting' : current));
              continue;
            }

            if (item.type === 'signal') {
              peerRef.current?.applyRemoteSignal(item.payload);
            }
          }
        })
        .catch((error) => {
          if (bootstrapIdRef.current !== bootstrapId) {
            return;
          }
          setSendPhase('error');
          setSendError(error instanceof Error ? error.message : '轮询连接状态失败');
        })
        .finally(() => {
          polling = false;
        });
    }, SIGNAL_POLL_INTERVAL_MS);
  }

  async function sendSelectedFiles(
    peer: TransferPeerAdapter,
    files: File[],
    requestedFiles: TransferFileDescriptor[],
    bootstrapId: number,
  ) {
    setSendPhase('transferring');
    const filesById = new Map(files.map((file) => [createTransferFileId(file), file]));
    const chunkSize = resolveTransferChunkSize();

    for (const descriptor of requestedFiles) {
      if (bootstrapIdRef.current !== bootstrapId || !peer.connected) {
        return;
      }

      const file = filesById.get(descriptor.id);
      if (!file) {
        continue;
      }

      peer.send(createTransferFileMetaMessage(descriptor));

      for (let offset = 0; offset < file.size; offset += chunkSize) {
        if (bootstrapIdRef.current !== bootstrapId || !peer.connected) {
          return;
        }

        const chunk = await file.slice(offset, offset + chunkSize).arrayBuffer();
        await peer.write(chunk);
        sentBytesRef.current += chunk.byteLength;

        if (totalBytesRef.current > 0) {
          publishSendProgress(Math.min(
            99,
            Math.round((sentBytesRef.current / totalBytesRef.current) * 100),
          ));
        }
      }

      peer.send(createTransferFileCompleteMessage(descriptor.id));
    }

    peer.send(createTransferCompleteMessage());
    publishSendProgress(100, {force: true});
    setSendPhase('completed');
  }

  async function copyOfflineSessionLink(sessionToCopy: TransferSessionResponse) {
    const sessionShareLink = buildTransferShareUrl(
      window.location.origin,
      sessionToCopy.sessionId,
      getTransferRouterMode(),
    );
    await navigator.clipboard.writeText(sessionShareLink);
    setHistoryCopiedSessionId(sessionToCopy.sessionId);
    if (historyCopiedTimerRef.current) {
      window.clearTimeout(historyCopiedTimerRef.current);
    }
    historyCopiedTimerRef.current = window.setTimeout(() => {
      setHistoryCopiedSessionId((current) => (current === sessionToCopy.sessionId ? null : current));
    }, 1800);
  }

  return (
    <div className="flex-1 py-6 md:py-10">
      <div className="mx-auto w-full max-w-4xl">
        <div className="text-center mb-10">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-[#336EFF] via-blue-500 to-cyan-400 shadow-lg shadow-[#336EFF]/20 mb-6">
            <Send className="w-8 h-8 text-white" />
          </div>
          <h1 className="text-3xl font-bold text-white mb-3">快传</h1>
          <p className="text-slate-400">在线快传走浏览器 P2P 一次性传输，离线快传会把文件存到站点存储里保留 7 天，可被反复接收。</p>
        </div>

        <div className="glass-panel border border-white/10 rounded-3xl overflow-hidden bg-[#0f172a]/80 backdrop-blur-xl shadow-2xl">
          {allowSend ? (
            <div className="flex border-b border-white/10">
              <button
                onClick={() => setActiveTab('send')}
                className={cn(
                  'flex-1 py-5 text-center font-medium transition-colors relative',
                  activeTab === 'send' ? 'text-white' : 'text-slate-400 hover:text-slate-200 hover:bg-white/5',
                )}
              >
                <div className="flex items-center justify-center gap-2">
                  <UploadCloud className="w-5 h-5" />
                  发送文件
                </div>
                {activeTab === 'send' ? (
                  <motion.div layoutId="activeTransferTab" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#336EFF]" />
                ) : null}
              </button>
              <button
                onClick={() => setActiveTab('receive')}
                className={cn(
                  'flex-1 py-5 text-center font-medium transition-colors relative',
                  activeTab === 'receive' ? 'text-white' : 'text-slate-400 hover:text-slate-200 hover:bg-white/5',
                )}
              >
                <div className="flex items-center justify-center gap-2">
                  <DownloadCloud className="w-5 h-5" />
                  接收文件
                </div>
                {activeTab === 'receive' ? (
                  <motion.div layoutId="activeTransferTab" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#336EFF]" />
                ) : null}
              </button>
            </div>
          ) : null}

          <div className="p-8 min-h-[420px] flex flex-col relative min-w-0">
            {authReady && !isAuthenticated ? (
              <div className="mb-6 flex flex-col gap-3 rounded-2xl border border-blue-400/15 bg-blue-500/10 px-4 py-4 text-sm text-blue-100 md:flex-row md:items-center md:justify-between">
                <p className="leading-6">
                  当前无需登录即可在线发送、在线接收和离线接收。只有发离线和把离线文件存入网盘时才需要登录。
                </p>
                <Button
                  type="button"
                  variant="outline"
                  onClick={navigateBackToLogin}
                  className="shrink-0 border border-white/10 bg-white/10 text-white hover:bg-white/15"
                >
                  <LogIn className="mr-2 h-4 w-4" />
                  返回登录
                </Button>
              </div>
            ) : null}

            <AnimatePresence mode="wait">
              {activeTab === 'send' ? (
                <motion.div
                  key="send"
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  exit={{ opacity: 0, x: 20 }}
                  transition={{ duration: 0.2 }}
                  className="flex-1 flex flex-col h-full min-w-0"
                >
                  {availableTransferModes.length > 1 ? (
                    <div className="mb-6 grid gap-3 md:grid-cols-2">
                      {availableTransferModes.map((mode) => {
                        const summary = getTransferModeSummary(mode);
                        const active = transferMode === mode;

                        return (
                          <button
                            key={mode}
                            type="button"
                            onClick={() => setTransferMode(mode)}
                            className={cn(
                              'rounded-2xl border p-4 text-left transition-colors',
                              active
                                ? 'border-blue-400/40 bg-blue-500/10'
                                : 'border-white/10 bg-white/[0.03] hover:bg-white/[0.05]',
                            )}
                          >
                            <div className="flex items-center justify-between gap-3">
                              <p className="text-sm font-semibold text-white">{summary.title}</p>
                              <span className={cn(
                                'rounded-full px-2.5 py-1 text-[11px] font-medium',
                                active ? 'bg-blue-400/15 text-blue-100' : 'bg-white/10 text-slate-300',
                              )}>
                                {mode === 'ONLINE' ? '一次接收' : '7 天多次'}
                              </span>
                            </div>
                            <p className="mt-2 text-sm leading-6 text-slate-400">{summary.description}</p>
                          </button>
                        );
                      })}
                    </div>
                  ) : null}

                  {selectedFiles.length === 0 ? (
                    <div
                      className="flex-1 border-2 border-dashed border-white/10 rounded-2xl flex flex-col items-center justify-center p-10 transition-colors hover:border-[#336EFF]/50 hover:bg-[#336EFF]/5"
                      onDragOver={handleDragOver}
                      onDrop={handleDrop}
                    >
                      <div className="w-20 h-20 rounded-full bg-blue-500/10 flex items-center justify-center mb-6">
                        <UploadCloud className="w-10 h-10 text-[#336EFF]" />
                      </div>
                      <h3 className="text-xl font-medium text-white mb-2">拖拽文件或文件夹到此处</h3>
                      <p className="text-slate-400 mb-8 text-center max-w-md">
                        {transferModeSummary.description}
                      </p>
                      <div className="flex flex-col sm:flex-row items-center gap-4">
                        <Button onClick={() => fileInputRef.current?.click()} className="bg-[#336EFF] hover:bg-blue-600 text-white px-8">
                          <FileIcon className="w-4 h-4 mr-2" />
                          选择文件
                        </Button>
                        <Button
                          onClick={() => folderInputRef.current?.click()}
                          variant="outline"
                          className="border-white/10 hover:bg-white/10 text-slate-300 px-8"
                        >
                          <Folder className="w-4 h-4 mr-2" />
                          选择文件夹
                        </Button>
                      </div>
                    </div>
                  ) : (
                    <div className="flex-1 flex flex-col md:flex-row gap-8">
                      <div className="flex-1 flex flex-col items-center justify-center bg-black/20 rounded-2xl p-8 border border-white/5 relative min-w-0">
                        <button onClick={resetSenderState} className="absolute top-4 right-4 text-slate-500 hover:text-white transition-colors" aria-label="取消发送">
                          <X className="w-5 h-5" />
                        </button>

                        <h3 className="text-slate-400 text-sm font-medium mb-2 uppercase tracking-widest">取件码</h3>
                        <div className="text-5xl md:text-6xl font-bold text-white tracking-[0.2em] mb-8 font-mono">
                          {session?.pickupCode ?? '......'}
                        </div>

                        {qrImageUrl ? (
                          <div className="bg-white p-4 rounded-2xl mb-6 shadow-[0_18px_48px_rgba(15,23,42,0.18)]">
                            <img src={qrImageUrl} alt="快传分享二维码" className="w-44 h-44 rounded-xl" />
                          </div>
                        ) : null}

                        <div className="w-full max-w-xs rounded-2xl border border-white/10 bg-black/30 p-3 mb-4">
                          <div className="flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-slate-500 mb-2">
                            <LinkIcon className="w-3.5 h-3.5" />
                            分享链接
                          </div>
                          <div className="text-sm text-slate-200 font-mono truncate">{shareLink || '会话创建中...'}</div>
                        </div>

                        <Button
                          variant="outline"
                          className="w-full max-w-xs border-white/10 hover:bg-white/10 text-slate-200"
                          onClick={() => void copyToClipboard(shareLink)}
                          disabled={!shareLink}
                        >
                          {copied ? <CheckCircle className="w-4 h-4 mr-2 text-emerald-400" /> : <Copy className="w-4 h-4 mr-2" />}
                          {copied ? '已复制' : '复制链接'}
                        </Button>
                      </div>

                      <div className="flex-1 flex flex-col min-w-0">
                        <div className="flex items-center justify-between mb-4 gap-4">
                          <div>
                            <h3 className="text-lg font-medium text-white">待发送文件</h3>
                            <span className="text-sm text-slate-400">{selectedFiles.length} 个项目 • {formatTransferSize(totalSize)}</span>
                          </div>
                          <Button
                            size="sm"
                            variant="outline"
                            className="h-8 border-white/10 hover:bg-white/10 text-slate-300 px-2 shrink-0"
                            onClick={() => folderInputRef.current?.click()}
                          >
                            <FolderPlus className="w-4 h-4 mr-1" />
                            添加文件夹
                          </Button>
                        </div>

                        <div className="flex-1 overflow-y-auto pr-2 space-y-3 max-h-[300px] mb-4">
                          {selectedFiles.map((file, index) => (
                            <div key={`${file.name}-${index}`} className="flex items-center gap-3 bg-white/5 border border-white/5 rounded-xl p-3 group transition-colors hover:bg-white/10">
                              <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center shrink-0">
                                <FileIcon className="w-5 h-5 text-blue-400" />
                              </div>
                              <div className="flex-1 min-w-0">
                                <p className="text-sm font-medium text-slate-200 truncate">{file.name}</p>
                                <p className="text-xs text-slate-500">{formatTransferSize(file.size)}</p>
                              </div>
                              <button
                                onClick={() => removeFile(index)}
                                className="p-2 text-slate-500 hover:text-red-400 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity"
                                title="移除文件"
                              >
                                <Trash2 className="w-4 h-4" />
                              </button>
                            </div>
                          ))}
                        </div>

                        <button
                          onClick={() => fileInputRef.current?.click()}
                          className="w-full flex items-center justify-center gap-2 py-4 border-2 border-dashed border-white/10 rounded-xl text-slate-400 hover:text-white hover:border-white/30 hover:bg-white/5 transition-colors mb-6 shrink-0"
                        >
                          <Plus className="w-5 h-5" />
                          <span className="font-medium">添加更多文件</span>
                        </button>

                        <div className={cn(
                          'mt-auto rounded-xl p-4 flex items-start gap-4 border',
                          sendPhase === 'error'
                            ? 'bg-rose-500/10 border-rose-500/20'
                            : sendPhase === 'completed'
                              ? 'bg-emerald-500/10 border-emerald-500/20'
                              : 'bg-blue-500/10 border-blue-500/20',
                        )}>
                          {sendPhase === 'completed' ? (
                            <CheckCircle className="w-6 h-6 text-emerald-400 shrink-0" />
                          ) : (
                            <Loader2 className={cn(
                              'w-6 h-6 shrink-0',
                              sendPhase === 'error' ? 'text-rose-400' : 'text-blue-400 animate-spin',
                            )} />
                          )}
                          <div className="min-w-0">
                            <p className={cn(
                              'text-sm font-medium',
                              sendPhase === 'error'
                                ? 'text-rose-300'
                                : sendPhase === 'completed'
                                  ? 'text-emerald-300'
                                  : 'text-blue-300',
                            )}>
                              {getPhaseMessage(transferMode, sendPhase, sendError)}
                            </p>
                            <p className="text-xs text-slate-400 mt-1">
                              发送进度 {sendProgress}%{session ? ` · 会话有效期至 ${new Date(session.expiresAt).toLocaleString('zh-CN', {month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'})}` : ''}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  )}

                  {isAuthenticated ? (
                    <div className="mt-8 rounded-2xl border border-white/10 bg-white/[0.03] p-5">
                      <div className="mb-4 flex items-center justify-between gap-4">
                        <div>
                          <h3 className="text-base font-semibold text-white">我的离线快传</h3>
                          <p className="mt-1 text-sm text-slate-400">
                            这里只保留未过期的离线快传记录，点击即可重新查看取件码和分享链接。
                          </p>
                        </div>
                        <Button
                          type="button"
                          size="sm"
                          variant="outline"
                          onClick={() => void loadOfflineHistory()}
                          className="h-8 shrink-0 border-white/10 bg-transparent px-3 text-slate-300 hover:bg-white/10"
                        >
                          刷新
                        </Button>
                      </div>

                      {offlineHistoryLoading && offlineHistory.length === 0 ? (
                        <div className="rounded-2xl border border-white/5 bg-black/10 px-4 py-10 text-center text-sm text-slate-400">
                          正在加载离线快传记录...
                        </div>
                      ) : offlineHistoryError ? (
                        <div className="rounded-2xl border border-rose-500/20 bg-rose-500/10 px-4 py-4 text-sm text-rose-200">
                          {offlineHistoryError}
                        </div>
                      ) : offlineHistory.length === 0 ? (
                        <div className="rounded-2xl border border-white/5 bg-black/10 px-4 py-10 text-center text-sm text-slate-400">
                          你还没有发过离线快传。
                        </div>
                      ) : (
                        <div className="grid gap-3">
                          {offlineHistory.map((historySession) => {
                            const ready = isOfflineSessionReady(historySession);

                            return (
                              <button
                                key={historySession.sessionId}
                                type="button"
                                onClick={() => setSelectedOfflineSession(historySession)}
                                className="group flex w-full items-center justify-between gap-4 rounded-2xl border border-white/8 bg-black/10 px-4 py-4 text-left transition-colors hover:border-[#336EFF]/30 hover:bg-white/[0.04]"
                              >
                                <div className="min-w-0 flex-1">
                                  <div className="flex items-center gap-3">
                                    <p className="truncate text-sm font-semibold text-white">
                                      {getOfflineTransferSessionLabel(historySession)}
                                    </p>
                                    <span className={cn(
                                      'rounded-full px-2.5 py-1 text-[11px] font-medium',
                                      ready ? 'bg-emerald-500/15 text-emerald-200' : 'bg-amber-500/15 text-amber-100',
                                    )}>
                                      {ready ? '可接收' : '上传中'}
                                    </span>
                                  </div>
                                  <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-slate-400">
                                    <span>取件码 {historySession.pickupCode}</span>
                                    <span>{historySession.files.length} 个项目</span>
                                    <span>{getOfflineTransferSessionSize(historySession)}</span>
                                    <span>
                                      到期于 {new Date(historySession.expiresAt).toLocaleString('zh-CN', {
                                        month: '2-digit',
                                        day: '2-digit',
                                        hour: '2-digit',
                                        minute: '2-digit',
                                      })}
                                    </span>
                                  </div>
                                </div>
                                <ChevronRight className="h-5 w-5 shrink-0 text-slate-500 transition-colors group-hover:text-white" />
                              </button>
                            );
                          })}
                        </div>
                      )}
                    </div>
                  ) : null}

                  <input type="file" multiple className="hidden" ref={fileInputRef} onChange={handleFileSelect} />
                  <input type="file" multiple className="hidden" ref={folderInputRef} onChange={handleFileSelect} />
                </motion.div>
              ) : (
                <motion.div
                  key="receive"
                  initial={{ opacity: 0, x: 20 }}
                  animate={{ opacity: 1, x: 0 }}
                  exit={{ opacity: 0, x: -20 }}
                  transition={{ duration: 0.2 }}
                  className="flex-1 flex flex-col h-full min-w-0 w-full"
                >
                  <TransferReceive embedded />
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
          <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.02] border border-white/5">
            <div className="w-10 h-10 rounded-full bg-blue-500/10 flex items-center justify-center shrink-0">
              <Smartphone className="w-5 h-5 text-blue-400" />
            </div>
            <div>
              <h4 className="text-sm font-medium text-slate-200 mb-1">扫码直达网页</h4>
              <p className="text-xs text-slate-500 leading-relaxed">二维码不承载文件本身，只负责把另一台设备带到公开接收页。</p>
            </div>
          </div>
          <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.02] border border-white/5">
            <div className="w-10 h-10 rounded-full bg-emerald-500/10 flex items-center justify-center shrink-0">
              <Shield className="w-5 h-5 text-emerald-400" />
            </div>
            <div>
              <h4 className="text-sm font-medium text-slate-200 mb-1">浏览器 P2P 传输</h4>
              <p className="text-xs text-slate-500 leading-relaxed">网页之间通过 WebRTC DataChannel 交换文件字节，后端只做信令和会话协调。</p>
            </div>
          </div>
          <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.02] border border-white/5">
            <div className="w-10 h-10 rounded-full bg-cyan-500/10 flex items-center justify-center shrink-0">
              <Monitor className="w-5 h-5 text-cyan-400" />
            </div>
            <div>
              <h4 className="text-sm font-medium text-slate-200 mb-1">在线一次性，离线可重复</h4>
              <p className="text-xs text-slate-500 leading-relaxed">在线模式适合临时快传，离线模式会保留 7 天，接收后文件也不会立刻消失。</p>
            </div>
          </div>
        </div>
      </div>

      <AnimatePresence>
        {selectedOfflineSession ? (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[70] flex items-center justify-center bg-[#020817]/75 px-4 py-6 backdrop-blur-md"
          >
            <motion.div
              initial={{ opacity: 0, scale: 0.96, y: 16 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.96, y: 16 }}
              transition={{ duration: 0.18 }}
              className="relative w-full max-w-[34rem] overflow-hidden rounded-[2rem] border border-white/10 bg-[#0d1528]/95 p-8 shadow-[0_30px_120px_rgba(0,0,0,0.45)]"
            >
              <button
                type="button"
                onClick={() => setSelectedOfflineSession(null)}
                className="absolute right-5 top-5 rounded-full p-2 text-slate-500 transition-colors hover:bg-white/5 hover:text-white"
                aria-label="关闭离线快传详情"
              >
                <X className="h-7 w-7" />
              </button>

              <div className="text-center">
                <p className="text-sm tracking-[0.3em] text-slate-400">取件码</p>
                <div className="mt-5 font-mono text-[4.5rem] font-bold leading-none tracking-[0.32em] text-white">
                  {selectedOfflineSession.pickupCode}
                </div>
              </div>

              {selectedOfflineSessionQrImageUrl ? (
                <div className="mx-auto mt-10 w-fit rounded-[2rem] bg-white p-5 shadow-[0_18px_60px_rgba(15,23,42,0.32)]">
                  <img
                    src={selectedOfflineSessionQrImageUrl}
                    alt="离线快传二维码"
                    className="h-64 w-64 rounded-2xl"
                  />
                </div>
              ) : null}

              <div className="mt-8 rounded-[1.7rem] border border-white/10 bg-[#0a1122] px-5 py-4">
                <div className="mb-3 flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-slate-500">
                  <LinkIcon className="h-4 w-4" />
                  分享链接
                </div>
                <div className="truncate text-[1.05rem] text-slate-100">
                  {selectedOfflineSessionShareLink}
                </div>
              </div>

              <Button
                type="button"
                variant="outline"
                className="mt-5 h-16 w-full rounded-[1.35rem] border-white/10 bg-transparent text-xl text-white hover:bg-white/5"
                onClick={() => void copyOfflineSessionLink(selectedOfflineSession)}
              >
                <Copy className="mr-3 h-6 w-6" />
                {historyCopiedSessionId === selectedOfflineSession.sessionId ? '已复制链接' : '复制链接'}
              </Button>

              <div className="mt-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-slate-400">
                <span>{getOfflineTransferSessionLabel(selectedOfflineSession)}</span>
                <span>{selectedOfflineSession.files.length} 个项目</span>
                <span>{getOfflineTransferSessionSize(selectedOfflineSession)}</span>
                <span className={cn(
                  isOfflineSessionReady(selectedOfflineSession) ? 'text-emerald-300' : 'text-amber-200',
                )}>
                  {isOfflineSessionReady(selectedOfflineSession) ? '文件已就绪，可重复接收' : '文件仍在上传中'}
                </span>
              </div>

              <div className="mt-3 flex items-center gap-2 text-sm text-slate-500">
                <Clock3 className="h-4 w-4" />
                有效期至 {new Date(selectedOfflineSession.expiresAt).toLocaleString('zh-CN', {
                  year: 'numeric',
                  month: '2-digit',
                  day: '2-digit',
                  hour: '2-digit',
                  minute: '2-digit',
                })}
              </div>
            </motion.div>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  );
}