"use client";

import { useEffect, useMemo, useState, type ReactNode } from "react";
import { Link, useLocale, useTranslation } from "@/i18n/navigation";
import { apiFetch } from "@/app/lib/api-client";
import {
  buildMeetupChatUrl,
  buildMiroTalkJoinUrl,
  DEFAULT_ONLINE_FEATURES,
  featureLabels,
  getLoungeServerLabel,
  getMiroTalkServerLabel,
  MIROTALK_PROVIDER_LABEL,
  type MeetupAccessLevel,
  type MeetupMode,
  WEB_CHAT_PROVIDER_LABEL,
} from "@/app/lib/meetups";
import { mediaUrl } from "@/app/lib/media";
import { avatarForIndex } from "@/app/data/avatars";

interface Attendee {
  name: string;
  photo: string;
}

interface Meetup {
  id: string;
  city: string;
  emoji: string;
  date: string;
  time: string;
  venue: string;
  address: string;
  description: string;
  rsvpCount: number;
  gradientFrom: string;
  gradientTo: string;
  attendees: Attendee[];
  isUpcoming: boolean;
  mode: MeetupMode;
  accessLevel: MeetupAccessLevel;
  meetingProvider: string;
  mirotalkRoom: string;
  meetingUrl: string;
  replayUrl: string;
  features: string[];
  maxAttendees: number;
  organizer: string;
}

interface ViewerUser {
  id?: string;
  email?: string;
  name?: string;
  vip?: boolean;
  role?: string;
  [key: string]: unknown;
}

interface ViewerState {
  loaded: boolean;
  user: ViewerUser | null;
  vip: boolean;
}

type ModeFilter = "all" | MeetupMode;

