"use client";

import { useState, useEffect, useRef } from "react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import {
  profileService,
  RawFullProfile,
  RawChannelContent,
  RawFeedContent,
} from "@/services/profileService";
import { useSubscribe } from "@/hooks/useSubscribe";
import { contentMgmtService } from "@/services/contentActionService";
import { DeleteConfirmModal } from "@/components/shared/DeleteConfirmModal";
import { useAppDispatch } from "@/store/hooks";
import { setTrack, setQueue } from "@/store/slices/playerSlice";
import type { MusicItem } from "@/services/musicSectionService";
import {
  formatDuration,
  formatViews,
  formatRelativeDate,
} from "@/utils/format";
import { CT } from "@/config/contentTypes";
import {
  ArrowLeft,
  Play,
  Heart,
  MessageCircle,
  Eye,
  CheckCircle,
  Video,
  Film,
  Music,
  Mic,
  Newspaper,
  Users,
} from "lucide-react";

/* ── tab config ──────────────────────────────────────────────────────────── */

const TABS = [
  { key: "video", label: "Videos", icon: Video, contentType: CT.VIDEO },
  { key: "music", label: "Music", icon: Music, contentType: CT.MUSIC },
  { key: "reels", label: "Reels", icon: Film, contentType: CT.REEL },
  { key: "podcast", label: "Podcasts", icon: Mic, contentType: CT.PODCAST },
  { key: "feeds", label: "Feeds", icon: Newspaper, contentType: null },
] as const;

type TabKey = (typeof TABS)[number]["key"];

/* ── helpers ─────────────────────────────────────────────────────────────── */

function fmtSubs(n: number) {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
  return String(n);
}

/* ── skeletons ───────────────────────────────────────────────────────────── */

function HeroSkeleton() {
  return (
    <div>
      <div
        className="animate-pulse"
        style={{ height: 220, background: "var(--card)" }}
      />
      <div className="px-5 pb-6" style={{ marginTop: -48 }}>
        <div
          className="w-24 h-24 rounded-2xl border-4 animate-pulse mb-4"
          style={{ borderColor: "var(--bg)", background: "var(--card)" }}
        />
        <div
          className="h-5 w-40 rounded-full animate-pulse mb-2"
          style={{ background: "var(--card)" }}
        />
        <div
          className="h-3.5 w-28 rounded-full animate-pulse"
          style={{ background: "var(--card)" }}
        />
      </div>
    </div>
  );
}

function ContentSkeleton() {
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 px-4 pt-4">
      {Array.from({ length: 6 }).map((_, i) => (
        <div
          key={i}
          className="rounded-xl overflow-hidden"
          style={{ background: "var(--card)" }}
        >
          <div
            className="animate-pulse"
            style={{ aspectRatio: "16/9", background: "var(--deep)" }}
          />
          <div className="p-2.5 flex flex-col gap-1.5">
            <div
              className="h-2.5 rounded-full animate-pulse"
              style={{ background: "var(--deep)", width: "80%" }}
            />
            <div
              className="h-2 rounded-full animate-pulse"
              style={{ background: "var(--deep)", width: "50%" }}
            />
          </div>
        </div>
      ))}
    </div>
  );
}

/* ── converter: RawChannelContent → MusicItem ───────────────────────────── */

function toMusicItem(raw: RawChannelContent): MusicItem {
  return {
    id: String(raw.id),
    contentType: raw.content_type,
    title: raw.title,
    thumbnail: raw.portrait_img || raw.landscape_img,
    landscapeImg: raw.landscape_img,
    audioUrl: raw.content,
    channelName: raw.channel_name,
    channelImage: raw.channel_image,
    duration:
      raw.content_duration > 0 ? formatDuration(raw.content_duration) : "",
    durationMs: raw.content_duration,
    views: formatViews(raw.total_view),
    likes: String(raw.total_like),
    category: raw.category_name,
    language: raw.language_name,
    isDownload: false,
    isRent: false,
    rentPrice: 0,
  };
}

/* ── content card ────────────────────────────────────────────────────────── */

/*
 * content_type mapping for get_content_by_channel:
 *   1 = Video  → navigate /video/[id]
 *   2 = Reels  → navigate /reel/[id]
 *   3 = Music  → dispatch setTrack + setQueue (no navigation)
 *   4 = Podcast→ navigate /content/4/[id]
 */
