/* global React */
// ============================================================
// Section 3 — 我的合集 Collection
// ============================================================

function CollectionSection({ collection, setCollection }) {
  const { t, lang } = useI18n();
  const toast = useToast();
  const [selected, setSelected] = React.useState(new Set());
  const [filter, setFilter] = React.useState("all");
  const [guideOpen, setGuideOpen] = React.useState(false);
  const [guideTab, setGuideTab] = React.useState("tg");
  const [renameOpen, setRenameOpen] = React.useState(false);
  const [editingId, setEditingId] = React.useState(null); // 哪张卡正在改名
  const [, setManifestTick] = React.useState(0);

  // 启动加载 manifest（如果 quick 还没访问过）
  React.useEffect(() => {
    loadManifests().then(() => setManifestTick((n) => n + 1));
  }, []);

  // Allow Quick to rename a fav after saving
  React.useEffect(() => {
    window.__pkRenameCollection = (id, name) => {
      setCollection((c) => c.map((i) => i.id === id ? { ...i, caption: name } : i));
    };
    return () => { delete window.__pkRenameCollection; };
  }, [setCollection]);

  const filterItems = [
    { value: "all",    label: t("col.filter.all") },
    { value: "recent", label: t("col.filter.recent") },
    { value: "section",label: t("col.filter.section") },
  ];

  const items = React.useMemo(() => {
    let list = collection;
    if (filter === "recent") list = [...list].reverse().slice(0, 8);
    return list;
  }, [collection, filter]);

  const toggle = (id) => {
    setSelected((s) => {
      const ns = new Set(s);
      if (ns.has(id)) ns.delete(id); else ns.add(id);
      return ns;
    });
  };
  const selectAll = () => setSelected(new Set(items.map((i) => i.id)));
  const clear = () => setSelected(new Set());
  const removeSelected = () => {
    setCollection((c) => c.filter((i) => !selected.has(i.id)));
    clear();
    toast.push(lang === "zh" ? "已删除" : "Deleted", "success");
  };

  // 用 JSZip 真 ZIP 打包（之前只 toast 显示"已打包"是假的）
  const onZip = async () => {
    if (typeof window.JSZip !== 'function') {
      toast.push(lang === "zh" ? "ZIP 库未加载" : "JSZip not loaded", "error");
      return;
    }
    const items = collection.filter((it) => selected.has(it.id));
    if (!items.length) return;
    toast.push(lang === "zh" ? `打包 ${items.length} 张…` : `Packing ${items.length}…`);
    try {
      const zip = new window.JSZip();
      for (let i = 0; i < items.length; i++) {
        const blob = await composeItemBlob(items[i]);
        if (blob) {
          const name = (items[i].caption || items[i].traits?.text || `panda-${i+1}`).replace(/[^\w一-龥-]/g, '_').slice(0, 40);
          zip.file(`${String(i+1).padStart(2,'0')}-${name}.png`, blob);
        }
      }
      // ZIP 用 data URL（base64）下载 — 绕过 Chrome 对 HTTP 站点 zip blob URL 的 "已阻止不安全的下载" 警告
      // FileReader.readAsDataURL 比 blob URL 更通过 Chrome 安全策略
      const zipBlob = await zip.generateAsync({ type: 'blob' });
      const fileName = `pandakit-pack-${Date.now()}.zip`;
      const reader = new FileReader();
      reader.onloadend = () => {
        const a = document.createElement('a');
        a.href = reader.result; // data:application/zip;base64,...
        a.download = fileName;
        a.style.display = 'none';
        document.body.appendChild(a); a.click();
        setTimeout(() => document.body.removeChild(a), 100);
        toast.push(lang === "zh" ? `已打包 ${items.length} 张 ZIP` : `Packed ${items.length} as ZIP`, "success");
      };
      reader.onerror = () => {
        // data URL 失败兜底回 blob URL
        const url = URL.createObjectURL(zipBlob);
        const a = document.createElement('a');
        a.href = url; a.download = fileName; a.style.display = 'none';
        document.body.appendChild(a); a.click();
        setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100);
        toast.push(lang === "zh" ? `下载已开始（如被拦截请点"保留"）` : `Download started (click "Keep" if blocked)`, "info");
      };
      reader.readAsDataURL(zipBlob);
    } catch (e) {
      console.error('[zip]', e);
      toast.push(lang === "zh" ? `打包失败: ${e.message}` : `Pack failed: ${e.message}`, "error");
    }
  };

  // 把单张 collection item 渲染到离屏 canvas → blob
  async function composeItemBlob(item) {
    const shell = findShell(item.traits?.shellId);
    const face = findFace(item.traits?.faceId);
    if (!shell || !face) return null;
    const [shellImg, maskImg, pmaskImg, faceImg] = await Promise.all([
      window.loadImage('shells/' + shell.file),
      window.loadImage('shells/' + shell.mask),
      window.loadImage('shells/' + shell.pmask),
      window.loadImage('faces/' + face.file),
    ]);
    const canvas = document.createElement('canvas');
    window.drawComposite({
      canvas, shellImg, maskImg, pmaskImg, faceImg,
      bbox: shell.bbox,
      text: item.traits.text || '',
      font: item.traits.font || 'kuaile',
      bg: '#FFFFFF',
      faceRotation: item.traits.faceRotation || 0,
      faceFlipX: !!item.traits.faceFlipX,
      faceFlipY: !!item.traits.faceFlipY,
      contentCenter: face.content_center,
      size: 1024,
    });
    return new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
  }

  return (
    <div style={{ position: "relative", paddingBottom: selected.size > 0 ? 100 : 24 }}>
      <SectionHeader
        title={t("col.title")}
        subtitle={t("col.subtitle")}
        right={
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <Tabs variant="pill" value={filter} onChange={setFilter} items={filterItems} />
            <Button variant="secondary" size="sm" leftIcon={<Icon name="package" size={14} />} onClick={() => setGuideOpen(true)}>
              {t("col.guide")}
            </Button>
          </div>
        }
      />

      {items.length === 0 ? (
        <div className="pk-card" style={{ padding: "60px 24px", textAlign: "center" }}>
          <img src="assets/empty-collection.png" alt="empty" draggable={false}
            style={{ width: 220, maxWidth: "70%", display: "block", margin: "0 auto 20px", userSelect: "none" }} />
          <h3 style={{ fontSize: 20, fontWeight: 700, margin: 0, marginBottom: 8, color: "var(--text)" }}>
            {t("col.empty.title")}
          </h3>
          <p style={{ fontSize: 14, color: "var(--text-soft)", maxWidth: 380, margin: "0 auto", lineHeight: 1.7 }}>
            {t("col.empty.body")}
          </p>
        </div>
      ) : (
        <div className="pk-card" style={{
          padding: "32px 28px",
          background: "linear-gradient(180deg, #FAF7F2 0%, #FFFFFF 100%)",
          backgroundImage: "radial-gradient(circle at 12px 12px, rgba(40,34,28,0.04) 1px, transparent 1px)",
          backgroundSize: "24px 24px",
        }}>
          <div className="pk-polaroid-grid" style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
            gap: "32px 22px",
            justifyItems: "center",
          }}>
            {items.map((it, i) => {
              const tilt = it.tilt ?? ((((it.id || i).toString().charCodeAt(0) % 10) - 5) * 0.8);
              const w = 170 + (i % 3) * 8;
              const isSel = selected.has(it.id);
              return (
                <PolaroidFrame
                  key={it.id}
                  tilt={tilt}
                  width={w}
                  caption={
                    <span style={{ position: "relative", display: "inline-flex", alignItems: "center", gap: 6 }}>
                      <span>{it.caption || (it.traits?.text || "")}</span>
                      <Tooltip content={lang === "zh" ? "改名" : "Rename"} side="top" variant="light">
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            setEditingId(editingId === it.id ? null : it.id);
                          }}
                          aria-label={lang === "zh" ? "改名" : "Rename"}
                          className="pk-focus-ring"
                          style={{
                            width: 22, height: 22, padding: 0,
                            border: "1px solid transparent", background: "transparent",
                            color: "var(--text-soft)", cursor: "pointer",
                            borderRadius: 6,
                            display: "inline-flex", alignItems: "center", justifyContent: "center",
                            opacity: 0.7, transition: "all 160ms var(--ease)",
                          }}
                          onMouseEnter={(e) => { e.currentTarget.style.opacity = "1"; e.currentTarget.style.background = "var(--bg-soft)"; }}
                          onMouseLeave={(e) => { e.currentTarget.style.opacity = "0.7"; e.currentTarget.style.background = "transparent"; }}
                        >
                          <Icon name="brush" size={12} />
                        </button>
                      </Tooltip>
                      <NamePopover
                        open={editingId === it.id}
                        onClose={() => setEditingId(null)}
                        onSave={(name) => {
                          if (name) {
                            setCollection((c) => c.map((x) => x.id === it.id ? { ...x, caption: name } : x));
                            toast.push(lang === "zh" ? "已改名" : "Renamed", "success");
                          }
                          setEditingId(null);
                        }}
                        anchor="bottom"
                        title={lang === "zh" ? "改名" : "Rename"}
                        placeholder={lang === "zh" ? "起个名字…" : "Name it…"}
                        initial={it.caption || (it.traits?.text || "")}
                      />
                    </span>
                  }
                  selected={isSel}
                  onClick={() => toggle(it.id)}
                  onSelectToggle={() => toggle(it.id)}
                >
                  {(() => {
                    const shell = findShell(it.traits?.shellId);
                    const face = findFace(it.traits?.faceId);
                    if (!shell || !face) {
                      return <div style={{ width: w - 24, height: w - 24, background: '#FAF7F2', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-faint)', fontSize: 11 }}>…</div>;
                    }
                    return (
                      <PandaCanvas
                        shell={shell}
                        face={face}
                        text={it.traits.text}
                        filter={it.traits.filter}
                        font={it.traits.font}
                        bg={it.traits.bg}
                        faceRotation={it.traits.faceRotation || 0}
                        faceFlipX={!!it.traits.faceFlipX}
                        faceFlipY={!!it.traits.faceFlipY}
                        size={w - 24}
                        exportSize={512}
                      />
                    );
                  })()}
                </PolaroidFrame>
              );
            })}
          </div>
        </div>
      )}

      {/* Floating action bar — wrapper for centering, inner for animation */}
      {selected.size > 0 && (
        <div style={{ position: "fixed", bottom: 24, left: "50%", transform: "translateX(-50%)", zIndex: 90 }}>
        <div style={{
          background: "var(--card)", borderRadius: 16,
          boxShadow: "var(--shadow-lg)", border: "1px solid var(--border)",
          padding: "10px 14px",
          display: "flex", alignItems: "center", gap: 10,
          animation: "pk-bar-in 240ms var(--ease)",
        }}>
          <span style={{ fontSize: 13, fontWeight: 600, paddingLeft: 8, paddingRight: 4 }}>
            {t("col.selected", { n: selected.size })}
          </span>
          <div style={{ width: 1, height: 22, background: "var(--border)" }} />
          <Button variant="ghost" size="sm" onClick={selectAll}>{t("col.action.all")}</Button>
          <Button variant="ghost" size="sm" onClick={clear}>{t("col.action.none")}</Button>
          <div style={{ width: 1, height: 22, background: "var(--border)" }} />
          <Button variant="secondary" size="sm" leftIcon={<Icon name="package" size={14} />} onClick={onZip}>
            {t("col.action.zip")}
          </Button>
          <Button variant="primary" size="sm" leftIcon={<Icon name="send" size={14} />} onClick={() => { setGuideOpen(true); setGuideTab("tg"); }}>
            {t("col.action.tg")}
          </Button>
          <Button variant="secondary" size="sm" onClick={() => { setGuideOpen(true); setGuideTab("wx"); }}>
            {t("col.action.wx")}
          </Button>
          <div style={{ width: 1, height: 22, background: "var(--border)" }} />
          <Button variant="danger" size="sm" leftIcon={<Icon name="trash" size={14} />} onClick={removeSelected}>
            {t("col.action.delete")}
          </Button>
          {selected.size === 1 && (
            <div style={{ position: "relative" }}>
              <Button variant="secondary" size="sm" leftIcon={<Icon name="brush" size={14} />}
                onClick={() => setRenameOpen((o) => !o)}>
                {t("col.rename")}
              </Button>
              <NamePopover
                open={renameOpen}
                anchor="top"
                onClose={() => setRenameOpen(false)}
                onSave={(name) => {
                  const id = [...selected][0];
                  setCollection((c) => c.map((i) => i.id === id ? { ...i, caption: name } : i));
                  setRenameOpen(false);
                  toast.push(lang === "zh" ? "已改名" : "Renamed", "success");
                }}
                title={t("col.rename")}
                placeholder={t("col.rename.placeholder")}
                initial={collection.find((i) => i.id === [...selected][0])?.caption || ""}
              />
            </div>
          )}
        </div>
        </div>
      )}

      {/* Guide drawer */}
      {guideOpen && (
        <GuideDrawer onClose={() => setGuideOpen(false)} tab={guideTab} setTab={setGuideTab} />
      )}
    </div>
  );
}