const allMeetups: Meetup[] = [
  {
    id: "online-1",
    city: "线上",
    emoji: "💻",
    date: "2026-07-09",
    time: "20:00",
    venue: "MiroTalk 多人视频房",
    address: "线上活动 · 自动生成入会链接",
    description: "围绕远程工作的节奏、异地协作和旅居规划做一场开放圆桌，适合刚加入社区的新成员。",
    rsvpCount: 36,
    gradientFrom: "#0f766e",
    gradientTo: "#2563eb",
    attendees: [{ name: "林晓", photo: avatarForIndex(0) }, { name: "张明", photo: avatarForIndex(4) }, { name: "陈静", photo: avatarForIndex(2) }],
    isUpcoming: true,
    mode: "online",
    accessLevel: "members",
    meetingProvider: "mirotalk",
    mirotalkRoom: "nomadcna-remote-work-open-office",
    meetingUrl: "",
    replayUrl: "",
    features: DEFAULT_ONLINE_FEATURES,
    maxAttendees: 80,
    organizer: "NomadCNA",
  },
  {
    id: "1",
    city: "大理",
    emoji: "🏯",
    date: "2026-07-15",
    time: "14:00",
    venue: "大理古城人民路咖啡馆",
    address: "大理市大理古城人民路中段",
    description: "苍山脚下，洱海边，与大理的慢生活游民们一起喝咖啡、晒太阳、聊人生。",
    rsvpCount: 12,
    gradientFrom: "#3b82f6",
    gradientTo: "#4f46e5",
    attendees: [{ name: "林晓", photo: avatarForIndex(0) }, { name: "张明", photo: avatarForIndex(4) }, { name: "陈静", photo: avatarForIndex(2) }],
    isUpcoming: true,
    mode: "hybrid",
    accessLevel: "vip",
    meetingProvider: "mirotalk",
    mirotalkRoom: "nomadcna-dali-slow-life-roundtable",
    meetingUrl: "",
    replayUrl: "",
    features: ["group_video", "screen_share", "whiteboard", "recording", "host_controls"],
    maxAttendees: 32,
    organizer: "大理城市主理人",
  },
  {
    id: "2",
    city: "成都",
    emoji: "🐼",
    date: "2026-07-18",
    time: "19:00",
    venue: "方所书店",
    address: "成都市锦江区中纱帽街8号远洋太古里",
    description: "天府之国游民聚会，在文艺书店里品茶聊天，探讨成都的慢生活与远程工作可能性。",
    rsvpCount: 9,
    gradientFrom: "#22c55e",
    gradientTo: "#10b981",
    attendees: [{ name: "杨帆", photo: avatarForIndex(28) }, { name: "赵磊", photo: avatarForIndex(10) }],
    isUpcoming: true,
    mode: "offline",
    accessLevel: "public",
    meetingProvider: "",
    mirotalkRoom: "",
    meetingUrl: "",
    replayUrl: "",
    features: [],
    maxAttendees: 20,
    organizer: "成都游民小组",
  },
  {
    id: "3",
    city: "深圳",
    emoji: "🌃",
    date: "2026-07-20",
    time: "19:30",
    venue: "WeWork 卓越前海壹号",
    address: "深圳市南山区前海深港合作区卓越前海壹号",
    description: "深圳数字游民线下见面会，探讨创业、远程工作与湾区发展机遇。",
    rsvpCount: 15,
    gradientFrom: "#ff4d4f",
    gradientTo: "#ff7a45",
    attendees: [{ name: "李娜", photo: avatarForIndex(12) }, { name: "王强", photo: avatarForIndex(18) }, { name: "刘洋", photo: avatarForIndex(30) }],
    isUpcoming: true,
    mode: "hybrid",
    accessLevel: "members",
    meetingProvider: "mirotalk",
    mirotalkRoom: "nomadcna-shenzhen-maker-night",
    meetingUrl: "",
    replayUrl: "",
    features: ["group_video", "screen_share", "breakout", "host_controls"],
    maxAttendees: 48,
    organizer: "深圳湾区主理人",
  },
  {
    id: "online-2",
    city: "亚太",
    emoji: "🌐",
    date: "2026-07-24",
    time: "21:00",
    venue: "MiroTalk 公开直播间",
    address: "线上活动 · 亚洲时区友好",
    description: "跨城市远程工作者分享工具栈、客户沟通和时区协作经验，公开旁听，登录成员可参与发言。",
    rsvpCount: 54,
    gradientFrom: "#7c3aed",
    gradientTo: "#0d9488",
    attendees: [{ name: "许婷", photo: avatarForIndex(6) }, { name: "马超", photo: avatarForIndex(17) }, { name: "罗敏", photo: avatarForIndex(15) }],
    isUpcoming: true,
    mode: "online",
    accessLevel: "public",
    meetingProvider: "mirotalk",
    mirotalkRoom: "nomadcna-asia-remote-stack",
    meetingUrl: "",
    replayUrl: "",
    features: ["group_video", "screen_share", "whiteboard"],
    maxAttendees: 120,
    organizer: "NomadCNA",
  },
  {
    id: "5",
    city: "杭州",
    emoji: "⛲",
    date: "2026-07-25",
    time: "18:00",
    venue: "梦想小镇·良仓咖啡",
    address: "杭州市余杭区梦想小镇互联网村",
    description: "西湖畔数字游民聚会，在创业氛围浓厚的梦想小镇交流产品与运营经验。",
    rsvpCount: 11,
    gradientFrom: "#06b6d4",
    gradientTo: "#0d9488",
    attendees: [{ name: "周杰", photo: avatarForIndex(10) }, { name: "吴芳", photo: avatarForIndex(24) }],
    isUpcoming: true,
    mode: "offline",
    accessLevel: "public",
    meetingProvider: "",
    mirotalkRoom: "",
    meetingUrl: "",
    replayUrl: "",
    features: [],
    maxAttendees: 24,
    organizer: "杭州产品游民",
  },
  {
    id: "6",
    city: "厦门",
    emoji: "🌊",
    date: "2026-07-28",
    time: "15:00",
    venue: "鼓浪屿海角8号咖啡馆",
    address: "厦门市思明区鼓浪屿龙头路",
    description: "海岛慢生活聚会，在鼓浪屿的文艺咖啡馆里结识热爱海边远程工作的游民朋友。",
    rsvpCount: 7,
    gradientFrom: "#0ea5e9",
    gradientTo: "#0284c7",
    attendees: [{ name: "赵磊", photo: avatarForIndex(10) }, { name: "黄薇", photo: avatarForIndex(22) }],
    isUpcoming: true,
    mode: "offline",
    accessLevel: "public",
    meetingProvider: "",
    mirotalkRoom: "",
    meetingUrl: "",
    replayUrl: "",
    features: [],
    maxAttendees: 18,
    organizer: "厦门海岛游民",
  },
  {
    id: "7",
    city: "北京",
    emoji: "🏛️",
    date: "2026-07-30",
    time: "19:00",
    venue: "氪空间 望京SOHO",
    address: "北京市朝阳区望京街10号望京SOHO T3",
    description: "首都数字游民聚会，在望京科技圈交流北漂远程工作与创业故事。",
    rsvpCount: 14,
    gradientFrom: "#6366f1",
    gradientTo: "#4f46e5",
    attendees: [{ name: "陈思", photo: avatarForIndex(15) }, { name: "郑凯", photo: avatarForIndex(29) }],
    isUpcoming: true,
    mode: "hybrid",
    accessLevel: "hosts",
    meetingProvider: "mirotalk",
    mirotalkRoom: "nomadcna-beijing-host-lab",
    meetingUrl: "",
    replayUrl: "",
    features: ["group_video", "recording", "host_controls"],
    maxAttendees: 26,
    organizer: "北京活动主持组",
  },
  {
    id: "10",
    city: "南京",
    emoji: "🍃",
    date: "2026-05-05",
    time: "19:00",
    venue: "先锋书店 五台山店",
    address: "南京市鼓楼区广州路173号五台山体育馆地下",
    description: "金陵数字游民聚会，在南京最具文艺气息的书店里交流古都文化与远程工作。",
    rsvpCount: 6,
    gradientFrom: "#84cc16",
    gradientTo: "#65a30d",
    attendees: [{ name: "杨帆", photo: avatarForIndex(28) }],
    isUpcoming: false,
    mode: "offline",
    accessLevel: "public",
    meetingProvider: "",
    mirotalkRoom: "",
    meetingUrl: "",
    replayUrl: "",
    features: [],
    maxAttendees: 18,
    organizer: "南京游民小组",
  },
  {
    id: "11",
    city: "重庆",
    emoji: "🌶️",
    date: "2026-05-12",
    time: "18:30",
    venue: "洪崖洞观景咖啡馆",
    address: "重庆市渝中区嘉滨路88号洪崖洞",
    description: "山城数字游民聚会，在魔幻8D城市里结识热爱火锅与远程工作的游民朋友。",
    rsvpCount: 10,
    gradientFrom: "#dc2626",
    gradientTo: "#b91c1c",
    attendees: [{ name: "黄薇", photo: avatarForIndex(22) }, { name: "孙浩", photo: avatarForIndex(18) }],
    isUpcoming: false,
    mode: "hybrid",
    accessLevel: "members",
    meetingProvider: "mirotalk",
    mirotalkRoom: "nomadcna-chongqing-recap",
    meetingUrl: "",
    replayUrl: "",
    features: ["group_video", "recording"],
    maxAttendees: 30,
    organizer: "重庆游民小组",
  },
];

