/* Screen — Detail emitenta (veřejný rejstřík + emisní statistika ČNB) */
function DetailScreen({ go, compare, issuer }) {
  if (!issuer) {
    return (
      <div className="screen container" style={{ padding: "80px 24px" }}>
        <div className="empty-state">
          <h2 style={{ fontSize: 22 }}>Emitent nenalezen</h2>
          <div style={{ marginTop: 20 }}><Btn variant="primary" onClick={() => go("issuers")}>Zpět na seznam</Btn></div>
        </div>
      </div>
    );
  }
  const dash = "–";
  const distressed = issuer.inLiquidation || issuer.insolvency;

  const registry = [
    { k: "IČO", v: issuer.ico || dash, icon: "db", num: true },
    { k: "DIČ", v: issuer.dic || dash, icon: "db", num: true },
    { k: "LEI", v: issuer.lei || dash, icon: "db", num: true },
    { k: "Sídlo", v: issuer.city ? issuer.city + (issuer.region ? ", " + issuer.region : "") : dash, icon: "map" },
    { k: "Založeno", v: issuer.founded || dash, icon: "calendar", num: true },
    { k: "Základní kapitál", v: window.fmtCZKshort(issuer.registeredCapital), icon: "coins", num: true },
    { k: "Statutární orgán", v: issuer.statutoryMembers != null ? issuer.statutoryMembers + " osob" : dash, icon: "users", num: true },
    { k: "Zveřejněné závěrky", v: issuer.publishedAccounts != null ? window.fmtInt(issuer.publishedAccounts) : dash, icon: "list", num: true },
  ];

  return (
    <div className="screen" data-screen-label="Detail emitenta">
      <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("issuers"); }}>Emitenti</a><span className="sep">›</span>
          <span style={{ color: "var(--ink-2)" }}>{issuer.shortName}</span>
        </nav>

        <div className="detail-head">
          <div>
            <div className="chip-row" style={{ marginBottom: 12 }}>
              <SpvBadge value={issuer.isSPV} />
              {issuer.reliable && <span className="badge badge-secured"><Icon name="check" size={12} /> Spolehlivý plátce DPH</span>}
              {distressed && <span className="badge badge-warn">{issuer.insolvency ? "V insolvenci" : "V likvidaci"}</span>}
            </div>
            <h1 style={{ fontSize: 34, lineHeight: 1.08 }}>{issuer.name}</h1>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 12, color: "var(--muted)", fontSize: 14, flexWrap: "wrap" }}>
              <span className="num">{issuer.ico ? "IČO " + issuer.ico : "IČO neuvedeno"}</span>
              {issuer.city && <><span style={{ color: "var(--line)" }}>|</span><span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="map" size={14} />{issuer.city}</span></>}
              {issuer.region && <><span style={{ color: "var(--line)" }}>|</span><span>{issuer.region} kraj</span></>}
            </div>

            {/* headline KVs */}
            <div className="kv-grid" style={{ marginTop: 24 }}>
              <div className="kv"><div className="k"><Icon name="layers" size={13} /> Schválených emisí</div><div className="v num">{issuer.bondCount}</div></div>
              <div className="kv"><div className="k"><Icon name="calendar" size={13} /> Založeno</div><div className="v num">{issuer.founded || dash}</div></div>
              <div className="kv"><div className="k"><Icon name="coins" size={13} /> Základní kapitál</div><div className="v num">{window.fmtCZKshort(issuer.registeredCapital)}</div></div>
              <div className="kv"><div className="k"><Icon name="map" size={13} /> Kraj</div><div className="v">{issuer.region || dash}</div></div>
            </div>

            {/* emission activity (ČNB) */}
            <div className="panel" style={{ marginTop: 24 }}>
              <div className="panel-title"><Icon name="db" size={15} /> Emisní činnost (registr ČNB)</div>
              <div className="spec-list">
                <div className="spec-row"><span className="sk">Počet schválených emisí</span><span className="sv num">{issuer.bondCount}</span></div>
                <div className="spec-row"><span className="sk">První schválení</span><span className="sv num">{issuer.earliestApprovalStr || dash}</span></div>
                <div className="spec-row"><span className="sk">Poslední schválení</span><span className="sv num">{issuer.latestApprovalStr || dash}</span></div>
                <div className="spec-row"><span className="sk">Typ dokumentace</span><span className="sv">{issuer.docTypes || dash}</span></div>
              </div>
              <p style={{ fontSize: 12, color: "var(--faint)", marginTop: 14, lineHeight: 1.5 }}>Registr eviduje počet schválených emisí a data schválení. Parametry jednotlivých emisí (výnos, kupón, splatnost, objem, zajištění) najdete v prospektu konkrétní emise.</p>
            </div>

            {/* registry facts */}
            <div className="panel" style={{ marginTop: 20 }}>
              <div className="panel-title"><Icon name="info" size={15} /> Údaje z veřejného rejstříku</div>
              <div className="kv-grid" style={{ border: 0 }}>
                {registry.map((f) => (
                  <div className="kv" key={f.k} style={{ padding: "12px 16px" }}>
                    <div className="k"><Icon name={f.icon} size={12} /> {f.k}</div>
                    <div className={"v" + (f.num ? " num" : "")} style={{ fontSize: 15, fontWeight: 500 }}>{f.v}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* structure + people */}
            <div className="panel" style={{ marginTop: 20 }}>
              <div className="panel-title"><Icon name="users" size={15} /> Struktura a statutární orgán</div>
              <div className="spec-list">
                <div className="spec-row"><span className="sk">Typ subjektu</span><span className="sv">{issuer.isSPV ? "SPV (účelová společnost)" : "Provozní společnost"}</span></div>
                <div className="spec-row"><span className="sk">Statutární orgán</span><span className="sv">{issuer.ceo ? issuer.ceo + (issuer.ceoRole ? " (" + issuer.ceoRole + ")" : "") : "Dle veřejného rejstříku"}</span></div>
                <div className="spec-row"><span className="sk">Akcionáři / společníci</span><span className="sv">{issuer.hasShareholders ? "Evidováni v rejstříku" : "Dle veřejného rejstříku"}</span></div>
                <div className="spec-row"><span className="sk">Stav subjektu</span><span className="sv">{distressed ? (issuer.insolvency ? "V insolvenci" : "V likvidaci") : "Aktivní"}</span></div>
              </div>
            </div>
          </div>

          {/* aside */}
          <div className="detail-aside" style={{ width: 280 }}>
            <div className="buy-aside">
              <div style={{ fontSize: 13, color: "var(--muted)", marginBottom: 10 }}>Akce</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                <Btn variant="primary" icon="mail" onClick={() => openLead("watch-issuer")}>Sledovat emitenta</Btn>
                {issuer.registryUrl
                  ? <a className="btn btn-ghost" href={issuer.registryUrl} target="_blank" rel="noopener noreferrer"><Icon name="db" size={17} /> Obchodní rejstřík <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} /> Rejstřík nedostupný</button><span className="tooltip">IČO není v datech uvedeno</span></span>}
                <Btn variant="ghost" icon="download" onClick={() => openLead("pdf-detail")}>Stáhnout PDF</Btn>
              </div>
              <div className="hr" style={{ margin: "18px 0" }} />
              <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13 }}>
                <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--muted)" }}>Typ</span><span style={{ color: "var(--ink)", fontWeight: 500 }}>{issuer.isSPV ? "SPV" : "Provozní firma"}</span></div>
                <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--muted)" }}>Schválených emisí</span><span className="num" style={{ color: "var(--ink)", fontWeight: 600 }}>{issuer.bondCount}</span></div>
                <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--muted)" }}>Poslední schválení</span><span className="num" style={{ color: "var(--ink)", fontWeight: 500 }}>{issuer.latestApprovalStr || dash}</span></div>
              </div>
            </div>
          </div>
        </div>

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

Object.assign(window, { DetailScreen });