/* Shared components + icons for Portál dluhopisů */
const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Icons ---------- */
function Icon({ name, size = 18, stroke = 1.6, ...rest }) {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round",
    strokeLinejoin: "round", ...rest,
  };
  const paths = {
    list: <g><line x1="8" y1="7" x2="20" y2="7" /><line x1="8" y1="12" x2="20" y2="12" /><line x1="8" y1="17" x2="20" y2="17" /><circle cx="4" cy="7" r="0.6" fill="currentColor" /><circle cx="4" cy="12" r="0.6" fill="currentColor" /><circle cx="4" cy="17" r="0.6" fill="currentColor" /></g>,
    filter: <path d="M4 5h16l-6 7v6l-4 2v-8L4 5z" />,
    compare: <g><rect x="4" y="6" width="6" height="14" rx="1" /><rect x="14" y="3" width="6" height="17" rx="1" /></g>,
    arrowRight: <g><line x1="5" y1="12" x2="19" y2="12" /><polyline points="13 6 19 12 13 18" /></g>,
    arrowLeft: <g><line x1="19" y1="12" x2="5" y2="12" /><polyline points="11 6 5 12 11 18" /></g>,
    plus: <g><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></g>,
    check: <polyline points="5 12.5 10 17 19 6" />,
    x: <g><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></g>,
    external: <g><path d="M14 5h5v5" /><line x1="19" y1="5" x2="11" y2="13" /><path d="M18 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4" /></g>,
    download: <g><line x1="12" y1="4" x2="12" y2="14" /><polyline points="7 10 12 15 17 10" /><line x1="5" y1="19" x2="19" y2="19" /></g>,
    info: <g><circle cx="12" cy="12" r="9" /><line x1="12" y1="11" x2="12" y2="16" /><circle cx="12" cy="8" r="0.6" fill="currentColor" /></g>,
    warn: <g><path d="M12 3l9 16H3l9-16z" /><line x1="12" y1="10" x2="12" y2="14" /><circle cx="12" cy="17" r="0.6" fill="currentColor" /></g>,
    chevDown: <polyline points="6 9 12 15 18 9" />,
    chevRight: <polyline points="9 6 15 12 9 18" />,
    caretUp: <polyline points="6 14 12 8 18 14" />,
    caretDown: <polyline points="6 10 12 16 18 10" />,
    pin: <g><line x1="12" y1="20" x2="12" y2="13" /><path d="M9 4h6l-1 5 3 2v2H7v-2l3-2-1-5z" /></g>,
    building: <g><rect x="5" y="3" width="14" height="18" rx="1" /><line x1="9" y1="7" x2="9" y2="7.01" /><line x1="15" y1="7" x2="15" y2="7.01" /><line x1="9" y1="11" x2="9" y2="11.01" /><line x1="15" y1="11" x2="15" y2="11.01" /><line x1="9" y1="15" x2="9" y2="15.01" /><line x1="15" y1="15" x2="15" y2="15.01" /></g>,
    user: <g><circle cx="12" cy="8" r="3.4" /><path d="M5 20a7 7 0 0 1 14 0" /></g>,
    users: <g><circle cx="9" cy="8" r="3" /><path d="M3 19a6 6 0 0 1 12 0" /><path d="M16 5.5a3 3 0 0 1 0 5.5" /><path d="M21 19a6 6 0 0 0-4-5.6" /></g>,
    layers: <g><polygon points="12 3 21 8 12 13 3 8 12 3" /><polyline points="3 13 12 18 21 13" /></g>,
    coins: <g><ellipse cx="12" cy="6" rx="7" ry="3" /><path d="M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6" /><path d="M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6" /></g>,
    map: <g><circle cx="12" cy="10" r="3" /><path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z" /></g>,
    search: <g><circle cx="11" cy="11" r="7" /><line x1="16.5" y1="16.5" x2="21" y2="21" /></g>,
    mail: <g><rect x="3" y="5" width="18" height="14" rx="2" /><polyline points="3 7 12 13 21 7" /></g>,
    phone: <path d="M5 4h3.2l1.4 3.8-2 1.4a10.5 10.5 0 0 0 5 5l1.4-2 3.8 1.4V18a1.5 1.5 0 0 1-1.6 1.5A14.5 14.5 0 0 1 3.5 6.6 1.5 1.5 0 0 1 5 4z" />,
    shield: <g><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z" /><polyline points="9 12 11 14 15 9" /></g>,
    shieldOff: <g><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z" /><line x1="5" y1="5" x2="19" y2="19" /></g>,
    db: <g><ellipse cx="12" cy="5" rx="7" ry="2.6" /><path d="M5 5v14c0 1.4 3.1 2.6 7 2.6s7-1.2 7-2.6V5" /><path d="M5 12c0 1.4 3.1 2.6 7 2.6s7-1.2 7-2.6" /></g>,
    book: <g><path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z" /><line x1="9" y1="7" x2="15" y2="7" /><line x1="9" y1="11" x2="14" y2="11" /></g>,
    calendar: <g><rect x="4" y="5" width="16" height="16" rx="2" /><line x1="4" y1="9" x2="20" y2="9" /><line x1="9" y1="3" x2="9" y2="6" /><line x1="15" y1="3" x2="15" y2="6" /></g>,
    percent: <g><line x1="19" y1="5" x2="5" y2="19" /><circle cx="7.5" cy="7.5" r="2" /><circle cx="16.5" cy="16.5" r="2" /></g>,
    tag: <g><path d="M3 12l9-9 9 9-9 9z" /><circle cx="9" cy="9" r="1.2" fill="currentColor" /></g>,
    clock: <g><circle cx="12" cy="12" r="9" /><polyline points="12 7 12 12 15.5 14" /></g>,
    globe: <g><circle cx="12" cy="12" r="9" /><line x1="3" y1="12" x2="21" y2="12" /><path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z" /></g>,
    chart: <g><line x1="4" y1="20" x2="20" y2="20" /><rect x="6" y="11" width="3" height="6" /><rect x="11" y="7" width="3" height="10" /><rect x="16" y="13" width="3" height="4" /></g>,
  };
  return <svg {...common}>{paths[name] || null}</svg>;
}

