// Short links + UTM tracking — branded short links with automatic UTM tagging
// and click counts, so every post's traffic is measurable.

function LinksPage() {
  const hub = window.useClearCast();
  const data = hub.data || {};
  const links = data.links || [];
  const [target, setTarget] = React.useState("");
  const [campaign, setCampaign] = React.useState("");
  const [label, setLabel] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const origin = window.location.origin;

  const create = async () => {
    if (!/^https?:\/\//i.test(target.trim())) { hub.toast("Enter a full URL starting with http(s)://"); return; }
    setBusy(true);
    try {
      await hub.actions.createLink({ target: target.trim(), label: label.trim(), utm: { campaign: campaign.trim() } });
      setTarget(""); setCampaign(""); setLabel("");
    } finally { setBusy(false); }
  };
  const copy = async (code) => {
    try { await navigator.clipboard.writeText(`${origin}/l/${code}`); hub.toast("Link copied"); }
    catch (error) { hub.toast(`${origin}/l/${code}`); }
  };
  const totalClicks = links.reduce((s, l) => s + (l.clicks || 0), 0);

  return (
    <div className="page links-page">
      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <h3 style={{ margin: "0 0 4px", fontSize: 15 }}>Create a tracked short link</h3>
        <div className="muted" style={{ fontSize: 12.5, marginBottom: 14 }}>We auto-tag UTM parameters so clicks show up in your analytics and your destination's tools.</div>
        <div className="links-form">
          <input className="input" placeholder="https://your-site.com/page" value={target} onChange={(e) => setTarget(e.target.value)} />
          <input className="input" placeholder="Campaign (optional)" value={campaign} onChange={(e) => setCampaign(e.target.value)} />
          <input className="input" placeholder="Label (optional)" value={label} onChange={(e) => setLabel(e.target.value)} />
          <button className="btn btn-primary" disabled={busy || !target.trim()} onClick={create}><Icon.Link width="14" height="14" /> {busy ? "Creating…" : "Create link"}</button>
        </div>
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", margin: "0 2px 10px" }}>
        <div style={{ fontSize: 13.5, color: "var(--text-2)", fontWeight: 600 }}>Your links</div>
        <div className="muted" style={{ fontSize: 12 }}>{links.length} link{links.length === 1 ? "" : "s"} · {totalClicks.toLocaleString()} total clicks</div>
      </div>
      <div style={{ display: "grid", gap: 10 }}>
        {links.map((link) => (
          <div key={link.id} className="card links-row" style={{ padding: 14 }}>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <b style={{ color: "var(--accent-2)" }}>{origin.replace(/^https?:\/\//, "")}/l/{link.code}</b>
                {link.label && <span className="pill" style={{ padding: "1px 7px", fontSize: 10 }}>{link.label}</span>}
              </div>
              <div className="muted" style={{ fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 3 }}>→ {link.target}</div>
              <div className="faint" style={{ fontSize: 11, marginTop: 3 }}>utm: {link.utm?.source}/{link.utm?.medium}{link.utm?.campaign ? `/${link.utm.campaign}` : ""}</div>
            </div>
            <div style={{ textAlign: "right", flexShrink: 0 }}>
              <div style={{ fontSize: 20, fontWeight: 750 }}>{(link.clicks || 0).toLocaleString()}</div>
              <div className="muted" style={{ fontSize: 10.5 }}>clicks</div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6, flexShrink: 0 }}>
              <button className="btn btn-sm" onClick={() => copy(link.code)}><Icon.Copy width="13" height="13" /> Copy</button>
              <button className="btn btn-sm" onClick={() => hub.actions.deleteLink(link.id)} style={{ color: "var(--danger)" }}>Delete</button>
            </div>
          </div>
        ))}
        {!links.length && <div className="card" style={{ padding: 28, textAlign: "center" }}><div className="muted" style={{ fontSize: 13 }}>No links yet — create one above to start tracking clicks.</div></div>}
      </div>
    </div>
  );
}

window.LinksPage = LinksPage;