const weekdays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

const copy = {
  zh: {
    center: "活动中心",
    onlineReady: "线上活动已接入 MiroTalk P2P 视频房",
    dataPolicy: "使用自建 MiroTalk 作为 WebRTC 信令/中继入口，按用户身份展示报名数据、视频入口、回放和主持人控场能力。",
    onlineStats: "线上 / 混合",
    mirotalkStats: "P2P 房间",
    permissionStats: "权限层级",
    allModes: "全部",
    offline: "线下",
    online: "线上",
    hybrid: "混合",
    people: "人报名",
    max: "上限",
    details: "查看详情",
    joinRoom: "进入视频房",
    joinChat: "进入群聊",
    embedRoom: "在当前页打开",
    closeEmbed: "收起房间",
    loginRequired: "登录成员可进入",
    vipRequired: "VIP 专属活动",
    hostRequired: "主持人权限",
    publicAccess: "公开",
    membersAccess: "登录成员",
    vipAccess: "VIP",
    hostsAccess: "主持人",
    organizer: "主办方",
    featureTitle: "活动功能",
    permissionTitle: "数据与权限",
    visiblePublic: "公开：时间、城市、主题、报名数",
    visibleMember: "登录成员：参会名单、线上房间、活动提醒",
    visibleVip: "VIP：回放、资料和专属圆桌",
    visibleHost: "主持人：房间管理、录制和权限配置",
    room: "房间",
    provider: "视频服务",
    chatService: "Web 群聊",
    chatServer: "群聊入口",
    relayServer: "信令/中继",
    noAccess: "当前身份不能进入该视频房",
    countPrefix: "共",
    upcomingCountSuffix: "场即将举办的活动",
    previousCountSuffix: "场往期活动",
    emptyUpcoming: "暂无即将举办的活动",
    emptyPrevious: "暂无往期活动记录",
    authPublicHint: "公开活动可直接打开，登录后会使用你的社区身份进入房间。",
    chatHint: "群聊默认进入 #nomadcna 与 #online-events。",
  },
  en: {
    center: "Events Center",
    onlineReady: "Online events now support MiroTalk P2P rooms",
    dataPolicy: "Self-hosted MiroTalk provides the WebRTC signaling/relay entry while user identity controls attendee data, video access, replays, and host controls.",
    onlineStats: "Online / hybrid",
    mirotalkStats: "P2P rooms",
    permissionStats: "Access tiers",
    allModes: "All",
    offline: "Offline",
    online: "Online",
    hybrid: "Hybrid",
    people: "RSVPs",
    max: "Limit",
    details: "Details",
    joinRoom: "Join video room",
    joinChat: "Join group chat",
    embedRoom: "Open inline",
    closeEmbed: "Hide room",
    loginRequired: "Members only",
    vipRequired: "VIP only",
    hostRequired: "Hosts only",
    publicAccess: "Public",
    membersAccess: "Members",
    vipAccess: "VIP",
    hostsAccess: "Hosts",
    organizer: "Organizer",
    featureTitle: "Event features",
    permissionTitle: "Data & permissions",
    visiblePublic: "Public: time, city, topic, RSVP count",
    visibleMember: "Members: attendee list, online room, event reminders",
    visibleVip: "VIP: replays, resources, private roundtables",
    visibleHost: "Hosts: room management, recording, access rules",
    room: "Room",
    provider: "Video service",
    chatService: "Web group chat",
    chatServer: "Chat entry",
    relayServer: "Signaling / relay",
    noAccess: "Your current role cannot enter this video room",
    countPrefix: "",
    upcomingCountSuffix: "upcoming events",
    previousCountSuffix: "past events",
    emptyUpcoming: "No upcoming events yet",
    emptyPrevious: "No past events yet",
    authPublicHint: "Public events open directly. After login, your community identity is used in the room.",
    chatHint: "Chat opens with #nomadcna and #online-events by default.",
  },
};

function getCopy(locale: string) {
  return locale === "zh" ? copy.zh : copy.en;
}

