// Shared helpers for Ta说 UI kits — inline SVG icons (Lucide paths) + brand logo.
// Inline icons avoid CDN/timing issues so kits render reliably.

const TA_ICONS = {
  "upload": '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>',
  "image-up": '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>',
  "image": '<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/>',
  "file-image": '<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/>',
  "scan-search": '<path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="11.5" cy="11.5" r="2.5"/><path d="m15 15-1.5-1.5"/>',
  "messages-square": '<path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/>',
  "sparkles": '<path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z"/><path d="M19 15v4"/><path d="M21 17h-4"/>',
  "gift": '<polyline points="20 12 20 22 4 22 4 12"/><rect x="2" y="7" width="20" height="5"/><line x1="12" y1="22" x2="12" y2="7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/>',
  "shield-check": '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
  "lock": '<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
  "mail": '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>',
  "sun": '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>',
  "moon": '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z"/>',
  "ticket": '<path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"/><path d="M13 5v2M13 17v2M13 11v2"/>',
  "arrow-left": '<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>',
  "arrow-right": '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
  "trash-2": '<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>',
  "eye-off": '<path d="M9.88 9.88a3 3 0 0 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" y1="2" x2="22" y2="22"/>',
  "panel-left": '<rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/>',
  "plus": '<path d="M12 5v14M5 12h14"/>',
  "settings": '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
  "clock": '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
  "history": '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/>',
  "log-out": '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>',
  "user": '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
  "check": '<polyline points="20 6 9 17 4 12"/>',
  "x": '<path d="M18 6 6 18M6 6l12 12"/>',
  "chevron-right": '<path d="m9 18 6-6-6-6"/>',
  "chevron-down": '<path d="m6 9 6 6 6-6"/>',
  "copy": '<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>',
  "refresh-cw": '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
  "credit-card": '<rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/>',
  "send": '<path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>',
  "search": '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
  "more-horizontal": '<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>',
  "zap": '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>',
  "heart": '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.49 4.04 3 5.5l7 7Z"/>',
  "wallet": '<path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"/>',
  "info": '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>',
  "qr-code": '<rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3"/><path d="M21 21v.01"/><path d="M12 7v3a2 2 0 0 1-2 2H7"/><path d="M3 12h.01"/><path d="M12 3h.01"/><path d="M12 16v.01"/><path d="M16 12h1"/><path d="M21 12v.01"/><path d="M12 21v-1"/>',
  "message-circle": '<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>',
  "star": '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
  "send-horizontal": '<path d="M3.7 3.3a1 1 0 0 0-1.4 1.2L4.6 11 14 12l-9.4 1L2.3 19.5a1 1 0 0 0 1.4 1.2l18-8.5a1 1 0 0 0 0-1.8z"/>',
  "image-plus": '<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M16 5h6M19 2v6"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/>',
  "clipboard": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>',
  "thumbs-up": '<path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/>',
  "thumbs-down": '<path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"/>',
  "alert-triangle": '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
  "badge-check": '<path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/>',
  "map-pin": '<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>',
  "calendar": '<path d="M8 2v4M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>',
  "user-cog": '<circle cx="10" cy="8" r="4"/><path d="M10 14a6 6 0 0 0-6 6"/><circle cx="18" cy="16" r="3"/><path d="M18 12.5V14M18 18v1.5M21 14l-1.3.75M16.3 17.25 15 18M21 18l-1.3-.75M16.3 14.75 15 14"/>',
  "external-link": '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
};

function Icon({ name, size = 20, strokeWidth = 2, color = "currentColor", style, ...rest }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
      style={{ display: "block", flex: "none", ...style }}
      dangerouslySetInnerHTML={{ __html: TA_ICONS[name] || "" }} {...rest} />
  );
}

// Standardized brand logo — the "艺术字" treatment (gradient "Ta" + tilted 说 bubble chip).
// Auto-adapts to light / dark mode via [data-theme] (injected once).
if (typeof document !== "undefined" && !document.getElementById("ta-logo-css")) {
  const s = document.createElement("style");
  s.id = "ta-logo-css";
  s.textContent = `
.ta-logo{display:inline-flex;align-items:center;font-weight:700;letter-spacing:-0.03em;line-height:1;white-space:nowrap;vertical-align:middle;}
.ta-logo__word{background:linear-gradient(135deg,#f3a98e 0%,#e8765a 45%,#b4452f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ta-logo__chip{display:inline-flex;align-items:center;justify-content:center;background:var(--terracotta-500);color:#fff;transform:rotate(-4deg);box-shadow:0 3px 8px rgba(232,118,90,0.32);}
[data-theme="dark"] .ta-logo__word{background:linear-gradient(135deg,#fbd7cd 0%,#f3a98e 50%,#ee8a6b 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
[data-theme="dark"] .ta-logo__chip{background:var(--terracotta-400);color:var(--ink-950);box-shadow:0 3px 10px rgba(238,138,107,0.45);}
`;
  document.head.appendChild(s);
}

function Logo({ size = 30 }) {
  const chip = Math.round(size * 1.04);
  const r = Math.round(size * 0.32);
  return (
    <span className="ta-logo" style={{ fontSize: size }}>
      <span className="ta-logo__word">Ta</span>
      <span className="ta-logo__chip" style={{
        width: chip, height: chip, fontSize: Math.round(size * 0.66), marginLeft: Math.round(size * 0.1),
        borderRadius: r + "px " + r + "px " + r + "px " + Math.round(size * 0.12) + "px",
      }}>说</span>
    </span>
  );
}

