"use client";

import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
import { SubjectAvatar } from "@/components/ui/SubjectAvatar";
import type { SpaceDetails } from "@/components/social/SocialSpacePane";
import type { SocialPost } from "@/components/social/SocialMessageBubble";
import { ApiError, apiDelete, apiGet, apiPost } from "@/lib/api";

type Member = {
  user_id: number;
  role: string;
  role_label?: string | null;
  name: string;
};

type BroadcastAdmin = {
  id: number;
  user_id: number;
  name?: string | null;
  role: string;
};

type SharedItem = {
  id?: number;
  post_id?: number;
  original_name?: string;
  mime?: string | null;
  size_bytes?: number;
  url?: string;
  href?: string;
  title?: string;
  kind?: string | null;
  created_at?: string | null;
  author_name?: string | null;
};

type SharedContent = {
  images: SharedItem[];
  videos: SharedItem[];
  files: SharedItem[];
  audio: SharedItem[];
  links: SharedItem[];
};

type TabId = "members" | "images" | "videos" | "files" | "audio" | "links";

const TABS: Array<{ id: TabId; label: string }> = [
  { id: "members", label: "اعضا" },
  { id: "images", label: "تصاویر" },
  { id: "videos", label: "ویدیوها" },
  { id: "files", label: "فایل‌ها" },
  { id: "audio", label: "صوت‌ها" },
  { id: "links", label: "پیوندها" },
];

function muteKey(spaceId: number) {
  return `social_mute_${spaceId}`;
}

function readMuted(spaceId: number) {
  if (typeof window === "undefined") return false;
  return localStorage.getItem(muteKey(spaceId)) === "1";
}

function writeMuted(spaceId: number, muted: boolean) {
  if (typeof window === "undefined") return;
  localStorage.setItem(muteKey(spaceId), muted ? "1" : "0");
}

function memberInitials(name: string) {
  const parts = name.trim().split(/\s+/).filter(Boolean);
  if (!parts.length) return "؟";
  if (parts.length === 1) return parts[0].slice(0, 2);
  return parts[0][0] + parts[1][0];
}

function memberColor(name: string) {
  const colors = ["bg-teal-600", "bg-sky-600", "bg-violet-600", "bg-amber-600", "bg-rose-600"];
  let hash = 0;
  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
  return colors[Math.abs(hash) % colors.length];
}