function formatMeetupDate(dateStr: string, time: string): string {
  const normalizedDate = dateStr.includes("T") || dateStr.includes(" ")
    ? dateStr.slice(0, 10)
    : dateStr;
  const d = new Date(normalizedDate + "T" + time);
  if (Number.isNaN(d.getTime())) return `${normalizedDate} ${time.slice(0, 5)}`;
  const weekday = weekdays[d.getDay()];
  const year = d.getFullYear();
  const month = d.getMonth() + 1;
  const day = d.getDate();
  const timeFormatted = time.slice(0, 5);
  return `${weekday}, ${year}年${month}月${day}日, ${timeFormatted}`;
}

function toMeetupMode(value: unknown): MeetupMode {
  return value === "online" || value === "hybrid" || value === "offline" ? value : "offline";
}

function toAccessLevel(value: unknown): MeetupAccessLevel {
  return value === "members" || value === "vip" || value === "hosts" || value === "public" ? value : "public";
}

function mapMeetup(item: Partial<Meetup> & { id: string; status?: string }): Meetup {
  const mode = toMeetupMode(item.mode || (item.meetingUrl || item.mirotalkRoom ? "online" : "offline"));
  return {
    id: item.id,
    city: item.city || (mode === "online" ? "线上" : "同城"),
    emoji: item.emoji || (mode === "online" ? "💻" : "📍"),
    date: item.date || new Date().toISOString().slice(0, 10),
    time: item.time || "19:00",
    venue: item.venue || (mode === "online" ? "MiroTalk 视频房" : "待定地点"),
    address: item.address || (mode === "online" ? "线上活动" : "活动地址确认中"),
    description: item.description || "数字游民交流活动。",
    rsvpCount: Number(item.rsvpCount || 0),
    gradientFrom: item.gradientFrom || (mode === "online" ? "#0f766e" : "#ff4d4f"),
    gradientTo: item.gradientTo || (mode === "online" ? "#2563eb" : "#ff7a45"),
    attendees: Array.isArray(item.attendees) ? item.attendees : [],
    isUpcoming: Boolean(item.isUpcoming ?? true),
    mode,
    accessLevel: toAccessLevel(item.accessLevel),
    meetingProvider: item.meetingProvider || (mode === "offline" ? "" : "mirotalk"),
    mirotalkRoom: item.mirotalkRoom || "",
    meetingUrl: item.meetingUrl || "",
    replayUrl: item.replayUrl || "",
    features: Array.isArray(item.features) ? item.features.map(String) : mode === "offline" ? [] : DEFAULT_ONLINE_FEATURES,
    maxAttendees: Number(item.maxAttendees || 0),
    organizer: item.organizer || "NomadCNA",
  };
}

function modeLabel(mode: MeetupMode, locale: string) {
  const c = getCopy(locale);
  return mode === "online" ? c.online : mode === "hybrid" ? c.hybrid : c.offline;
}

function accessLabel(accessLevel: MeetupAccessLevel, locale: string) {
  const c = getCopy(locale);
  return {
    public: c.publicAccess,
    members: c.membersAccess,
    vip: c.vipAccess,
    hosts: c.hostsAccess,
  }[accessLevel];
}

function viewerDisplayName(viewer: ViewerState): string {
  const name = String(viewer.user?.name || "").trim();
  if (name) return name;
  const email = String(viewer.user?.email || "").trim();
  return email ? email.split("@")[0] : "NomadCNA";
}

function isHostViewer(viewer: ViewerState): boolean {
  const role = String(viewer.user?.role || viewer.user?.["memberRole"] || viewer.user?.["siteRole"] || "").toLowerCase();
  return ["admin", "owner", "host", "organizer", "moderator"].includes(role);
}

function canAccessMeetup(meetup: Meetup, viewer: ViewerState): boolean {
  if (meetup.accessLevel === "public") return true;
  if (meetup.accessLevel === "members") return Boolean(viewer.user);
  if (meetup.accessLevel === "vip") return Boolean(viewer.vip || viewer.user?.vip);
  return isHostViewer(viewer);
}

function lockedReason(meetup: Meetup, locale: string) {
  const c = getCopy(locale);
  if (meetup.accessLevel === "members") return c.loginRequired;
  if (meetup.accessLevel === "vip") return c.vipRequired;
  if (meetup.accessLevel === "hosts") return c.hostRequired;
  return c.noAccess;
}

function Badge({ children, tone = "gray" }: { children: ReactNode; tone?: "gray" | "red" | "green" | "blue" | "purple" }) {
  const toneClass = {
    gray: "border-gray-200 bg-gray-50 text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
    red: "border-red-200 bg-red-50 text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-300",
    green: "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-300",
    blue: "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900/60 dark:bg-blue-950/40 dark:text-blue-300",
    purple: "border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-900/60 dark:bg-violet-950/40 dark:text-violet-300",
  }[tone];
  return (
    <span className={`inline-flex min-h-7 items-center rounded-full border px-2.5 py-1 text-xs font-semibold ${toneClass}`}>
      {children}
    </span>
  );
}

