export default function LocationMapSetupPanel({
  hasAnyMap,
  canManage,
  zoneCount = 0,
  saving,
  savingAction,
  onContinue,
  onPreview,
  onPublish,
  onCreateFromZones,
  onCreateBlank,
}) {
  const description = hasAnyMap
    ? canManage
      ? "A draft map exists for this location."
      : "A map draft exists for this location, but it has not been published yet."
    : canManage
      ? "Create a rough map for this store location."
      : "A household admin has not published a map yet.";
  const hasZones = zoneCount > 0;
  const createFromZonesLabel = hasZones
    ? `Create From ${zoneCount} Zone${zoneCount === 1 ? "" : "s"}`
    : "Create From Zones";
  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>
      <p>{description}</p>
      {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}>
            Preview 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 ? (
            <p className="location-map-setup-note">
              No zones are available yet. Create a blank map now, or add zones first for an automatic starter layout.
            </p>
          ) : null}
          {!hasZones ? (
            <>
              <button type="button" className="btn-primary" onClick={onCreateBlank} disabled={saving}>
                {createBlankLabel}
              </button>
              <button type="button" className="btn-secondary" onClick={onCreateFromZones} disabled>
                {createFromZonesLabel}
              </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>
  );
}