function GuideDrawer({ onClose, tab, setTab }) {
  const { t, lang } = useI18n();
  const toast = useToast();
  // 真实流程（基于 telegram.org 官方文档 + WeChat 表情开放平台 sticker.weixin.qq.com 实际规则）
  const tgSteps = lang === "zh"
    ? [
      { title: "在 Telegram 找 @Stickers", body: "搜索栏输入 @Stickers（带 ✓ 蓝勾的官方机器人）。" },
      { title: "/newpack 创建静态包",     body: "（动态包用 /newanimated）。Bot 会问包名（用户能看到）。" },
      { title: "逐张上传 PNG",            body: "**512×512 透明底 PNG，单张 ≤ 512 KB**。一张图配一个 emoji 标签——不能直接拖整包，必须一张一个 emoji。" },
      { title: "/publish 发布",           body: "Bot 让你设 short_name（英文，唯一，作链接 t.me/addstickers/<name>）。任何人点链接即可加进自己 Telegram。" },
    ]
    : [
      { title: "Find @Stickers in Telegram", body: "Search @Stickers in the search bar (the verified bot, blue checkmark)." },
      { title: "/newpack to create a static pack", body: "Use /newanimated for animated packs. The bot asks for a pack title (users will see this)." },
      { title: "Upload one PNG at a time", body: "**512×512 transparent PNG, ≤ 512 KB each**. One emoji tag per sticker — you cannot bulk-upload, each image needs its own emoji." },
      { title: "/publish to release",      body: "Bot asks for a short_name (English, unique). The pack is shareable at t.me/addstickers/<short_name>." },
    ];
  const wxSteps = lang === "zh"
    ? [
      { title: "打开「表情开放平台」", body: "电脑浏览器开 sticker.weixin.qq.com，扫码登录。" },
      { title: "新建表情包",          body: "「我要投稿」→ 选「主题表情」。需要原创证明（手稿 / 设计稿）。" },
      { title: "上传图片",            body: "**16 张 / 24 张 / 全 8 张倍数**。每张 240×240 透明底 PNG，≤ 200 KB。需要 cover、banner、聊天窗 banner 各一张。" },
      { title: "提交审核",            body: "审核 5-10 个工作日。通过后用户能在表情商店搜到。" },
    ]
    : [
      { title: "Open WeChat Sticker Platform", body: "Visit sticker.weixin.qq.com on desktop, scan QR to log in." },
      { title: "Submit a new pack",  body: "「我要投稿」 → pick 「主题表情」. Originality proof required (sketch / design source)." },
      { title: "Upload images",       body: "**16 or 24 stickers (multiples of 8)**. Each 240×240 transparent PNG, ≤ 200 KB. Plus cover, banner, and chat banner." },
      { title: "Wait for review",     body: "Review takes 5-10 business days. Approved packs appear in the in-chat sticker store." },
    ];
  const steps = tab === "tg" ? tgSteps : wxSteps;
  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 200,
        background: "rgba(40,34,28,0.32)",
        animation: "pk-fade-in 180ms var(--ease)",
        display: "flex", justifyContent: "flex-end",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: "min(440px, 92vw)", height: "100%",
          background: "var(--card)", borderLeft: "1px solid var(--border)",
          padding: 24, overflowY: "auto",
          animation: "pk-slide-in-right 240ms var(--ease)",
          display: "flex", flexDirection: "column",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
          <h3 style={{ margin: 0, fontSize: 18, fontWeight: 700, display: "flex", alignItems: "center", gap: 8 }}>
            <Icon name="package" size={18} /> {t("col.guide")}
          </h3>
          <IconButton label="close" onClick={onClose}><Icon name="x" /></IconButton>
        </div>

        <Tabs
          variant="pill"
          value={tab} onChange={setTab}
          items={[
            { value: "tg", label: "Telegram" },
            { value: "wx", label: lang === "zh" ? "微信" : "WeChat" },
          ]}
        />

        <div style={{ marginTop: 18, marginBottom: 18 }}>
          <Button variant="primary" leftIcon={<Icon name="link" size={16} />} onClick={() => toast.push(lang === "zh" ? "正在打包并跳转…" : "Packing & opening…")} style={{ width: "100%" }}>
            {tab === "tg" ? t("col.guide.tg.cta") : (lang === "zh" ? "一键跳转微信表情" : "Open WeChat stickers")}
          </Button>
        </div>

        <div>
          {steps.map((s, i) => (
            <StepCard key={i} n={i + 1} title={s.title} body={s.body} />
          ))}
        </div>

        <div style={{
          marginTop: 16, padding: "12px 14px",
          background: "var(--bg-soft)", borderRadius: 12,
          fontSize: 12, color: "var(--text-soft)",
          display: "flex", alignItems: "flex-start", gap: 8, lineHeight: 1.5,
        }}>
          <Icon name="info" size={14} style={{ marginTop: 2 }} />
          <span>{lang === "zh" ? "格式要求：Telegram 需要 512×512 透明底 PNG，每张不超过 512 KB。微信审核要求人物原创或合理使用。" : "Telegram requires 512×512 transparent PNGs, ≤512 KB each."}</span>
        </div>
      </div>
    </div>
  );
}

window.CollectionSection = CollectionSection;