function MeetupCard({ meetup, locale, viewer, onSelect }: { meetup: Meetup; locale: string; viewer: ViewerState; onSelect: (meetup: Meetup) => void }) {
  const c = getCopy(locale);
  const formattedDate = formatMeetupDate(meetup.date, meetup.time);
  const canJoin = canAccessMeetup(meetup, viewer);
  const modeTone = meetup.mode === "online" ? "green" : meetup.mode === "hybrid" ? "blue" : "gray";
  const accessTone = meetup.accessLevel === "vip" ? "purple" : meetup.accessLevel === "hosts" ? "red" : meetup.accessLevel === "members" ? "blue" : "gray";
  return (
    <article className="group flex h-full flex-col overflow-hidden rounded-2xl bg-white shadow-[0_2px_8px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.03)] transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_12px_28px_rgba(0,0,0,0.12),0_0_0_1px_rgba(0,0,0,0.05)] dark:bg-gray-900 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2),0_0_0_1px_rgba(255,255,255,0.05)]">
      <div className="flex h-28 flex-col justify-between p-4 text-white" style={{ background: `linear-gradient(135deg, ${meetup.gradientFrom}, ${meetup.gradientTo})` }}>
        <div className="flex flex-wrap gap-2">
          <span className="rounded-full bg-white/18 px-2.5 py-1 text-xs font-semibold backdrop-blur">{modeLabel(meetup.mode, locale)}</span>
          {meetup.meetingProvider === "mirotalk" && <span className="rounded-full bg-white/18 px-2.5 py-1 text-xs font-semibold backdrop-blur">MiroTalk</span>}
        </div>
        <p className="text-xs font-medium text-white/90 sm:text-sm">{formattedDate}</p>
      </div>
      <div className="flex flex-1 flex-col p-4 sm:p-5">
        <div className="mb-3 flex items-start justify-between gap-3">
          <h3 className="min-w-0 text-xl font-bold text-gray-900 dark:text-gray-100 sm:text-2xl">
            <span className="mr-1">{meetup.emoji}</span>
            {meetup.city}
          </h3>
          <span className="shrink-0 rounded-full bg-[#ff4d4f] px-2.5 py-1 text-xs font-semibold text-white">{meetup.rsvpCount} {c.people}</span>
        </div>

        <div className="mb-3 flex flex-wrap gap-2">
          <Badge tone={modeTone}>{modeLabel(meetup.mode, locale)}</Badge>
          <Badge tone={accessTone}>{accessLabel(meetup.accessLevel, locale)}</Badge>
          {!!meetup.maxAttendees && <Badge>{c.max} {meetup.maxAttendees}</Badge>}
        </div>

        <p className="mb-0.5 text-sm font-medium text-gray-600 dark:text-gray-400">@ {meetup.venue}</p>
        <p className="mb-3 text-xs text-gray-500 dark:text-gray-500">{meetup.address}</p>
        <p className="mb-3 line-clamp-2 flex-1 text-sm text-gray-600 dark:text-gray-400">{meetup.description}</p>

        {meetup.features.length > 0 && (
          <div className="mb-4 flex flex-wrap gap-1.5">
            {featureLabels(meetup.features, locale).slice(0, 3).map((feature) => (
              <span key={feature} className="rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-300">{feature}</span>
            ))}
          </div>
        )}

        <button
          type="button"
          onClick={() => onSelect(meetup)}
          className="mb-4 inline-flex w-fit cursor-pointer items-center gap-1 text-left text-sm font-semibold text-[#ff4d4f] transition-colors hover:text-[#ff7a45] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ff4d4f]/40"
        >
          {meetup.mode === "offline" ? c.details : canJoin ? c.joinRoom : lockedReason(meetup, locale)}
          <span aria-hidden>→</span>
        </button>

        <div className="mt-auto flex items-center gap-1 border-t border-gray-100 pt-4 dark:border-gray-700">
          <div className="flex -space-x-2">
            {meetup.attendees.map((a, index) => (
              <img key={`${a.name}-${index}`} src={mediaUrl(a.photo)} alt={a.name} className="h-7 w-7 rounded-full border-2 border-white object-cover shadow-sm dark:border-gray-800 sm:h-8 sm:w-8" title={a.name} />
            ))}
          </div>
          <span className="ml-1 text-xs text-gray-400 dark:text-gray-500">{locale === "zh" ? "已报名成员" : "attendees"}</span>
        </div>
      </div>
    </article>
  );
}

