"use client";

import { useMemo, useState } from "react";
import { Link } from "@/i18n/navigation";
import {
  MIROTALK_PROVIDER_LABEL,
  WEB_CHAT_PROVIDER_LABEL,
  type MeetupSession,
} from "@/app/lib/meetups";
import MeetupSocialPanel from "@/app/components/meetups/MeetupSocialPanel";

interface EventLiveRoomProps {
  locale: string;
  meetup: {
    id: string;
    city: string;
    emoji: string;
    venue: string;
    date: string;
    time: string;
    organizer: string;
    gradientFrom: string;
    gradientTo: string;
  };
  session: MeetupSession;
  formattedDate: string;
}

const copy = {
  zh: {
    back: "返回活动列表",
    video: "视频会议",
    chat: "Web 群聊",
    split: "分屏",
    videoOnly: "只看视频",
    chatOnly: "只看群聊",
    identity: "社区身份",
    guest: "访客",
    vip: "VIP",
    member: "成员",
    channel: "活动频道",
    openChat: "新窗口打开群聊",
    openVideo: "新窗口打开视频",
    locked: "当前权限不足，无法进入活动间",
    login: "登录社区账户",
    joinVip: "开通 VIP",
    providers: "服务由 VPS 自建开源项目提供",
  },
  en: {
    back: "Back to events",
    video: "Video",
    chat: "Web chat",
    split: "Split",
    videoOnly: "Video only",
    chatOnly: "Chat only",
    identity: "Community identity",
    guest: "Guest",
    vip: "VIP",
    member: "Member",
    channel: "Event channel",
    openChat: "Open chat in new tab",
    openVideo: "Open video in new tab",
    locked: "You do not have access to this live room yet.",
    login: "Sign in",
    joinVip: "Get VIP",
    providers: "Powered by self-hosted open-source services on VPS",
  },
};

type PanelMode = "split" | "video" | "chat";

export default function EventLiveRoom({ locale, meetup, session, formattedDate }: EventLiveRoomProps) {
  const c = locale === "zh" ? copy.zh : copy.en;
  const [panel, setPanel] = useState<PanelMode>("split");
  const badge = useMemo(() => {
    if (session.user?.vip) return c.vip;
    if (session.user) return c.member;
    return c.guest;
  }, [c.guest, c.member, c.vip, session.user]);

  if (!session.canJoin) {
    return (
      <div className="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-4 text-center">
        <p className="text-lg font-semibold text-gray-900 dark:text-gray-100">{c.locked}</p>
        <div className="mt-6 flex flex-wrap justify-center gap-3">
          <Link
            href="/login"
            className="rounded-xl bg-[#ff4d4f] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#ff7a45]"
          >
            {c.login}
          </Link>
          {session.lockReason === "vip_required" ? (
            <Link
              href="/join"
              className="rounded-xl border border-violet-300 px-5 py-2.5 text-sm font-semibold text-violet-700 dark:border-violet-700 dark:text-violet-300"
            >
              {c.joinVip}
            </Link>
          ) : null}
          <Link href="/meetups" className="rounded-xl border border-gray-200 px-5 py-2.5 text-sm font-semibold text-gray-600 dark:border-gray-700 dark:text-gray-300">
            {c.back}
          </Link>
        </div>
      </div>
    );
  }

  const showVideo = panel === "split" || panel === "video";
  const showChat = panel === "split" || panel === "chat";

  return (
    <div className="flex min-h-screen flex-col bg-[#0b1220] text-white">
      <header
        className="border-b border-white/10 px-4 py-4 sm:px-6"
        style={{ background: `linear-gradient(135deg, ${meetup.gradientFrom}, ${meetup.gradientTo})` }}
      >
        <div className="mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-4">
          <div className="min-w-0">
            <Link href="/meetups" className="text-xs font-medium text-white/75 hover:text-white">
              ← {c.back}
            </Link>
            <h1 className="mt-2 truncate text-xl font-bold sm:text-2xl">
              {meetup.emoji} {meetup.city} · {meetup.venue}
            </h1>
            <p className="mt-1 text-sm text-white/85">{formattedDate}</p>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <span className="rounded-full bg-black/20 px-3 py-1 text-xs font-semibold backdrop-blur">
              {c.identity}: {session.displayName}
            </span>
            <span className="rounded-full bg-black/20 px-3 py-1 text-xs font-semibold backdrop-blur">{badge}</span>
            <span className="rounded-full bg-black/20 px-3 py-1 text-xs font-semibold backdrop-blur">
              {c.channel} {session.loungeChannel}
            </span>
          </div>
        </div>
      </header>

      <div className="border-b border-white/10 bg-[#111827] px-4 py-3 sm:px-6">
        <div className="mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-3">
          <div className="flex flex-wrap gap-2 text-xs text-white/70">
            <span className="rounded-full bg-white/10 px-2.5 py-1">{MIROTALK_PROVIDER_LABEL}</span>
            <span className="rounded-full bg-white/10 px-2.5 py-1">{WEB_CHAT_PROVIDER_LABEL}</span>
            <span className="rounded-full bg-white/10 px-2.5 py-1">{c.providers}</span>
          </div>
          <div className="flex flex-wrap gap-2">
            {(["split", "video", "chat"] as PanelMode[]).map((mode) => (
              <button
                key={mode}
                type="button"
                onClick={() => setPanel(mode)}
                className={`rounded-lg px-3 py-1.5 text-xs font-semibold transition ${
                  panel === mode ? "bg-[#ff4d4f] text-white" : "bg-white/10 text-white/80 hover:bg-white/15"
                }`}
              >
                {mode === "split" ? c.split : mode === "video" ? c.videoOnly : c.chatOnly}
              </button>
            ))}
            <a
              href={session.videoUrl}
              target="_blank"
              rel="noreferrer"
              className="rounded-lg border border-white/15 px-3 py-1.5 text-xs font-semibold text-white/85 hover:bg-white/10"
            >
              {c.openVideo}
            </a>
            <a
              href={session.chatUrl}
              target="_blank"
              rel="noreferrer"
              className="rounded-lg border border-white/15 px-3 py-1.5 text-xs font-semibold text-white/85 hover:bg-white/10"
            >
              {c.openChat}
            </a>
          </div>
        </div>
      </div>

      <main className="mx-auto grid w-full max-w-[1600px] flex-1 gap-0 px-0 py-0 lg:grid-cols-[minmax(0,1.35fr)_minmax(320px,0.65fr)]">
        {showVideo ? (
          <section className={`relative min-h-[320px] bg-black ${panel === "split" ? "border-r border-white/10" : ""}`}>
            <iframe
              title={`${meetup.city} video`}
              src={session.videoUrl}
              className="h-[50vh] w-full lg:h-[calc(100vh-180px)]"
              allow="camera; microphone; display-capture; fullscreen; clipboard-read; clipboard-write"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </section>
        ) : null}
        {showChat ? (
          <section className="relative min-h-[320px] bg-[#0f172a]">
            <iframe
              title={`${meetup.city} chat`}
              src={session.chatUrl}
              className="h-[50vh] w-full lg:h-[calc(100vh-180px)]"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </section>
        ) : null}
      </main>

      <footer className="border-t border-white/10 bg-[#111827] px-4 py-5 sm:px-6">
        <div className="mx-auto max-w-[1600px]">
          <MeetupSocialPanel meetupId={meetup.id} city={meetup.city} locale={locale} />
        </div>
      </footer>
    </div>
  );
}