function ContentCard({
  item,
  allItems,
}: {
  item: RawChannelContent;
  allItems: RawChannelContent[];
}) {
  const router = useRouter();
  const dispatch = useAppDispatch();

  const isReel = item.content_type === CT.REEL;
  const isMusic = item.content_type === CT.MUSIC;
  const img = isReel ? item.portrait_img : item.landscape_img;

  const handleClick = () => {
    if (isMusic) {
      dispatch(setTrack(toMusicItem(item)));
      dispatch(setQueue(allItems.map(toMusicItem)));
      return;
    }
    if (isReel) {
      router.push(`/reel/${item.id}`);
      return;
    }
    if (item.content_type === CT.PODCAST) {
      router.push(`/content/${CT.PODCAST}/${item.id}`);
      return;
    }
    router.push(`/video/${item.id}`);
  };

  /* Reels: compact portrait 3/4 — Videos/Podcast: landscape 16/9
     Music: square 1/1 with music-note watermark                    */
  const ratio = isReel ? "3/4" : isMusic ? "1/1" : "16/9";

  return (
    <div
      className="group flex flex-col rounded-xl overflow-hidden cursor-pointer transition-transform duration-200 hover:-translate-y-0.5"
      style={{
        background: "var(--card)",
        border: "1px solid var(--border-soft)",
      }}
      onClick={handleClick}
    >
      <div
        className="relative overflow-hidden"
        style={{ aspectRatio: ratio, background: "var(--deep)" }}
      >
        {img ? (
          <Image
            src={img}
            alt={item.title}
            fill
            className="object-cover transition-transform duration-300 group-hover:scale-[1.04]"
            unoptimized
            sizes="150px"
          />
        ) : (
          isMusic && (
            <div className="absolute inset-0 flex items-center justify-center">
              <Music
                size={28}
                color="rgba(var(--accent-rgb),0.3)"
                strokeWidth={1.2}
              />
            </div>
          )
        )}
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            background:
              "linear-gradient(to top,rgba(0,0,0,0.6) 0%,transparent 55%)",
          }}
        />

        {/* play overlay */}
        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
          <span
            className="w-9 h-9 rounded-full flex items-center justify-center"
            style={{
              background: "rgba(var(--accent-rgb),0.92)",
              boxShadow: "0 4px 18px rgba(var(--accent-rgb),0.5)",
            }}
          >
            <Play size={14} fill="white" strokeWidth={0} className="ml-0.5" />
          </span>
        </div>

        {/* duration badge (not on reels) */}
        {item.content_duration > 0 && !isReel && (
          <span
            className="absolute bottom-1.5 right-1.5 text-[9px] font-mono font-semibold px-1 py-0.5 rounded text-[#ffffff]"
            style={{ background: "rgba(0,0,0,0.82)" }}
          >
            {formatDuration(item.content_duration)}
          </span>
        )}

        {/* music "now playing" indicator when active */}
        {isMusic && (
          <div className="absolute top-1.5 left-1.5">
            <span
              className="text-[8px] font-black px-1.5 py-0.5 rounded uppercase tracking-widest"
              style={{
                background: "rgba(var(--accent-rgb),0.18)",
                color: "var(--accent)",
                border: "1px solid rgba(var(--accent-rgb),0.25)",
              }}
            >
              Audio
            </span>
          </div>
        )}
      </div>

      <div className="p-2.5">
        <p className="text-[11px] font-semibold line-clamp-2 leading-snug" style={{ color: "var(--text-primary)" }}>
          {item.title}
        </p>
        <div className="flex items-center gap-2 mt-1.5 flex-wrap">
          <span
            className="flex items-center gap-1 text-[9px]"
            style={{ color: "#666" }}
          >
            <Eye size={9} strokeWidth={1.8} /> {formatViews(item.total_view)}
          </span>
          <span
            className="flex items-center gap-1 text-[9px]"
            style={{ color: "#666" }}
          >
            <Heart size={9} strokeWidth={1.8} /> {item.total_like}
          </span>
          <span className="text-[9px]" style={{ color: "#555" }}>
            {formatRelativeDate(item.created_at)}
          </span>
        </div>
      </div>
    </div>
  );
}

