/* Screen — Registr emisí / emitentů (filterable table)
   Public register data is issuer-level: each row is an issuer and its count of
   ČNB-approved emissions. window.BONDS aliases window.ISSUERS. */
const BONDS_PER_PAGE = 20;

function BondsScreen({ go, compare, initialFilters }) {
  const def = { search: "", region: "", spv: "vse", minEmissions: 0 };
  const [filters, setFilters] = React.useState({ ...def, ...(initialFilters || {}) });
  const [sort, setSort] = React.useState({ key: "bondCount", dir: "desc" });
  const [page, setPage] = React.useState(1);

  React.useEffect(() => { if (initialFilters) setFilters({ ...def, ...initialFilters }); }, [initialFilters]);

  const setF = (patch) => { setFilters((f) => ({ ...f, ...patch })); setPage(1); };
  const reset = () => { setFilters(def); setPage(1); };

  const filtered = React.useMemo(() => window.BONDS.filter((b) => {
    if (filters.search) {
      const q = filters.search.toLowerCase();
      const inName = b.name.toLowerCase().includes(q);
      const inIco = (b.ico || "").includes(q);
      const inCity = (b.city || "").toLowerCase().includes(q);
      if (!inName && !inIco && !inCity) return false;
    }
    if (filters.region && b.region !== filters.region) return false;
    if (filters.spv === "ano" && !b.isSPV) return false;
    if (filters.spv === "ne" && b.isSPV) return false;
    if (filters.minEmissions && (b.bondCount || 0) < filters.minEmissions) return false;
    return true;
  }), [filters]);

  const sorted = React.useMemo(() => {
    const arr = [...filtered];
    const { key, dir } = sort;
    arr.sort((a, b) => {
      let av = a[key], bv = b[key];
      if (typeof av === "string") { av = av.toLowerCase(); bv = (bv || "").toLowerCase(); }
      if (typeof av === "boolean") { av = av ? 1 : 0; bv = bv ? 1 : 0; }
      if (av == null) av = -Infinity;
      if (bv == null) bv = -Infinity;
      if (av < bv) return dir === "asc" ? -1 : 1;
      if (av > bv) return dir === "asc" ? 1 : -1;
      return 0;
    });
    return arr;
  }, [filtered, sort]);

  const pageCount = Math.max(1, Math.ceil(sorted.length / BONDS_PER_PAGE));
  const curPage = Math.min(page, pageCount);
  const rows = sorted.slice((curPage - 1) * BONDS_PER_PAGE, curPage * BONDS_PER_PAGE);

  const toggleSort = (key) => setSort((s) => s.key === key
    ? { key, dir: s.dir === "asc" ? "desc" : "asc" }
    : { key, dir: (key === "name" || key === "region") ? "asc" : "desc" });

  // active tags
  const tags = [];
  if (filters.search) tags.push({ k: "s", label: "Hledání", val: filters.search, clr: () => setF({ search: "" }) });
  if (filters.region) tags.push({ k: "r", label: "Kraj", val: filters.region, clr: () => setF({ region: "" }) });
  if (filters.spv !== "vse") tags.push({ k: "spv", label: "Typ", val: filters.spv === "ano" ? "SPV" : "Provozní", clr: () => setF({ spv: "vse" }) });
  if (filters.minEmissions) tags.push({ k: "me", label: "Emisí od", val: String(filters.minEmissions), clr: () => setF({ minEmissions: 0 }) });

  const cols = [
    { key: "name", label: "Emitent", num: false, sortable: true },
    { key: "region", label: "Kraj", num: false, sortable: true },
    { key: "bondCount", label: "Schválených emisí", num: true, sortable: true },
    { key: "latestApprovalStr", label: "Poslední schválení", num: true, sortable: false },
    { key: "isSPV", label: "SPV", num: false, sortable: true },
  ];

  return (
    <div className="screen" data-screen-label="Registr emisí">
      <div className="page-hero">
        <div className="container container-wide" style={{ padding: "32px 24px 28px" }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Registr ČNB · {window.BONDS.length} emitentů · {window.MARKET.emissions} schválených emisí · aktualizováno {window.MARKET.updated}</div>
          <h1 style={{ fontSize: 32 }}>Emise a emitenti</h1>
          <p style={{ color: "var(--ink-2)", marginTop: 10, maxWidth: 620, fontSize: 16 }}>
            Přehled emitentů s prospektem schváleným ČNB a počtem jejich schválených emisí. Filtrujte podle kraje, typu subjektu i počtu emisí a postavte je vedle sebe.
          </p>
        </div>
      </div>

      <div className="container container-wide" style={{ padding: "24px 24px 64px" }}>
        <div className="list-layout">
          <aside className="list-sidebar">
            <BondFilters filters={filters} setF={setF} reset={reset} />
          </aside>

          <div>
            <div className="list-toolbar">
              <div style={{ position: "relative", flex: "1 1 240px", maxWidth: 320 }}>
                <span style={{ position: "absolute", left: 11, top: "50%", transform: "translateY(-50%)", color: "var(--faint)" }}><Icon name="search" size={16} /></span>
                <input className="input" placeholder="Hledat emitenta, IČO, město…" value={filters.search} onChange={(e) => setF({ search: e.target.value })} style={{ paddingLeft: 34 }} />
              </div>
              <span style={{ marginLeft: "auto", fontSize: 13.5, color: "var(--muted)" }}>
                <b className="num" style={{ color: "var(--ink)" }}>{sorted.length}</b> z {window.BONDS.length} emitentů
              </span>
            </div>

            {tags.length > 0 && (
              <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", marginBottom: 14 }}>
                {tags.map((t) => (
                  <span className="filter-tag" key={t.k}>{t.label}: <b>{t.val}</b><button onClick={t.clr} aria-label="Odebrat"><Icon name="x" size={13} /></button></span>
                ))}
                <button className="nav-link" style={{ fontSize: 13, color: "var(--muted)" }} onClick={reset}>Vymazat vše</button>
              </div>
            )}

            <div className="table-wrap">
              <table className="data">
                <thead>
                  <tr>
                    {cols.map((c) => c.sortable ? (
                      <th key={c.key} className={"sortable" + (c.num ? " num-col" : "") + (sort.key === c.key ? " sorted" : "")} onClick={() => toggleSort(c.key)}>
                        <span className="th-inner">{c.label}<span className="sort-caret"><Icon name={sort.key === c.key ? (sort.dir === "asc" ? "caretUp" : "caretDown") : "chevDown"} size={13} /></span></span>
                      </th>
                    ) : (
                      <th key={c.key} className={c.num ? "num-col" : ""}><span className="th-inner">{c.label}</span></th>
                    ))}
                    <th style={{ textAlign: "right" }}>Akce</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.map((b) => {
                    const inComp = compare.has(b.id);
                    return (
                      <tr key={b.id} className={inComp ? "in-compare" : ""}>
                        <td>
                          <div className="cell-stack">
                            <span className="bond-name" onClick={() => go("detail", { id: b.id })}>{b.shortName}</span>
                            <span className="bond-sub">{b.ico ? "IČO " + b.ico : "IČO neuvedeno"}{b.city ? " · " + b.city : ""}</span>
                          </div>
                        </td>
                        <td style={{ color: "var(--ink-2)" }}>{b.region || "–"}</td>
                        <td className="col-num" style={{ color: "var(--ink)" }}>{b.bondCount}</td>
                        <td className="col-num" style={{ color: "var(--ink-2)" }}>{b.latestApprovalStr || "–"}</td>
                        <td><SpvBadge value={b.isSPV} /></td>
                        <td>
                          <div style={{ display: "flex", gap: 6, justifyContent: "flex-end" }}>
                            <button className="btn btn-ghost btn-sm" onClick={() => go("detail", { id: b.id })}>Profil</button>
                            <CompareToggle bond={b} compare={compare} size="sm" label={false} />
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                  {rows.length === 0 && (
                    <tr><td colSpan={6} style={{ textAlign: "center", padding: "56px 16px", color: "var(--muted)" }}>Žádný emitent neodpovídá zvoleným filtrům. <button className="nav-link" style={{ color: "var(--accent-strong)" }} onClick={reset}>Vymazat filtry</button></td></tr>
                  )}
                </tbody>
              </table>
            </div>

            {pageCount > 1 && (
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 18, flexWrap: "wrap", gap: 12 }}>
                <span style={{ fontSize: 13, color: "var(--muted)" }}>Strana {curPage} z {pageCount} · {BONDS_PER_PAGE} na stránku</span>
                <Pager page={curPage} pageCount={pageCount} setPage={setPage} />
              </div>
            )}

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

/* ---------- Registry filters sidebar ---------- */
function BondFilters({ filters, setF, reset }) {
  return (
    <div className="sidebar-card" style={{ padding: "4px 22px" }}>
      <div className="filter-group" style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span className="sidebar-title"><Icon name="filter" size={15} /> Filtry</span>
        <button className="nav-link" style={{ fontSize: 12.5, color: "var(--muted)", padding: "4px 6px" }} onClick={reset}>Reset</button>
      </div>

      {/* type of subject */}
      <div className="filter-group">
        <div className="filter-group-title"><Icon name="building" size={14} /> Typ subjektu</div>
        <div className="seg" style={{ width: "100%" }}>
          {[["vse", "Vše"], ["ne", "Provozní"], ["ano", "SPV"]].map(([v, l]) => (
            <button key={v} className={filters.spv === v ? "on" : ""} style={{ flex: 1 }} onClick={() => setF({ spv: v })}>{l}</button>
          ))}
        </div>
        <p style={{ fontSize: 11.5, color: "var(--faint)", marginTop: 9, lineHeight: 1.45 }}>SPV je účelově založená společnost, jejíž hlavní činností je financování projektů ve skupině.</p>
      </div>

      {/* min emissions */}
      <div className="filter-group">
        <div className="filter-group-title"><Icon name="layers" size={14} /> Minimální počet emisí</div>
        <select className="select" value={filters.minEmissions} onChange={(e) => setF({ minEmissions: +e.target.value })}>
          <option value="0">Bez omezení</option>
          <option value="2">2 a více</option>
          <option value="3">3 a více</option>
          <option value="5">5 a více</option>
          <option value="10">10 a více</option>
        </select>
      </div>

      {/* region */}
      <div className="filter-group">
        <div className="filter-group-title"><Icon name="map" size={14} /> Kraj emitenta</div>
        <select className="select" value={filters.region} onChange={(e) => setF({ region: e.target.value })}>
          <option value="">Celá ČR</option>
          {window.KRAJE.map((k) => <option key={k} value={k}>{k}</option>)}
        </select>
      </div>
    </div>
  );
}

/* ---------- Pager (shared) ---------- */
function Pager({ page, pageCount, setPage }) {
  const nums = [];
  if (pageCount <= 7) { for (let i = 1; i <= pageCount; i++) nums.push(i); }
  else {
    nums.push(1);
    if (page > 3) nums.push("…");
    for (let i = Math.max(2, page - 1); i <= Math.min(pageCount - 1, page + 1); i++) nums.push(i);
    if (page < pageCount - 2) nums.push("…");
    nums.push(pageCount);
  }
  return (
    <div className="pager">
      <button onClick={() => setPage(Math.max(1, page - 1))} disabled={page === 1} aria-label="Předchozí">‹</button>
      {nums.map((n, i) => n === "…" ? <span key={"e" + i} style={{ padding: "0 4px", color: "var(--faint)" }}>…</span>
        : <button key={n} className={n === page ? "active" : ""} onClick={() => setPage(n)}>{n}</button>)}
      <button onClick={() => setPage(Math.min(pageCount, page + 1))} disabled={page === pageCount} aria-label="Další">›</button>
    </div>
  );
}

Object.assign(window, { BondsScreen, Pager });