// Customer-service WeChat contacts. A WeChat personal QR encodes an opaque
// add-friend token (not a searchable 微信号), so users scan the image to add.
const TA_WECHAT = [
  { name: "无妄", img: "./assets/wx-wuwang.png" },
  { name: "清枫", img: "./assets/wx-qingfeng.jpg" },
  { name: "Jack Zhang", img: "./assets/wx-jack.jpg" },
];

// Real WeChat QR image in a white card (users scan it to add the customer service).
function WeChatQR({ src, size = 200 }) {
  return (
    <div style={{ width: size, background: "#fff", padding: 10, borderRadius: 14, boxShadow: "var(--shadow-sm)", boxSizing: "border-box" }}>
      <img src={src} alt="客服微信二维码" style={{ width: "100%", display: "block", borderRadius: 8 }} />
    </div>
  );
}

// Placeholder QR code (deterministic faux pattern). Kept for backward-compat; real
// contacts now use WeChatQR with a scanned image.
function FauxQR({ size = 168, seed = 7, fg = "#211c17" }) {
  const N = 25;
  let s = (seed * 1103515245 + 12345) >>> 0;
  const rnd = () => { s = (s * 1103515245 + 12345) >>> 0; return (s >>> 16) / 65535; };
  const cells = [];
  for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) {
    const finder = (x < 7 && y < 7) || (x >= N - 7 && y < 7) || (x < 7 && y >= N - 7);
    let on;
    if (finder) {
      const fx = x >= N - 7 ? x - (N - 7) : x;
      const fy = y >= N - 7 ? y - (N - 7) : y;
      on = fx === 0 || fx === 6 || fy === 0 || fy === 6 || (fx >= 2 && fx <= 4 && fy >= 2 && fy <= 4);
    } else { on = rnd() > 0.52; }
    cells.push(on);
  }
  return (
    <div style={{ width: size, height: size, background: "#fff", padding: size * 0.06, borderRadius: 14, boxSizing: "border-box", boxShadow: "var(--shadow-sm)" }}>
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${N}, 1fr)`, gridAutoRows: "1fr", width: "100%", height: "100%" }}>
        {cells.map((on, i) => <div key={i} style={{ background: on ? fg : "transparent" }} />)}
      </div>
    </div>
  );
}

// Shared 客服 contact dialog — pick a customer service, scan their WeChat QR.
function ContactDialog({ open, onClose, title = "联系客服", desc = "微信扫码添加客服，有任何问题随时联系。" }) {
  const DS = window.TaDesignSystem_e6b037;
  const [idx, setIdx] = React.useState(0);
  // Randomly pick a 客服 each time the dialog opens, so the three split the load.
  // The tabs still let the user switch if one is slow to respond.
  React.useEffect(() => { if (open) setIdx(Math.floor(Math.random() * window.TA_WECHAT.length)); }, [open]);
  if (!DS) return null;
  const { Dialog } = DS;
  const w = window.TA_WECHAT[idx];
  return (
    <Dialog open={open} onClose={onClose} title={title} description={desc}>
      <div style={{ display: "flex", gap: 8, marginBottom: 18 }}>
        {window.TA_WECHAT.map((c, i) => (
          <button key={c.name} onClick={() => setIdx(i)} style={{
            flex: 1, padding: "9px 6px", borderRadius: "var(--radius-md)", cursor: "pointer", fontSize: 13, fontWeight: 600,
            border: "1px solid " + (idx === i ? "var(--primary)" : "var(--border-default)"),
            background: idx === i ? "var(--primary-subtle)" : "var(--surface-card)",
            color: idx === i ? "var(--primary-active)" : "var(--text-secondary)",
          }}>{c.name}</button>
        ))}
      </div>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12, paddingBottom: 8 }}>
        <WeChatQR src={w.img} size={200} />
        <div style={{ fontSize: 15, fontWeight: 600 }}>{w.name}</div>
        <span style={{ fontSize: 12, color: "var(--text-tertiary)" }}>用微信扫一扫，添加客服</span>
      </div>
    </Dialog>
  );
}

// In-app "out of uses" dialog — shown when free uses run out (and from the
// account menu). No prices are listed on the site; to continue, users add 客服
// on WeChat (off-site) and redeem a card-key they receive in the 账户 page.
function PaywallDialog({ open, onClose, onRedeem }) {
  const DS = window.TaDesignSystem_e6b037;
  const [contact, setContact] = React.useState(false);
  if (!DS) return null;
  const { Dialog, Button } = DS;
  return (
    <>
      <Dialog open={open && !contact} onClose={onClose} title="继续使用 Ta说" description="免费次数已用完。如遇问题或需要继续使用，请及时联系客服。">
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <Button variant="primary" block leadingIcon={<Icon name="message-circle" size={16} />} onClick={() => setContact(true)}>联系客服</Button>
          {onRedeem && (
            <Button variant="secondary" block leadingIcon={<Icon name="ticket" size={16} />} onClick={onRedeem}>已有卡密？点此激活</Button>
          )}
        </div>
        <p style={{ textAlign: "center", margin: "12px 0 0", fontSize: 12, color: "var(--text-tertiary)" }}>我们不保存你的任何聊天记录</p>
      </Dialog>
      <ContactDialog open={contact} onClose={() => setContact(false)} />
    </>
  );
}

Object.assign(window, { Icon, Logo, FauxQR, WeChatQR, TA_WECHAT, ContactDialog, PaywallDialog });