/* ── feed card ───────────────────────────────────────────────────────────── */

function FeedCard({ item }: { item: RawFeedContent }) {
  const img = item.feed_content?.[0]?.image;
  return (
    <div
      className="col-span-full rounded-xl overflow-hidden"
      style={{
        background: "var(--card)",
        border: "1px solid var(--border-soft)",
      }}
    >
      {img && (
        <div
          className="relative"
          style={{ height: 200, background: "var(--deep)" }}
        >
          <Image
            src={img}
            alt="feed"
            fill
            className="object-cover"
            unoptimized
          />
        </div>
      )}
      <div className="px-4 py-3">
        <p
          className="text-xs leading-relaxed line-clamp-3"
          style={{ color: "#bbb" }}
        >
          {item.description}
        </p>
        <div className="flex items-center gap-3 mt-2">
          <span
            className="flex items-center gap-1 text-[10px]"
            style={{ color: "#666" }}
          >
            <Heart size={10} /> {item.total_like}
          </span>
          <span
            className="flex items-center gap-1 text-[10px]"
            style={{ color: "#666" }}
          >
            <MessageCircle size={10} /> {item.total_comment}
          </span>
          <span className="ml-auto text-[9px]" style={{ color: "#555" }}>
            {formatRelativeDate(item.created_at)}
          </span>
        </div>
      </div>
    </div>
  );
}

/* ── main component ──────────────────────────────────────────────────────── */