function MeetupDetailModal({ meetup, locale, viewer, onClose }: { meetup: Meetup; locale: string; viewer: ViewerState; onClose: () => void }) {
  const c = getCopy(locale);
  const [embedOpen, setEmbedOpen] = useState(false);
  const canJoin = canAccessMeetup(meetup, viewer);
  const joinUrl = buildMiroTalkJoinUrl(meetup, viewerDisplayName(viewer));
  const chatUrl = buildMeetupChatUrl();
  const mirotalkServer = getMiroTalkServerLabel();
  const loungeServer = getLoungeServerLabel();
  const isVideoEvent = meetup.mode !== "offline";

  return (
    <div className="fixed inset-0 z-[9999] overflow-y-auto">
      <button type="button" className="fixed inset-0 cursor-default bg-black/55 backdrop-blur-sm" onClick={onClose} aria-label={locale === "zh" ? "关闭活动详情" : "Close event details"} />
      <div className="relative mx-auto flex min-h-svh w-full max-w-4xl items-center px-3 py-6 sm:px-6">
        <section className="relative w-full overflow-hidden rounded-2xl bg-white shadow-2xl dark:bg-gray-900 dark:ring-1 dark:ring-gray-800">
          <div className="p-5 text-white sm:p-7" style={{ background: `linear-gradient(135deg, ${meetup.gradientFrom}, ${meetup.gradientTo})` }}>
            <button
              type="button"
              onClick={onClose}
              className="absolute right-4 top-4 inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-white/15 text-white transition hover:bg-white/25 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
              aria-label={locale === "zh" ? "关闭" : "Close"}
            >
              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
              </svg>
            </button>
            <div className="flex flex-wrap gap-2 pr-12">
              <span className="rounded-full bg-white/18 px-2.5 py-1 text-xs font-semibold backdrop-blur">{modeLabel(meetup.mode, locale)}</span>
              <span className="rounded-full bg-white/18 px-2.5 py-1 text-xs font-semibold backdrop-blur">{accessLabel(meetup.accessLevel, locale)}</span>
              {meetup.meetingProvider === "mirotalk" && <span className="rounded-full bg-white/18 px-2.5 py-1 text-xs font-semibold backdrop-blur">{MIROTALK_PROVIDER_LABEL}</span>}
            </div>
            <h2 className="mt-5 text-2xl font-bold sm:text-3xl">{meetup.emoji} {meetup.city} · {meetup.venue}</h2>
            <p className="mt-2 max-w-2xl text-sm leading-6 text-white/88">{meetup.description}</p>
          </div>

          <div className="grid gap-5 p-5 sm:p-7 lg:grid-cols-[1.1fr_0.9fr]">
            <div className="space-y-5">
              <div className="grid gap-3 sm:grid-cols-2">
                <div className="rounded-xl border border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-950">
                  <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">{locale === "zh" ? "时间" : "Time"}</p>
                  <p className="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">{formatMeetupDate(meetup.date, meetup.time)}</p>
                </div>
                <div className="rounded-xl border border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-950">
                  <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">{c.organizer}</p>
                  <p className="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">{meetup.organizer}</p>
                </div>
              </div>

              <div className="rounded-xl border border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-950">
                <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">{locale === "zh" ? "地点" : "Location"}</p>
                <p className="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">{meetup.venue}</p>
                <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{meetup.address}</p>
              </div>

              {isVideoEvent && (
                <div className="rounded-xl border border-emerald-100 bg-emerald-50/70 p-4 dark:border-emerald-900/50 dark:bg-emerald-950/30">
                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                    <div>
                      <p className="text-xs font-semibold uppercase tracking-wide text-emerald-700 dark:text-emerald-300">{c.provider}</p>
                      <p className="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">{MIROTALK_PROVIDER_LABEL}</p>
                      <p className="mt-1 break-all text-xs text-gray-500 dark:text-gray-400">{c.room}: {meetup.mirotalkRoom || meetup.id}</p>
                      <p className="mt-1 break-all text-xs text-gray-500 dark:text-gray-400">{c.relayServer}: {mirotalkServer}</p>
                      <p className="mt-2 text-xs font-semibold uppercase tracking-wide text-emerald-700 dark:text-emerald-300">{c.chatService}</p>
                      <p className="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">{WEB_CHAT_PROVIDER_LABEL}</p>
                      <p className="mt-1 break-all text-xs text-gray-500 dark:text-gray-400">{c.chatServer}: {loungeServer}</p>
                    </div>
                    {canJoin ? (
                      <div className="flex flex-wrap gap-2">
                        <a
                          href={joinUrl}
                          target="_blank"
                          rel="noreferrer"
                          className="inline-flex min-h-10 cursor-pointer items-center justify-center rounded-lg bg-[#ff4d4f] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#ff7a45] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ff4d4f]/40"
                        >
                          {c.joinRoom}
                        </a>
                        <a
                          href={chatUrl}
                          target="_blank"
                          rel="noreferrer"
                          className="inline-flex min-h-10 cursor-pointer items-center justify-center rounded-lg border border-emerald-200 bg-white px-4 py-2 text-sm font-semibold text-emerald-700 transition hover:bg-emerald-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 dark:border-emerald-800 dark:bg-gray-900 dark:text-emerald-300 dark:hover:bg-emerald-950/50"
                        >
                          {c.joinChat}
                        </a>
                        <button
                          type="button"
                          onClick={() => setEmbedOpen((open) => !open)}
                          className="inline-flex min-h-10 cursor-pointer items-center justify-center rounded-lg border border-emerald-200 bg-white px-4 py-2 text-sm font-semibold text-emerald-700 transition hover:bg-emerald-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 dark:border-emerald-800 dark:bg-gray-900 dark:text-emerald-300 dark:hover:bg-emerald-950/50"
                        >
                          {embedOpen ? c.closeEmbed : c.embedRoom}
                        </button>
                      </div>
                    ) : (
                      <p className="rounded-lg border border-red-200 bg-white px-3 py-2 text-sm font-semibold text-red-600 dark:border-red-900/60 dark:bg-gray-900 dark:text-red-300">{lockedReason(meetup, locale)}</p>
                    )}
                  </div>
                  {canJoin && meetup.accessLevel === "public" && (
                    <p className="mt-3 text-xs text-emerald-700 dark:text-emerald-300">{c.authPublicHint}</p>
                  )}
                  {canJoin && (
                    <p className="mt-2 text-xs text-emerald-700 dark:text-emerald-300">{c.chatHint}</p>
                  )}
                  {embedOpen && canJoin && (
                    <iframe
                      title={`MiroTalk ${meetup.city}`}
                      src={joinUrl}
                      className="mt-4 h-[360px] w-full rounded-xl border border-emerald-200 bg-black dark:border-emerald-900 sm:h-[460px]"
                      allow="camera; microphone; display-capture; fullscreen; clipboard-read; clipboard-write"
                      referrerPolicy="no-referrer-when-downgrade"
                    />
                  )}
                </div>
              )}
            </div>

            <aside className="space-y-5">
              <div className="rounded-xl border border-gray-100 p-4 dark:border-gray-800">
                <h3 className="text-sm font-bold text-gray-900 dark:text-gray-100">{c.featureTitle}</h3>
                <div className="mt-3 flex flex-wrap gap-2">
                  {(featureLabels(meetup.features, locale).length ? featureLabels(meetup.features, locale) : [modeLabel(meetup.mode, locale)]).map((feature) => (
                    <Badge key={feature} tone={meetup.mode === "offline" ? "gray" : "green"}>{feature}</Badge>
                  ))}
                </div>
              </div>

              <div className="rounded-xl border border-gray-100 p-4 dark:border-gray-800">
                <h3 className="text-sm font-bold text-gray-900 dark:text-gray-100">{c.permissionTitle}</h3>
                <div className="mt-3 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                  <p>{c.visiblePublic}</p>
                  <p>{c.visibleMember}</p>
                  <p>{c.visibleVip}</p>
                  <p>{c.visibleHost}</p>
                </div>
              </div>

              <div className="rounded-xl border border-gray-100 p-4 dark:border-gray-800">
                <div className="flex items-center justify-between gap-3">
                  <span className="text-sm text-gray-500 dark:text-gray-400">{locale === "zh" ? "当前权限" : "Your access"}</span>
                  <Badge tone={canJoin ? "green" : "red"}>{canJoin ? accessLabel(meetup.accessLevel, locale) : lockedReason(meetup, locale)}</Badge>
                </div>
                <div className="mt-3 flex items-center justify-between gap-3">
                  <span className="text-sm text-gray-500 dark:text-gray-400">{locale === "zh" ? "报名人数" : "RSVPs"}</span>
                  <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">{meetup.rsvpCount}{meetup.maxAttendees ? ` / ${meetup.maxAttendees}` : ""}</span>
                </div>
              </div>
            </aside>
          </div>
        </section>
      </div>
    </div>
  );
}

