export default function LocationMapSetupPanel({
  hasAnyMap,
  canManage,
  zoneCount = 0,
  saving,
  savingAction,
  onContinue,
  onPreview,
  onPublish,
  onCreateFromZones,
  onCreateBlank,
}) {
  const hasZones = zoneCount > 0;
  const createFromZonesLabel = `Create From ${zoneCount} Zone${zoneCount === 1 ? "" : "s"}`;
  const createBlankLabel = savingAction === "create-blank" ? "Creating..." : "Create Blank Map";
  const createZonesButtonLabel = savingAction === "create-zones" ? "Creating..." : createFromZonesLabel;
  const publishLabel = savingAction === "publish" ? "Publishing..." : "Publish";

  return (
    <section className="location-map-setup">
      <h2>{hasAnyMap ? "Draft Map" : "No Map"}</h2>
      {canManage ? (
        <div className="location-map-setup-rows" role="group" aria-label="Map setup details">
          <div className="location-map-setup-row">
            <span>Zones</span>
            <strong>{zoneCount}</strong>
          </div>
        </div>
      ) : null}
      {hasAnyMap && canManage ? (
        <div className="location-map-setup-actions">
          <button type="button" className="btn-primary" onClick={onContinue} disabled={saving}>
            Continue Editing
          </button>
          <button type="button" className="btn-secondary" onClick={onPreview} disabled={saving}>
            View Draft
          </button>
          <button type="button" className="btn-primary" onClick={onPublish} disabled={saving || !canManage}>
            {publishLabel}
          </button>
        </div>
      ) : !hasAnyMap && canManage ? (
        <div className="location-map-setup-actions">
          {!hasZones ? (
            <button type="button" className="btn-primary" onClick={onCreateBlank} disabled={saving}>
              {createBlankLabel}
            </button>
          ) : (
            <>
              <button type="button" className="btn-primary" onClick={onCreateFromZones} disabled={saving}>
                {createZonesButtonLabel}
              </button>
              <button type="button" className="btn-secondary" onClick={onCreateBlank} disabled={saving}>
                {createBlankLabel}
              </button>
            </>
          )}
        </div>
      ) : null}
    </section>
  );
}