function formatSize(bytes?: number) {
  if (!bytes) return "";
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

function formatDate(iso?: string | null) {
  if (!iso) return "";
  try {
    return new Date(iso).toLocaleDateString("fa-IR", { month: "short", day: "numeric" });
  } catch {
    return "";
  }
}

function MemberAvatar({ name }: { name: string }) {
  return (
    <div
      className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ${memberColor(name)}`}
    >
      {memberInitials(name)}
    </div>
  );
}

export function SocialSpaceInfoPanel({
  open,
  onClose,
  space,
  pinned,
  onSwitchPair,
  onOpenMessageSearch,
  onOpenRollCall,
  onToggleActive,
  scheduleId,
}: {
  open: boolean;
  onClose: () => void;
  space: SpaceDetails;
  pinned?: SocialPost | null;
  onSwitchPair?: () => void;
  onOpenMessageSearch?: () => void;
  onOpenRollCall?: () => void;
  onToggleActive?: () => void | Promise<void>;
  scheduleId?: number | null;
}) {
  const [tab, setTab] = useState<TabId>("members");
  const [memberQ, setMemberQ] = useState("");
  const [members, setMembers] = useState<Member[]>([]);
  const [broadcastAdmins, setBroadcastAdmins] = useState<BroadcastAdmin[]>([]);
  const [adminUserId, setAdminUserId] = useState("");
  const [shared, setShared] = useState<SharedContent | null>(null);
  const [loadingMembers, setLoadingMembers] = useState(false);
  const [loadingShared, setLoadingShared] = useState(false);
  const [muted, setMuted] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [actionUserId, setActionUserId] = useState<number | null>(null);
  const [toggling, setToggling] = useState(false);

  const isBroadcast = Boolean(space.broadcast_space_id) || (space.kind && space.kind !== "social");
  const broadcastSpaceId = space.broadcast_space_id ?? (space.id < 0 ? Math.abs(space.id) : null);
  const avatarName = space.subject_name ?? space.title;
  const typeLabel =
    space.kind === "school_announcement"
      ? "کانال مدرسه"
      : space.kind === "class_announcement"
        ? "اعلان کلاس"
        : space.kind === "system_announcement"
          ? "سامانه"
          : space.type === "group"
            ? "گروه"
            : "کانال";

  const loadMembers = useCallback(async () => {
    if (isBroadcast) {
      if (!broadcastSpaceId) return;
      setLoadingMembers(true);
      setError(null);
      try {
        const data = await apiGet<{ admins: BroadcastAdmin[]; can_appoint?: boolean }>(
          `/social/broadcast-spaces/${broadcastSpaceId}/admins`,
        );
        setBroadcastAdmins(data.admins ?? []);
        setMembers([]);
      } catch (err) {
        setError(err instanceof ApiError ? err.message : "خطا در بارگذاری ادمین‌ها");
      } finally {
        setLoadingMembers(false);
      }
      return;
    }

    setLoadingMembers(true);
    setError(null);
    try {
      const data = await apiGet<{ members: Member[] }>(`/social/spaces/${space.id}/members`);
      setMembers(data.members ?? []);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری اعضا");
    } finally {
      setLoadingMembers(false);
    }
  }, [broadcastSpaceId, isBroadcast, space.id]);

  const loadShared = useCallback(async () => {
    if (isBroadcast) {
      setShared({ images: [], videos: [], files: [], audio: [], links: [] });
      return;
    }
    setLoadingShared(true);
    try {
      const data = await apiGet<SharedContent>(`/social/spaces/${space.id}/shared`);
      setShared(data);
    } catch {
      setShared({ images: [], videos: [], files: [], audio: [], links: [] });
    } finally {
      setLoadingShared(false);
    }
  }, [isBroadcast, space.id]);

  useEffect(() => {
    if (!open) return;
    setTab("members");
    setMemberQ("");
    setMenuOpen(false);
    setMuted(readMuted(space.id));
    void loadMembers();
    void loadShared();
  }, [open, space.id, loadMembers, loadShared]);

  const filteredMembers = useMemo(() => {
    const q = memberQ.trim().toLowerCase();
    if (!q) return members;
    return members.filter((m) => m.name.toLowerCase().includes(q));
  }, [members, memberQ]);

  const tabCount = useMemo(
    () => ({
      members: isBroadcast ? broadcastAdmins.length : members.length,
      images: shared?.images.length ?? 0,
      videos: shared?.videos.length ?? 0,
      files: shared?.files.length ?? 0,
      audio: shared?.audio.length ?? 0,
      links: shared?.links.length ?? 0,
    }),
    [broadcastAdmins.length, isBroadcast, members.length, shared],
  );

  const appointLeader = async (userId: number) => {
    setActionUserId(userId);
    try {
      await apiPost(`/social/spaces/${space.id}/leaders`, { user_id: userId });
      await loadMembers();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setActionUserId(null);
    }
  };

  const removeLeader = async (userId: number) => {
    setActionUserId(userId);
    try {
      await apiDelete(`/social/spaces/${space.id}/leaders/${userId}`);
      await loadMembers();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setActionUserId(null);
    }
  };

  const appointBroadcastAdmin = async () => {
    if (!broadcastSpaceId || !adminUserId.trim()) return;
    setActionUserId(Number(adminUserId));
    try {
      await apiPost(`/social/broadcast-spaces/${broadcastSpaceId}/admins`, {
        user_id: Number(adminUserId),
        role: "publisher",
      });
      setAdminUserId("");
      await loadMembers();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در انتصاب");
    } finally {
      setActionUserId(null);
    }
  };

  const removeBroadcastAdmin = async (userId: number) => {
    if (!broadcastSpaceId) return;
    setActionUserId(userId);
    try {
      await apiDelete(`/social/broadcast-spaces/${broadcastSpaceId}/admins/${userId}`);
      await loadMembers();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setActionUserId(null);
    }
  };

  const handleToggleActive = async () => {
    if (!onToggleActive) return;
    setToggling(true);
    try {
      await onToggleActive();
      setMenuOpen(false);
    } finally {
      setToggling(false);
    }
  };

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[70] flex items-end justify-center bg-black/45 sm:items-center sm:p-4" onClick={onClose}>
      <div
        className="flex h-[min(92dvh,720px)] w-full max-w-lg flex-col overflow-hidden rounded-t-3xl bg-white shadow-2xl sm:rounded-3xl"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Toolbar */}
        <div className="flex items-center justify-between border-b border-slate-100 px-3 py-2.5 pt-[max(0.5rem,env(safe-area-inset-top))]">
          <button
            type="button"
            onClick={onClose}
            className="flex h-9 w-9 items-center justify-center rounded-full text-slate-500 hover:bg-slate-100"
            aria-label="بستن"
          >
            ×
          </button>
          <div className="flex items-center gap-1">
            <button
              type="button"
              className="flex h-9 w-9 items-center justify-center rounded-full text-slate-500 hover:bg-slate-100"
              title="تنظیمات"
              onClick={() => setMenuOpen((v) => !v)}
            >
              <svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor" aria-hidden>
                <path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z" />
              </svg>
            </button>
            <div className="relative">
              <button
                type="button"
                className="flex h-9 w-9 items-center justify-center rounded-full text-slate-500 hover:bg-slate-100"
                aria-label="منو"
                onClick={() => setMenuOpen((v) => !v)}
              >
                ⋮
              </button>
              {menuOpen ? (
                <>
                  <div className="fixed inset-0 z-10" onClick={() => setMenuOpen(false)} aria-hidden />
                  <div className="absolute left-0 top-full z-20 mt-1 min-w-[180px] overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-xl">
                    <button
                      type="button"
                      className="block w-full px-4 py-2.5 text-right text-sm hover:bg-slate-50"
                      onClick={() => {
                        setMenuOpen(false);
                        onOpenMessageSearch?.();
                        onClose();
                      }}
                    >
                      جستجوی پیام
                    </button>
                    {space.linked_space_id ? (
                      <button
                        type="button"
                        className="block w-full px-4 py-2.5 text-right text-sm hover:bg-slate-50"
                        onClick={() => {
                          setMenuOpen(false);
                          onSwitchPair?.();
                          onClose();
                        }}
                      >
                        {space.type === "group" ? "رفتن به کانال" : "رفتن به گروه"}
                      </button>
                    ) : null}
                    {space.can_roll_call && scheduleId ? (
                      <button
                        type="button"
                        className="block w-full px-4 py-2.5 text-right text-sm hover:bg-slate-50"
                        onClick={() => {
                          setMenuOpen(false);
                          onOpenRollCall?.();
                          onClose();
                        }}
                      >
                        حضور آنلاین
                      </button>
                    ) : null}
                    {space.can_toggle_active ? (
                      <button
                        type="button"
                        disabled={toggling}
                        className="block w-full px-4 py-2.5 text-right text-sm hover:bg-slate-50 disabled:opacity-50"
                        onClick={() => void handleToggleActive()}
                      >
                        {space.is_active === false ? "فعال کردن" : "غیرفعال کردن"}
                      </button>
                    ) : null}
                  </div>
                </>
              ) : null}
            </div>
          </div>
        </div>

        {/* Profile header */}
        <div className="border-b border-slate-100 px-4 pb-4 pt-2">
          <div className="flex items-start gap-3">
            <div className="relative shrink-0">
              <SubjectAvatar
                name={avatarName}
                imageUrl={space.subject_image_url}
                size="xl"
                className="rounded-full ring-4 ring-slate-50"
              />
              <span
                className={`absolute -bottom-0.5 -left-0.5 rounded-md px-1.5 py-0.5 text-[10px] font-bold text-white shadow ${
                  space.type === "group" ? "bg-teal-600" : "bg-sky-500"
                }`}
              >
                {space.type === "group" ? "گروه" : "کانال"}
              </span>
            </div>
            <div className="min-w-0 flex-1 pt-1">
              <h2 className="text-lg font-bold text-slate-900">{space.title}</h2>
              <p className="mt-0.5 text-sm text-slate-500">
                {space.members_count ?? members.length} عضو · {typeLabel}
              </p>
              {space.subject_name ? (
                <p className="mt-1 text-xs text-slate-400">
                  {space.subject_name}
                  {space.class_code ? ` · ${space.class_code}` : ""}
                </p>
              ) : null}
              {space.is_verified ? (
                <p className="mt-1 text-xs font-medium text-sky-600">✓ فضای تأییدشده</p>
              ) : null}
            </div>
          </div>

          {pinned ? (
            <div className="mt-3 flex items-center gap-2 rounded-xl bg-teal-50 px-3 py-2 text-xs text-teal-900">
              <span>📌</span>
              <span className="line-clamp-2">{pinned.body}</span>
            </div>
          ) : null}
        </div>

        {/* Quick actions */}
        <div className="space-y-1 border-b border-slate-100 px-4 py-2">
          <div className="flex items-center justify-between rounded-xl px-1 py-2">
            <span className="text-sm font-medium text-slate-700">اعلان‌ها</span>
            <button
              type="button"
              role="switch"
              aria-checked={!muted}
              onClick={() => {
                const next = !muted;
                setMuted(next);
                writeMuted(space.id, next);
              }}
              className={`relative h-7 w-12 rounded-full transition ${muted ? "bg-slate-300" : "bg-teal-500"}`}
            >
              <span
                className={`absolute top-0.5 h-6 w-6 rounded-full bg-white shadow transition ${muted ? "left-0.5" : "left-[22px]"}`}
              />
            </button>
          </div>

          {space.linked_space_id ? (
            <button
              type="button"
              onClick={() => {
                onSwitchPair?.();
                onClose();
              }}
              className="flex w-full items-center gap-2 rounded-xl px-1 py-2 text-right text-sm font-medium text-teal-700 hover:bg-teal-50"
            >
              <span className="text-lg">{space.type === "group" ? "📢" : "👥"}</span>
              {space.type === "group" ? "مشاهده کانال کلاس" : "مشاهده گروه کلاس"}
            </button>
          ) : null}
        </div>

        {/* Tabs */}
        <div className="flex gap-1 overflow-x-auto border-b border-slate-100 px-2">
          {TABS.map((t) => {
            const active = tab === t.id;
            const count = tabCount[t.id];
            return (
              <button
                key={t.id}
                type="button"
                onClick={() => setTab(t.id)}
                className={`relative shrink-0 px-3 py-3 text-xs font-semibold transition ${
                  active ? "text-teal-700" : "text-slate-500 hover:text-slate-700"
                }`}
              >
                {t.label}
                {count > 0 && t.id !== "members" ? (
                  <span className="mr-1 text-[10px] text-slate-400">{count}</span>
                ) : null}
                {active ? <span className="absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-teal-600" /> : null}
              </button>
            );
          })}
        </div>

        {/* Tab content */}
        <div className="min-h-0 flex-1 overflow-y-auto">
          {error ? <div className="mx-4 mt-3 rounded-xl bg-rose-50 px-3 py-2 text-xs text-rose-700">{error}</div> : null}

          {tab === "members" ? (
            <div className="p-3">
              {isBroadcast ? (
                <>
                  <p className="mb-3 text-xs text-slate-500">
                    {space.kind === "system_announcement"
                      ? "کانال یک‌طرفه سامانه — فقط خواندنی."
                      : "مدیران و ناشران می‌توانند در این کانال مطلب بگذارند."}
                  </p>
                  {space.can_appoint_admins ? (
                    <div className="mb-3 flex gap-2">
                      <input
                        value={adminUserId}
                        onChange={(e) => setAdminUserId(e.target.value)}
                        placeholder="شناسه کاربر"
                        className="min-w-0 flex-1 rounded-xl border border-slate-200 px-3 py-2 text-sm outline-none focus:border-teal-400"
                      />
                      <button
                        type="button"
                        onClick={() => void appointBroadcastAdmin()}
                        disabled={!adminUserId.trim() || actionUserId !== null}
                        className="rounded-xl bg-teal-600 px-3 py-2 text-xs font-bold text-white disabled:opacity-50"
                      >
                        افزودن ناشر
                      </button>
                    </div>
                  ) : null}
                  {loadingMembers ? (
                    <div className="py-8 text-center text-sm text-slate-400">در حال بارگذاری…</div>
                  ) : (
                    <ul className="divide-y divide-slate-100">
                      {broadcastAdmins.map((m) => (
                        <li key={m.user_id} className="flex items-center gap-3 py-3">
                          <MemberAvatar name={m.name || `#${m.user_id}`} />
                          <div className="min-w-0 flex-1">
                            <div className="truncate font-medium text-slate-900">{m.name || `#${m.user_id}`}</div>
                            <div className="text-xs text-slate-400">
                              {m.role === "admin" ? "ادمین" : "ناشر"}
                            </div>
                          </div>
                          {space.can_appoint_admins ? (
                            <button
                              type="button"
                              disabled={actionUserId === m.user_id}
                              onClick={() => void removeBroadcastAdmin(m.user_id)}
                              className="text-[10px] font-semibold text-rose-600 hover:underline disabled:opacity-50"
                            >
                              حذف
                            </button>
                          ) : null}
                        </li>
                      ))}
                      {!broadcastAdmins.length ? (
                        <li className="py-8 text-center text-sm text-slate-400">
                          {space.can_appoint_admins ? "هنوز ناشری منصوب نشده" : "لیست خالی است"}
                        </li>
                      ) : null}
                    </ul>
                  )}
                </>
              ) : (
                <>
              <div className="mb-3 flex items-center gap-2 rounded-xl bg-slate-100/90 px-3 py-2">
                <svg viewBox="0 0 24 24" className="h-4 w-4 shrink-0 text-slate-400" fill="currentColor" aria-hidden>
                  <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
                </svg>
                <input
                  value={memberQ}
                  onChange={(e) => setMemberQ(e.target.value)}
                  placeholder="جستجوی اعضا"
                  className="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-slate-400"
                />
              </div>

              {loadingMembers ? (
                <div className="py-8 text-center text-sm text-slate-400">در حال بارگذاری…</div>
              ) : (
                <ul className="divide-y divide-slate-100">
                  {filteredMembers.map((m) => (
                    <li key={m.user_id} className="flex items-center gap-3 py-3">
                      <MemberAvatar name={m.name || `#${m.user_id}`} />
                      <div className="min-w-0 flex-1">
                        <div className="truncate font-medium text-slate-900">{m.name || `#${m.user_id}`}</div>
                        <div className="text-xs text-slate-400">
                          {m.role === "teacher_admin" ? "مدیر کلاس" : m.role === "student_leader" ? "سرگروه" : "عضو"}
                        </div>
                      </div>
                      <div className="flex shrink-0 flex-col items-end gap-1">
                        {m.role_label ? (
                          <span className="rounded-md bg-teal-50 px-2 py-0.5 text-[10px] font-bold text-teal-700">
                            {m.role_label}
                          </span>
                        ) : null}
                        {space.can_appoint_leader && space.type === "group" ? (
                          m.role === "member" ? (
                            <button
                              type="button"
                              disabled={actionUserId === m.user_id}
                              onClick={() => void appointLeader(m.user_id)}
                              className="text-[10px] font-semibold text-teal-600 hover:underline disabled:opacity-50"
                            >
                              سرگروه کن
                            </button>
                          ) : m.role === "student_leader" ? (
                            <button
                              type="button"
                              disabled={actionUserId === m.user_id}
                              onClick={() => void removeLeader(m.user_id)}
                              className="text-[10px] font-semibold text-rose-600 hover:underline disabled:opacity-50"
                            >
                              حذف سرگروه
                            </button>
                          ) : null
                        ) : null}
                      </div>
                    </li>
                  ))}
                  {!filteredMembers.length ? (
                    <li className="py-8 text-center text-sm text-slate-400">عضوی یافت نشد</li>
                  ) : null}
                </ul>
              )}
                </>
              )}
            </div>
          ) : null}

          {tab === "images" ? (
            <MediaTab loading={loadingShared} empty="تصویری یافت نشد" hasItems={!!shared?.images.length}>
              <div className="grid grid-cols-3 gap-1 p-2">
                {(shared?.images ?? []).map((item) => (
                  <a
                    key={item.id}
                    href={item.url}
                    target="_blank"
                    rel="noreferrer"
                    className="group relative aspect-square overflow-hidden rounded-lg bg-slate-100"
                  >
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img src={item.url} alt={item.original_name ?? ""} className="h-full w-full object-cover" />
                    <span className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/50 to-transparent p-1 text-[9px] text-white opacity-0 transition group-hover:opacity-100">
                      {item.author_name}
                    </span>
                  </a>
                ))}
              </div>
            </MediaTab>
          ) : null}

          {tab === "videos" ? (
            <MediaTab loading={loadingShared} empty="ویدیویی یافت نشد" hasItems={!!shared?.videos.length}>
              <div className="space-y-2 p-3">
                {(shared?.videos ?? []).map((item) => (
                  <a
                    key={item.id}
                    href={item.url}
                    target="_blank"
                    rel="noreferrer"
                    className="flex items-center gap-3 rounded-xl border border-slate-100 p-2 hover:bg-slate-50"
                  >
                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-violet-100 text-violet-600">
                      ▶
                    </div>
                    <div className="min-w-0 flex-1">
                      <div className="truncate text-sm font-medium">{item.original_name}</div>
                      <div className="text-xs text-slate-400">
                        {formatSize(item.size_bytes)} · {formatDate(item.created_at)}
                      </div>
                    </div>
                  </a>
                ))}
              </div>
            </MediaTab>
          ) : null}

          {tab === "files" ? (
            <MediaTab loading={loadingShared} empty="فایلی یافت نشد" hasItems={!!shared?.files.length}>
              <FileList items={shared?.files ?? []} />
            </MediaTab>
          ) : null}

          {tab === "audio" ? (
            <MediaTab loading={loadingShared} empty="فایل صوتی یافت نشد" hasItems={!!shared?.audio.length}>
              <FileList items={shared?.audio ?? []} icon="🎵" />
            </MediaTab>
          ) : null}

          {tab === "links" ? (
            <MediaTab loading={loadingShared} empty="پیوندی یافت نشد" hasItems={!!shared?.links.length}>
              <div className="space-y-2 p-3">
                {(shared?.links ?? []).map((item) => (
                  <a
                    key={`${item.post_id}-${item.href}`}
                    href={item.href}
                    target="_blank"
                    rel="noreferrer"
                    className="block rounded-xl border border-slate-100 p-3 hover:bg-slate-50"
                  >
                    <div className="truncate text-sm font-medium text-teal-700">{item.title}</div>
                    <div className="mt-1 truncate text-xs text-slate-400">{item.href}</div>
                    <div className="mt-1 text-[10px] text-slate-400">
                      {item.author_name} · {formatDate(item.created_at)}
                    </div>
                  </a>
                ))}
              </div>
            </MediaTab>
          ) : null}
        </div>
      </div>
    </div>
  );
}

function MediaTab({
  loading,
  empty,
  hasItems,
  children,
}: {
  loading: boolean;
  empty: string;
  hasItems: boolean;
  children: ReactNode;
}) {
  if (loading) return <div className="py-8 text-center text-sm text-slate-400">در حال بارگذاری…</div>;
  if (!hasItems) return <div className="py-8 text-center text-sm text-slate-400">{empty}</div>;
  return <>{children}</>;
}

function FileList({ items, icon = "📄" }: { items: SharedItem[]; icon?: string }) {
  return (
    <div className="space-y-2 p-3">
      {items.map((item) => (
        <a
          key={item.id}
          href={item.url}
          target="_blank"
          rel="noreferrer"
          className="flex items-center gap-3 rounded-xl border border-slate-100 p-2 hover:bg-slate-50"
        >
          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-sky-50 text-lg">
            {icon}
          </div>
          <div className="min-w-0 flex-1">
            <div className="truncate text-sm font-medium">{item.original_name}</div>
            <div className="text-xs text-slate-400">
              {formatSize(item.size_bytes)} · {item.author_name} · {formatDate(item.created_at)}
            </div>
          </div>
        </a>
      ))}
    </div>
  );
}