export default function MeetupsPage() {
  const { t } = useTranslation("meetups");
  const locale = useLocale();
  const c = getCopy(locale);
  const [activeTab, setActiveTab] = useState<"upcoming" | "previous">("upcoming");
  const [modeFilter, setModeFilter] = useState<ModeFilter>("all");
  const [meetups, setMeetups] = useState<Meetup[]>(allMeetups);
  const [selectedMeetup, setSelectedMeetup] = useState<Meetup | null>(null);
  const [viewer, setViewer] = useState<ViewerState>({ loaded: false, user: null, vip: false });

  useEffect(() => {
    apiFetch<{ items: Array<Partial<Meetup> & { id: string; status?: string }> }>("/api/meetups")
      .then((data) => {
        if (data.items?.length) {
          setMeetups(data.items.map(mapMeetup));
        }
      })
      .catch(() => setMeetups(allMeetups));
  }, []);

  useEffect(() => {
    let cancelled = false;
    apiFetch<{ user: ViewerUser | null }>("/api/auth/me")
      .then((data) => {
        if (!cancelled) setViewer({ loaded: true, user: data.user, vip: Boolean(data.user?.vip) });
      })
      .catch(() => {
        if (!cancelled) setViewer({ loaded: true, user: null, vip: false });
      });
    return () => {
      cancelled = true;
    };
  }, []);

  const upcomingMeetups = useMemo(() => meetups.filter((m) => m.isUpcoming), [meetups]);
  const previousMeetups = useMemo(() => meetups.filter((m) => !m.isUpcoming), [meetups]);
  const tabMeetups = activeTab === "upcoming" ? upcomingMeetups : previousMeetups;
  const displayedMeetups = useMemo(
    () => tabMeetups.filter((meetup) => modeFilter === "all" || meetup.mode === modeFilter),
    [modeFilter, tabMeetups]
  );
  const onlineCount = useMemo(() => upcomingMeetups.filter((m) => m.mode !== "offline").length, [upcomingMeetups]);
  const mirotalkCount = useMemo(() => meetups.filter((m) => m.meetingProvider === "mirotalk").length, [meetups]);
  const protectedCount = useMemo(() => meetups.filter((m) => m.accessLevel !== "public").length, [meetups]);

  const modeFilters: Array<{ value: ModeFilter; label: string }> = [
    { value: "all", label: c.allModes },
    { value: "offline", label: c.offline },
    { value: "online", label: c.online },
    { value: "hybrid", label: c.hybrid },
  ];

  return (
    <div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
      <main className="mx-auto max-w-[1400px] px-4 py-8 sm:px-6 sm:py-12 md:px-10">
        <header className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div>
            <h1 className="flex items-center gap-2 text-2xl font-bold text-gray-900 dark:text-gray-100 sm:text-3xl">
              <span className="h-8 w-1 rounded-full bg-[#ff4d4f]" />
              {t("title")}
            </h1>
            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 sm:text-base">
              {t("subtitle")}
            </p>
          </div>
          <Link
            href="/meetups/host"
            className="inline-flex min-h-11 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-xl bg-[#ff4d4f] px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-[#ff7a45] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ff4d4f]/40"
          >
            <span aria-hidden>＋</span>
            {t("hostMeetup")}
          </Link>
        </header>

        <section className="mb-8 overflow-hidden border-y border-gray-100 bg-white/70 px-4 py-5 dark:border-gray-800 dark:bg-gray-900/70 sm:px-6">
          <div className="grid gap-5 lg:grid-cols-[1.2fr_1fr] lg:items-center">
            <div>
              <p className="text-sm font-semibold text-[#ff4d4f]">{c.center}</p>
              <h2 className="mt-1 text-xl font-bold text-gray-900 dark:text-gray-100 sm:text-2xl">{c.onlineReady}</h2>
              <p className="mt-2 max-w-2xl text-sm leading-6 text-gray-600 dark:text-gray-400">{c.dataPolicy}</p>
            </div>
            <div className="grid grid-cols-3 gap-3">
              <div className="border-l border-gray-200 pl-3 dark:border-gray-700">
                <p className="text-xl font-bold text-gray-900 dark:text-gray-100">{onlineCount}</p>
                <p className="text-xs text-gray-500 dark:text-gray-400">{c.onlineStats}</p>
              </div>
              <div className="border-l border-gray-200 pl-3 dark:border-gray-700">
                <p className="text-xl font-bold text-gray-900 dark:text-gray-100">{mirotalkCount}</p>
                <p className="text-xs text-gray-500 dark:text-gray-400">{c.mirotalkStats}</p>
              </div>
              <div className="border-l border-gray-200 pl-3 dark:border-gray-700">
                <p className="text-xl font-bold text-gray-900 dark:text-gray-100">{protectedCount}</p>
                <p className="text-xs text-gray-500 dark:text-gray-400">{c.permissionStats}</p>
              </div>
            </div>
          </div>
        </section>

        <div className="mb-5 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
          <div className="inline-flex w-fit gap-1 rounded-xl border border-gray-100 bg-white p-1 shadow-sm dark:border-gray-800 dark:bg-gray-900">
            <button type="button" onClick={() => setActiveTab("upcoming")} className={`cursor-pointer rounded-lg px-5 py-2.5 text-sm font-medium transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ff4d4f]/40 ${activeTab === "upcoming" ? "bg-[#ff4d4f] text-white shadow-sm" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"}`}>
              {t("upcoming")}
            </button>
            <button type="button" onClick={() => setActiveTab("previous")} className={`cursor-pointer rounded-lg px-5 py-2.5 text-sm font-medium transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ff4d4f]/40 ${activeTab === "previous" ? "bg-[#ff4d4f] text-white shadow-sm" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"}`}>
              {t("previous")}
            </button>
          </div>

          <div className="flex flex-wrap gap-2">
            {modeFilters.map((filter) => (
              <button
                key={filter.value}
                type="button"
                onClick={() => setModeFilter(filter.value)}
                className={`min-h-9 cursor-pointer rounded-full border px-3 py-1.5 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ff4d4f]/40 ${
                  modeFilter === filter.value
                    ? "border-[#ff4d4f] bg-[#ff4d4f] text-white"
                    : "border-gray-200 bg-white text-gray-600 hover:border-gray-300 hover:text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-600"
                }`}
              >
                {filter.label}
              </button>
            ))}
          </div>
        </div>

        <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
          {c.countPrefix}
          <span className="mx-1 font-semibold text-gray-700 dark:text-gray-300">{displayedMeetups.length}</span>
          {activeTab === "upcoming" ? c.upcomingCountSuffix : c.previousCountSuffix}
        </p>

        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3">
          {displayedMeetups.map((meetup) => (
            <MeetupCard key={meetup.id} meetup={meetup} locale={locale} viewer={viewer} onSelect={setSelectedMeetup} />
          ))}
        </div>

        {displayedMeetups.length === 0 && (
          <div className="py-16 text-center sm:py-24">
            <span className="mb-4 block text-5xl sm:text-6xl">🍹</span>
            <p className="text-base text-gray-500 dark:text-gray-400 sm:text-lg">
              {activeTab === "upcoming" ? c.emptyUpcoming : c.emptyPrevious}
            </p>
          </div>
        )}
      </main>

      {selectedMeetup && (
        <MeetupDetailModal key={selectedMeetup.id} meetup={selectedMeetup} locale={locale} viewer={viewer} onClose={() => setSelectedMeetup(null)} />
      )}
    </div>
  );
}
