import type { CfZone } from "../types";
import { useDomainflare } from "../context/DomainflareContext";

/** 侧边栏：域名 Zone 列表 */
export function ZonesSection() {
  const {
    zonesFilter,
    setZonesFilter,
    filteredZones,
    activeZoneId,
    selectZone,
    zonesPageInfo,
    goZonesPrev,
    goZonesNext,
    refreshZonesList,
    zonesPage,
    zonesTotalPages,
  } = useDomainflare();

  return (
    <section className="panel">
      <div className="row-between">
        <h3>域名（Zones）</h3>
        <button type="button" id="zones-refresh" className="btn ghost tiny" onClick={refreshZonesList}>
          刷新
        </button>
      </div>
      <label className="field">
        <span>筛选</span>
        <input
          id="zones-filter"
          type="search"
          placeholder="按名称过滤…"
          value={zonesFilter}
          onChange={(e) => setZonesFilter(e.target.value)}
        />
      </label>
      <div id="zone-list" className="list">
        {filteredZones.map((z: CfZone) => (
          <button
            key={z.id}
            type="button"
            className={`zone-item${z.id === activeZoneId ? " active" : ""}`}
            onClick={() => selectZone(z)}
          >
            <strong>{z.name}</strong>
            <div className="muted tiny">
              {z.status} · {z.id}
            </div>
          </button>
        ))}
      </div>
      {!filteredZones.length ? <p className="muted small">暂无域名或筛选无结果。</p> : null}
      <div className="zone-pager pager-tight">
        <button
          type="button"
          id="zones-page-prev"
          className="btn ghost tiny btn-compact"
          disabled={zonesPage <= 1}
          onClick={goZonesPrev}
        >
          上一页
        </button>
        <span id="zones-page-info" className="muted tiny">
          {zonesPageInfo}
        </span>
        <button
          type="button"
          id="zones-page-next"
          className="btn ghost tiny btn-compact"
          disabled={zonesPage >= zonesTotalPages}
          onClick={goZonesNext}
        >
          下一页
        </button>
      </div>
    </section>
  );
}