/* ---------- Logo ---------- */
function Logo({ onClick }) {
  return (
    <a className="logo" href="#" onClick={(e) => { e.preventDefault(); onClick && onClick(); }} aria-label="Portál dluhopisů, domů">
      <span className="logo-mark">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M2 10.5 L5 6 L8 8.5 L12 3" stroke="#fff" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </span>
      <span className="logo-word"><b>Korporátní</b><i> dluhopisy</i></span>
    </a>
  );
}

/* ---------- Navigation ---------- */
function Nav({ route, go, compareCount }) {
  const links = [
    { key: "bonds", label: "Dluhopisy", match: ["bonds", "bond"] },
    { key: "issuers", label: "Emitenti", match: ["issuers", "detail"] },
    { key: "compare", label: "Srovnávač", match: ["compare"] },
    { key: "education", label: "Vzdělávání", match: ["education"] },
    { key: "about", label: "O portálu", match: ["about"] },
  ];
  return (
    <nav className="nav">
      <div className="container container-wide nav-inner">
        <Logo onClick={() => go("home")} />
        <div className="nav-links">
          {links.map((l) => {
            const active = l.match.includes(route);
            return (
              <button key={l.key} className={"nav-link" + (active ? " active" : "")} onClick={() => go(l.key)}>
                {l.label}
                {l.key === "compare" && compareCount > 0 && <span className="nav-compare-count num">{compareCount}</span>}
              </button>
            );
          })}
        </div>
        <button className="btn btn-primary btn-sm nav-cta" onClick={() => openLead("alert")}><Icon name="mail" size={15} /> Hlídat emise</button>
      </div>
    </nav>
  );
}

/* ---------- Disclaimer banner ---------- */
function Disclaimer({ thin }) {
  return (
    <div className={"disclaimer" + (thin ? " disclaimer-thin" : "")} role="note">
      <Icon name="warn" size={16} />
      <div><strong>Toto není investiční doporučení.</strong> Portál zobrazuje veřejně dostupná data z registru ČNB pro informační účely.</div>
    </div>
  );
}

/* ---------- Badges ---------- */
function SpvBadge({ value }) {
  return value
    ? <span className="badge badge-yes"><span className="badge-dot"></span>SPV</span>
    : <span className="badge badge-no">Ne</span>;
}
function YieldBadge({ value, size }) {
  return <span className={"yield-badge" + (size === "lg" ? " lg" : "")}>{window.fmtPct(value)}<span className="yb-pa">p.a.</span></span>;
}
function SecuredBadge({ bond }) {
  return bond.secured
    ? <span className="badge badge-secured"><Icon name="shield" size={12} /> Zajištěný</span>
    : <span className="badge badge-unsecured"><Icon name="shieldOff" size={12} /> Nezajištěný</span>;
}
function LimitBadge({ bond }) {
  const pod = bond.limitType === "podlimitní";
  return <span className={"badge " + (pod ? "badge-warn" : "badge-ok-soft")}>{pod ? "Podlimitní" : "Nadlimitní"}</span>;
}
function StatusBadge({ status }) {
  const map = { "v úpisu": "stat-live", "upsáno": "stat-closed", "splacený": "stat-done" };
  return <span className={"status-badge " + (map[status] || "")}><span className="badge-dot"></span>{status}</span>;
}

/* ---------- Button ---------- */
function Btn({ variant = "primary", size, icon, iconRight, children, ...rest }) {
  const cls = ["btn", "btn-" + variant, size ? "btn-" + size : ""].join(" ");
  return (
    <button className={cls} {...rest}>
      {icon && <Icon name={icon} size={size === "sm" ? 15 : 17} />}
      {children}
      {iconRight && <Icon name={iconRight} size={size === "sm" ? 15 : 17} />}
    </button>
  );
}

/* ---------- Compare toggle (operates on BONDS) ---------- */
function CompareToggle({ bond, compare, size = "sm", label = true }) {
  const inList = compare.has(bond.id);
  const full = compare.isFull && !inList;
  const btn = (
    <button
      className={"btn " + (inList ? "btn-soft" : "btn-ghost") + (size === "sm" ? " btn-sm" : "")}
      disabled={full}
      onClick={(e) => { e.stopPropagation(); compare.toggle(bond.id); }}
    >
      <Icon name={inList ? "check" : "plus"} size={size === "sm" ? 15 : 17} />
      {label && (inList ? "Ve srovnání" : "Srovnat")}
    </button>
  );
  if (full) return <span className="tooltip-wrap">{btn}<span className="tooltip">Maximum 4 dluhopisy</span></span>;
  return btn;
}

Object.assign(window, { Icon, Logo, Nav, Disclaimer, SpvBadge, YieldBadge, SecuredBadge, LimitBadge, StatusBadge, Btn, CompareToggle });