export default function OtherUserProfilePage({ userId }: { userId: string }) {
  const router = useRouter();
  const [profile, setProfile] = useState<RawFullProfile | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState("");
  const [activeTab, setActiveTab] = useState<TabKey>("video");
  const [content, setContent] = useState<RawChannelContent[]>([]);
  const [feeds, setFeeds] = useState<RawFeedContent[]>([]);
  const [contentLoading, setContentLoading] = useState(false);
  const [coverError, setCoverError] = useState(false);
  const headerRef = useRef<HTMLDivElement>(null);
  const [scrolled, setScrolled] = useState(false);
  const [showBlockConfirm, setShowBlockConfirm] = useState(false);
  const [blocked, setBlocked] = useState(false);

  const {
    subscribed,
    loading: subLoading,
    toggle,
  } = useSubscribe(
    profile?.id ?? userId,
    (profile?.is_subscribe ?? 0) === 1,   // true once profile API responds
    profile?.type === 2 ? 2 : 1,           // respect creator vs regular user type
  );

  /* fetch profile */
  useEffect(() => {
    setIsLoading(true);
    profileService
      .getOtherProfile(userId)
      .then((res) => {
        if (res.status !== 200) throw new Error("Failed to load profile");
        const raw = Array.isArray(res.result) ? res.result[0] : res.result;
        setProfile(raw);
      })
      .catch(() => setError("Could not load this profile."))
      .finally(() => setIsLoading(false));
  }, [userId]);

  /* fetch content when tab or profile changes */
  useEffect(() => {
    if (!profile) return;
    const tab = TABS.find((t) => t.key === activeTab);
    if (!tab) return;

    setContentLoading(true);
    setContent([]);
    setFeeds([]);

    if (tab.key === "feeds") {
      profileService
        .getChannelFeed(profile.channel_id)
        .then((res) => setFeeds(res.result ?? []))
        .catch(() => {})
        .finally(() => setContentLoading(false));
    } else if (tab.contentType !== null) {
      profileService
        .getContentByChannel(profile.channel_id, tab.contentType)
        .then((res) => setContent(res.result ?? []))
        .catch(() => {})
        .finally(() => setContentLoading(false));
    } else {
      setContentLoading(false);
    }
  }, [profile, activeTab]);

  /* sticky header on scroll */
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 180);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  /* ── error / loading ── */
  if (error) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[60vh] gap-4 px-6">
        <div
          className="w-16 h-16 rounded-full flex items-center justify-center"
          style={{
            background: "rgba(244,63,94,0.1)",
            border: "1px solid rgba(244,63,94,0.2)",
          }}
        >
          <Users size={28} color="#f43f5e" strokeWidth={1.5} />
        </div>
        <p className="text-sm font-semibold" style={{ color: "var(--text-primary)" }}>Profile not found</p>
        <p className="text-xs text-center" style={{ color: "#666" }}>
          {error}
        </p>
        <button
          onClick={() => router.back()}
          className="px-5 py-2 rounded-full text-xs font-bold text-[#ffffff] active:scale-95"
          style={{ background: "var(--accent)" }}
        >
          Go Back
        </button>
      </div>
    );
  }

  if (isLoading) {
    return (
      <div style={{ minHeight: "100vh", background: "var(--bg)" }}>
        <HeroSkeleton />
        <ContentSkeleton />
      </div>
    );
  }

  if (!profile) return null;

  const hasCover = !!profile.cover_img && !coverError;
  const hasAvatar = !!profile.image;
  const isVerified = profile.is_account_verify === 1;
  const subCount = profile.total_subscriber ?? 0;
  const videoCount = profile.total_content ?? 0;
  const subscribed1 = profile.is_subscribe ?? 0;
  return (
    <div
      style={{ minHeight: "100vh", background: "var(--bg)", paddingBottom: 80 }}
    >
      {/* ── sticky top bar ── */}
      <div
        ref={headerRef}
        className="sticky top-0 z-30 flex items-center gap-3 px-4 transition-all duration-300"
        style={{
          height: 52,
          background: scrolled ? "rgba(10,10,10,0.92)" : "transparent",
          backdropFilter: scrolled ? "blur(16px)" : "none",
          borderBottom: scrolled ? "1px solid rgba(255,255,255,0.06)" : "none",
        }}
      >
        <button
          onClick={() => router.back()}
          className="w-8 h-8 rounded-full flex items-center justify-center transition-all active:scale-90"
          style={{
            background: scrolled
              ? "rgba(255,255,255,0.08)"
              : "rgba(0,0,0,0.45)",
            backdropFilter: "blur(8px)",
          }}
        >
          <ArrowLeft size={16} color="#fff" strokeWidth={2} />
        </button>
        {scrolled && (
          <span
            className="text-sm font-bold truncate"
            style={{ animation: "fadeIn 0.2s ease", color: "var(--text-primary)" }}
          >
            {profile.channel_name}
          </span>
        )}
      </div>

      {/* ── cover / hero ── */}
      <div className="relative" style={{ marginTop: -52 }}>
        {/* Cover image */}
        <div
          className="relative w-full overflow-hidden"
          style={{
            height: 220,
            background: hasCover
              ? "var(--deep)"
              : `hsl(${(parseInt(userId) * 37) % 360}, 25%, 12%)`,
          }}
        >
          {hasCover && (
            <Image
              src={profile.cover_img}
              alt="cover"
              fill
              className="object-cover"
              unoptimized
              onError={() => setCoverError(true)}
            />
          )}
          {/* layered overlays */}
          <div
            className="absolute inset-0 pointer-events-none"
            style={{
              background:
                "linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.1) 50%, rgba(10,10,10,0.9) 100%)",
            }}
          />
          <div
            className="absolute inset-0 pointer-events-none"
            style={{
              background:
                "linear-gradient(135deg, rgba(var(--accent-rgb),0.08) 0%, transparent 60%)",
            }}
          />
          {/* decorative geometric accent */}
          <div
            className="absolute bottom-0 right-0 pointer-events-none"
            style={{ opacity: 0.12 }}
          >
            <svg width="200" height="140" viewBox="0 0 200 140" fill="none">
              <circle
                cx="160"
                cy="80"
                r="90"
                stroke="rgba(var(--accent-rgb),0.8)"
                strokeWidth="0.5"
              />
              <circle
                cx="160"
                cy="80"
                r="60"
                stroke="rgba(var(--accent-rgb),0.6)"
                strokeWidth="0.5"
              />
              <circle
                cx="160"
                cy="80"
                r="30"
                stroke="rgba(var(--accent-rgb),0.4)"
                strokeWidth="0.5"
              />
            </svg>
          </div>
        </div>

        {/* Profile info overlay */}
        <div className="px-5" style={{ marginTop: -52 }}>
          {/* avatar + subscribe row */}
          <div className="flex items-end justify-between mb-3">
            {/* Avatar */}
            <div
              className="relative rounded-2xl overflow-hidden flex items-center justify-center text-2xl font-black text-[#ffffff] shrink-0"
              style={{
                width: 88,
                height: 88,
                background: hasAvatar
                  ? "var(--deep)"
                  : `hsl(${(parseInt(userId) * 37) % 360}, 40%, 28%)`,
                border: "3px solid var(--bg)",
                boxShadow:
                  "0 0 0 1.5px rgba(var(--accent-rgb),0.5), 0 8px 28px rgba(0,0,0,0.6)",
              }}
            >
              {hasAvatar ? (
                <Image
                  src={profile.image}
                  alt={profile.channel_name}
                  fill
                  className="object-cover"
                  unoptimized
                />
              ) : (
                (profile.channel_name[0] ?? "?").toUpperCase()
              )}
            </div>

            {/* Subscribe button */}
            <button
              onClick={toggle}
              disabled={subLoading}
              className="flex items-center gap-2 px-5 h-9 rounded-full text-xs font-black transition-all duration-200 active:scale-95 disabled:opacity-60"
              style={
                subscribed1
                  ? {
                      background: "var(--btn-ghost-hover)",
                      color: "#aaa",
                      border: "1px solid var(--border)",
                    }
                  : {
                      background:
                        "linear-gradient(135deg,#f59e0b,var(--accent))",
                      color: "#000",
                      boxShadow: "0 4px 18px rgba(var(--accent-rgb),0.4)",
                    }
              }
            >
              {subLoading ? (
                <span
                  className="w-4 h-4 rounded-full border-2 animate-spin"
                  style={{
                    borderColor: "currentColor",
                    borderTopColor: "transparent",
                  }}
                />
              ) : subscribed ? (
                <>
                  <CheckCircle size={12} strokeWidth={2.5} />
                  Subscribed
                </>
              ) : (
                <>
                  <Users size={12} strokeWidth={2.5} />
                  Subscribe
                </>
              )}
            </button>

            {/* Block button */}
            <button
              onClick={() => setShowBlockConfirm(true)}
              className="w-9 h-9 rounded-full flex items-center justify-center transition-all active:scale-90"
              title={blocked ? "Unblock user" : "Block user"}
              style={{
                background: blocked
                  ? "rgba(244,63,94,0.15)"
                  : "var(--btn-ghost)",
                border: `1px solid ${blocked ? "rgba(244,63,94,0.3)" : "var(--border)"}`,
              }}
            >
              <svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke={blocked ? "#f43f5e" : "#888"}
                strokeWidth="2"
                strokeLinecap="round"
              >
                <circle cx="12" cy="12" r="10" />
                <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
              </svg>
            </button>
          </div>

          {/* Name + verified */}
          <div className="flex items-center gap-2 mb-0.5">
            <h1 className="text-lg font-black tracking-tight leading-tight" style={{ color: "var(--text-primary)" }}>
              {profile.channel_name}
            </h1>
            {isVerified && (
              <span
                className="flex items-center justify-center w-4 h-4 rounded-full flex-shrink-0"
                style={{ background: "var(--accent)" }}
              >
                <CheckCircle size={9} color="#000" strokeWidth={3} />
              </span>
            )}
          </div>

          {/* Handle */}
          {profile.full_name && profile.full_name !== profile.channel_name && (
            <p className="text-[11px] mb-2" style={{ color: "#666" }}>
              {profile.full_name}
            </p>
          )}

          {/* Stats row */}
          <div className="flex items-center gap-4 mt-2 mb-3">
            <div className="flex flex-col items-center">
              <span className="text-sm font-black" style={{ color: "var(--text-primary)" }}>
                {fmtSubs(subCount)}
              </span>
              <span
                className="text-[9px] uppercase tracking-widest font-semibold mt-0.5"
                style={{ color: "#666" }}
              >
                Subscribers
              </span>
            </div>
            <div
              className="w-px h-6"
              style={{ background: "var(--border)" }}
            />
            <div className="flex flex-col items-center">
              <span className="text-sm font-black" style={{ color: "var(--text-primary)" }}>
                {videoCount}
              </span>
              <span
                className="text-[9px] uppercase tracking-widest font-semibold mt-0.5"
                style={{ color: "#666" }}
              >
                Videos
              </span>
            </div>
          </div>

          {/* Bio */}
          {profile.description && (
            <p
              className="text-[11px] leading-relaxed mb-3"
              style={{ color: "#888" }}
            >
              {profile.description}
            </p>
          )}
        </div>
      </div>

      {/* ── divider ── */}
      <div
        className="mx-5 mb-1"
        style={{ height: 1, background: "var(--border)" }}
      />

      {/* ── tab bar ── */}
      <div
        className="sticky z-20 overflow-x-auto scrollbar-hide"
        style={{
          top: 52,
          background: "var(--bg)",
          borderBottom: "1px solid var(--border-soft)",
        }}
      >
        <div className="flex gap-1 px-4 py-2 min-w-max">
          {TABS.map((tab) => {
            const Icon = tab.icon;
            const active = activeTab === tab.key;
            return (
              <button
                key={tab.key}
                onClick={() => setActiveTab(tab.key)}
                className="flex items-center gap-1.5 h-8 px-3 rounded-xl text-[11px] font-semibold whitespace-nowrap transition-all duration-150 active:scale-95"
                style={{
                  background: active
                    ? "rgba(var(--accent-rgb),0.14)"
                    : "transparent",
                  color: active ? "var(--accent)" : "#666",
                  border: `1px solid ${active ? "rgba(var(--accent-rgb),0.25)" : "transparent"}`,
                }}
              >
                <Icon size={12} strokeWidth={active ? 2.5 : 1.8} />
                {tab.label}
              </button>
            );
          })}
        </div>
      </div>

      {/* ── content area ── */}
      <div className="px-4 pt-4">
        {contentLoading ? (
          <ContentSkeleton />
        ) : activeTab === "feeds" ? (
          feeds.length === 0 ? (
            <EmptyState label="No posts yet" />
          ) : (
            <div className="grid grid-cols-1 gap-3">
              {feeds.map((f) => (
                <FeedCard key={f.id} item={f} />
              ))}
            </div>
          )
        ) : content.length === 0 ? (
          <EmptyState
            label={`No ${TABS.find((t) => t.key === activeTab)?.label.toLowerCase() ?? "content"} yet`}
          />
        ) : (
          <div
            className={
              activeTab === "reels"
                ? "grid grid-cols-4 sm:grid-cols-8 gap-2" /* compact 3/4 portrait grid */
                : activeTab === "music"
                  ? "grid grid-cols-4 sm:grid-cols-8 gap-3" /* square audio cards */
                  : "grid grid-cols-2 sm:grid-cols-3 gap-3" /* landscape video/podcast */
            }
          >
            {content.map((item) => (
              <ContentCard key={item.id} item={item} allItems={content} />
            ))}
          </div>
        )}
      </div>

      <style>{`
        @keyframes fadeIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
      `}</style>

      {showBlockConfirm && profile && (
        <DeleteConfirmModal
          title={blocked ? "Unblock User" : "Block User"}
          description={`${blocked ? "Unblocking" : "Blocking"} @${profile.channel_name} will ${blocked ? "allow them to interact with your content again." : "prevent them from interacting with your content."}`}
          confirmLabel={blocked ? "Unblock" : "Block"}
          danger={!blocked}
          onConfirm={async () => {
            await contentMgmtService.blockChannel({
              blockUserId: String(profile.id),
              blockChannelId: profile.channel_id,
            });
            setBlocked((v) => !v);
            setShowBlockConfirm(false);
          }}
          onCancel={() => setShowBlockConfirm(false)}
        />
      )}
    </div>
  );
}

function EmptyState({ label }: { label: string }) {
  return (
    <div className="flex flex-col items-center justify-center py-20 gap-3">
      <div
        className="w-14 h-14 rounded-full flex items-center justify-center"
        style={{
          background: "var(--btn-ghost)",
          border: "1px solid var(--border)",
        }}
      >
        <Video size={22} color="#444" strokeWidth={1.3} />
      </div>
      <p className="text-xs font-medium" style={{ color: "#555" }}>
        {label}
      </p>
    </div>
  );
}