/* Screen — Detail dluhopisu */
function BondDetailScreen({ go, compare, bond }) {
  if (!bond) {
    return (
      <div className="screen container" style={{ padding: "80px 24px" }}>
        <div className="empty-state">
          <h2 style={{ fontSize: 22 }}>Dluhopis nenalezen</h2>
          <div style={{ marginTop: 20 }}><Btn variant="primary" onClick={() => go("bonds")}>Zpět na seznam</Btn></div>
        </div>
      </div>
    );
  }
  const iss = window.getIssuer(bond.issuerId);
  const inComp = compare.has(bond.id);
  const strengthClass = bond.securityStrength === "vyšší" ? "" : bond.securityStrength === "střední" ? "mid" : "low";
  const strengthN = bond.securityStrength === "vyšší" ? 3 : bond.securityStrength === "střední" ? 2 : 1;

  const specs = [
    { k: "ISIN", v: bond.isin, num: true },
    { k: "Kupónová sazba", v: bond.couponType === "nulový" ? "0 % (diskont)" : window.fmtPct(bond.coupon), num: true },
    { k: "Typ kupónu", v: bond.couponType.charAt(0).toUpperCase() + bond.couponType.slice(1) },
    { k: "Výplata kupónu", v: bond.paymentFreq },
    { k: "Jmenovitá hodnota", v: window.fmtCZK(bond.nominal), num: true },
    { k: "Min. investice", v: window.fmtCZK(bond.minInvestment), num: true },
    { k: "Datum emise", v: bond.issueDateStr, num: true },
    { k: "Datum splatnosti", v: bond.maturityDateStr, num: true },
    { k: "Rating", v: bond.rating },
    { k: "Prospekt ČNB", v: bond.prospectus ? "Ano, schválený" : "Ne (podlimitní)" },
  ];

  return (
    <div className="screen" data-screen-label="Detail dluhopisu">
      <div className="container container-wide" style={{ padding: "24px 24px 64px" }}>
        <nav className="crumb" style={{ marginBottom: 22 }}>
          <a href="#" onClick={(e) => { e.preventDefault(); go("home"); }}>Domů</a><span className="sep">›</span>
          <a href="#" onClick={(e) => { e.preventDefault(); go("bonds"); }}>Dluhopisy</a><span className="sep">›</span>
          <span style={{ color: "var(--ink-2)" }}>{bond.name}</span>
        </nav>

        <div className="detail-head">
          {/* MAIN */}
          <div>
            <div className="chip-row" style={{ marginBottom: 14 }}>
              <StatusBadge status={bond.status} />
              <LimitBadge bond={bond} />
              <SecuredBadge bond={bond} />
              {bond.flags.includes("Emitent je SPV") && <span className="badge badge-no">SPV</span>}
            </div>
            <h1 style={{ fontSize: 34, lineHeight: 1.08 }}>{bond.name}</h1>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 12, flexWrap: "wrap", color: "var(--muted)", fontSize: 14 }}>
              <span>Emitent:</span>
              <a className="emitent-name" onClick={() => go("detail", { id: iss.id })} style={{ fontSize: 15 }}>{iss.name}</a>
              <span style={{ color: "var(--line)" }}>|</span>
              <span className="num">{iss.ico}</span>
              <span style={{ color: "var(--line)" }}>|</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="map" size={14} />{iss.city}</span>
            </div>

            {/* headline KV grid */}
            <div className="kv-grid" style={{ marginTop: 26 }}>
              <div className="kv"><div className="k"><Icon name="percent" size={13} /> Cílený výnos</div><div className="v num" style={{ color: "var(--accent-strong)", fontSize: 22 }}>{window.fmtPct(bond.targetYield)} <span style={{ fontSize: 12, color: "var(--muted)" }}>p.a.</span></div></div>
              <div className="kv"><div className="k"><Icon name="clock" size={13} /> Splatnost</div><div className="v num">{bond.maturityYears} let</div></div>
              <div className="kv"><div className="k"><Icon name="coins" size={13} /> Objem emise</div><div className="v num">{window.fmtCZKshort(bond.volume)}</div></div>
              <div className="kv"><div className="k"><Icon name="tag" size={13} /> Min. investice</div><div className="v num">{window.fmtCZKshort(bond.minInvestment)}</div></div>
            </div>

            {/* security panel */}
            <div className="panel" style={{ marginTop: 24 }}>
              <div className="panel-title"><Icon name={bond.secured ? "shield" : "shieldOff"} size={15} /> Zajištění emise</div>
              {bond.secured ? (
                <div>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
                    <div style={{ fontSize: 18, fontWeight: 600, color: "var(--ink)" }}>{bond.securityLabel}</div>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <span style={{ fontSize: 12.5, color: "var(--muted)" }}>Síla zajištění: <b style={{ color: "var(--ink-2)" }}>{bond.securityStrength}</b></span>
                      <span className={"sec-meter " + strengthClass}>{[1, 2, 3].map((i) => <span key={i} className={i <= strengthN ? "on" : ""}></span>)}</span>
                    </div>
                  </div>
                  <p style={{ color: "var(--ink-2)", fontSize: 14.5, lineHeight: 1.6, marginTop: 12 }}>{bond.securityDetail}</p>
                </div>
              ) : (
                <p style={{ color: "var(--ink-2)", fontSize: 14.5, lineHeight: 1.6 }}>{bond.securityDetail}</p>
              )}
            </div>

            {/* full spec table */}
            <div className="panel" style={{ marginTop: 20 }}>
              <div className="panel-title"><Icon name="list" size={15} /> Parametry emise</div>
              <div className="spec-list">
                {specs.map((s) => (
                  <div className="spec-row" key={s.k}>
                    <span className="sk">{s.k}</span>
                    <span className={"sv" + (s.num ? " num" : "")}>{s.v}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* factual flags */}
            {bond.flags.length > 0 && (
              <div style={{ marginTop: 20 }}>
                <div className="panel-title" style={{ marginBottom: 12 }}><Icon name="warn" size={15} /> Na co upozornit (faktické údaje)</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  {bond.flags.map((f) => (
                    <div className="flag-row" key={f}><Icon name="info" size={15} /> {flagText(f)}</div>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* ASIDE */}
          <div className="detail-aside" style={{ width: 300 }}>
            <div className="buy-aside">
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 4 }}>
                <span style={{ fontSize: 13, color: "var(--muted)" }}>Cílený výnos</span>
                <YieldBadge value={bond.targetYield} size="lg" />
              </div>
              <div style={{ fontSize: 12.5, color: "var(--faint)", marginBottom: 18 }}>{bond.couponType === "nulový" ? "Diskontovaný dluhopis" : `Kupón ${window.fmtPct(bond.coupon)} · ${bond.paymentFreq}`}</div>

              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                <CompareToggle bond={bond} compare={compare} size="md" />
                {inComp && <Btn variant="ghost" iconRight="arrowRight" onClick={() => go("compare")}>Otevřít srovnávač</Btn>}
                {bond.prospectus ? (
                  <a className="btn btn-ghost" href={bond.prospectusUrl} target="_blank" rel="noopener noreferrer"><Icon name="db" size={17} /> Prospekt ČNB <Icon name="external" size={15} /></a>
                ) : (
                  <span className="tooltip-wrap" style={{ width: "100%" }}><button className="btn btn-ghost" disabled style={{ width: "100%" }}><Icon name="db" size={17} /> Bez prospektu</button><span className="tooltip">Podlimitní emise nemá prospekt ČNB</span></span>
                )}
                <Btn variant="ghost" icon="download" onClick={() => openLead("pdf-bond")}>Stáhnout kartu (PDF)</Btn>
              </div>

              <div className="hr" style={{ margin: "18px 0" }} />
              <div style={{ fontSize: 12.5, color: "var(--muted)", marginBottom: 10 }}>Emitent</div>
              <div onClick={() => go("detail", { id: iss.id })} style={{ cursor: "pointer" }}>
                <div style={{ fontWeight: 600, color: "var(--ink)", fontSize: 14.5 }}>{iss.shortName}</div>
                <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 2 }}>{iss.sector} · {iss.city}</div>
                <div style={{ display: "flex", gap: 14, marginTop: 10, fontSize: 12.5, color: "var(--ink-2)" }}>
                  <span>Emisí: <b className="num">{iss.bondCount}</b></span>
                  <span>Objem: <b className="num">{window.fmtCZKshort(iss.totalVolume)}</b></span>
                </div>
              </div>
              <Btn variant="soft" size="sm" iconRight="chevRight" onClick={() => go("detail", { id: iss.id })} style={{ width: "100%", marginTop: 14 }}>Profil emitenta</Btn>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 28, maxWidth: 760 }}><Disclaimer /></div>
      </div>
    </div>
  );
}

function flagText(f) {
  const m = {
    "Bez prospektu ČNB": "Jde o podlimitní emisi bez prospektu schváleného ČNB, k dispozici je méně ověřených informací.",
    "Nezajištěný": "Dluhopis není zajištěný, návratnost závisí výhradně na schopnosti emitenta splácet.",
    "Emitent je SPV": "Emitentem je účelově založená společnost (SPV), často bez vlastní provozní historie nebo majetku.",
  };
  return m[f] || f;
}

Object.assign(window, { BondDetailScreen });