import { For, Show, createResource, createSignal } from "solid-js";
import { apiClient } from "../../lib/api-client";
import { Input } from "../../components/ui/input";
import { Select } from "../../components/ui/select";
import { getInitials } from "../../components/dashboard/types";
import { MapPinIcon, PlusIcon, BanIcon, ClockIcon, SparklesIcon, Trash2Icon, UsersIcon, PencilIcon, ChevronDownIcon, CalendarDaysIcon, CheckIcon, XIcon } from "../../components/dashboard/icons";
import { DashboardLayout, useDashboardData } from "./layout";

function ZonesPage() {
  const data = useDashboardData();
  const cs = () => data.i18n.locale() === "cs";
  const [activeTab, setActiveTab] = createSignal<"zones" | "blocked" | "hours" | "classes">("zones");
  const [showAddZone, setShowAddZone] = createSignal(false);
  const [newZoneName, setNewZoneName] = createSignal("");
  const [newZoneType, setNewZoneType] = createSignal("room");
  const [newZoneCapacity, setNewZoneCapacity] = createSignal(10);
  const [showUpgradePrompt, setShowUpgradePrompt] = createSignal(false);
  const [newBlockedDate, setNewBlockedDate] = createSignal("");
  const [newBlockedReason, setNewBlockedReason] = createSignal("");
  const [newBlockedStaffId, setNewBlockedStaffId] = createSignal("");
  const [blockedSaving, setBlockedSaving] = createSignal(false);
  const [hoursSaving, setHoursSaving] = createSignal<number | null>(null);
  const [hoursScope, setHoursScope] = createSignal("");
  const [newTemplateTitle, setNewTemplateTitle] = createSignal("");
  const [newTemplateDuration, setNewTemplateDuration] = createSignal(60);
  const [newTemplateCapacity, setNewTemplateCapacity] = createSignal(8);
  const [templateSaving, setTemplateSaving] = createSignal(false);
  const [editingTemplateId, setEditingTemplateId] = createSignal<string | null>(null);
  const [newSessionTemplateId, setNewSessionTemplateId] = createSignal("");
  const [newSessionLocationId, setNewSessionLocationId] = createSignal("");
  const [newSessionStartsAt, setNewSessionStartsAt] = createSignal("");
  const [sessionSaving, setSessionSaving] = createSignal(false);
  const [newSchedTemplateId, setNewSchedTemplateId] = createSignal("");
  const [newSchedDayOfWeek, setNewSchedDayOfWeek] = createSignal("3");
  const [newSchedStartsLocal, setNewSchedStartsLocal] = createSignal("");
  const [newSchedLocationId, setNewSchedLocationId] = createSignal("");
  const [schedSaving, setSchedSaving] = createSignal(false);
  const [editingSchedId, setEditingSchedId] = createSignal<string | null>(null);
  const [editSchedDayOfWeek, setEditSchedDayOfWeek] = createSignal("1");
  const [editSchedStartsLocal, setEditSchedStartsLocal] = createSignal("");
  const [editSchedLocationId, setEditSchedLocationId] = createSignal("");
  const [editSchedApplyFuture, setEditSchedApplyFuture] = createSignal(true);
  const [editSchedActive, setEditSchedActive] = createSignal(true);
  const [schedEditSaving, setSchedEditSaving] = createSignal(false);
  const [editingCapSessionId, setEditingCapSessionId] = createSignal<string | null>(null);
  const [editCapValue, setEditCapValue] = createSignal(0);
  const [capSaving, setCapSaving] = createSignal(false);
  // Session ID whose capacity shrink hit the confirmed-seat floor — the row
  // switches to an explicit "set anyway" confirm before resubmitting.
  const [capOverbookConfirm, setCapOverbookConfirm] = createSignal<string | null>(null);
  const [expandedSessionId, setExpandedSessionId] = createSignal<string | null>(null);
  const [promoteBusy, setPromoteBusy] = createSignal<string | null>(null);
  // Booking IDs whose promote attempt hit a full session — awaiting the
  // explicit "confirm anyway" over-capacity resubmit.
  const [promoteArmed, setPromoteArmed] = createSignal<Set<string>>(new Set());

  const authHeaders = () => ({ headers: { Authorization: `Bearer ${data.token()}` } });

  const [locations, { refetch: refetchLocations }] = createResource(
    () => data.token(),
    async (bearer) => {
      if (!bearer) return [];
      if (bearer.startsWith("demo.")) {
        return [
          { id: "z1", name: cs() ? "Hlavní sál" : "Main Hall", type: "hall", capacity: 20 },
          { id: "z2", name: cs() ? "Soukromá místnost A" : "Private Room A", type: "private", capacity: 4 },
          { id: "z3", name: cs() ? "Ošetřovna" : "Treatment Room", type: "room", capacity: 2 },
        ];
      }
      const response = await (apiClient as any).GET("/v1/catalog/locations", authHeaders());
      return (response.data as any[]) ?? [];
    },
  );

  const [blockedDays, { refetch: refetchBlocked }] = createResource(
    () => [data.token(), activeTab()] as const,
    async ([bearer, tab]) => {
      if (!bearer || tab !== "blocked") return [];
      if (bearer.startsWith("demo.")) return [];
      const response = await (apiClient as any).GET("/v1/catalog/blocked-days", authHeaders());
      return (response.data as any[]) ?? [];
    },
  );

  const [staffMembers] = createResource(
    () => [data.token(), activeTab()] as const,
    async ([bearer, tab]) => {
      if (!bearer || (tab !== "blocked" && tab !== "hours")) return [];
      if (bearer.startsWith("demo.")) {
        return [
          { id: "st1", displayName: "Petra M.", active: true },
          { id: "st2", displayName: "Lucie K.", active: true },
        ];
      }
      try {
        const response = await apiClient.GET("/v1/catalog/staff", authHeaders());
        return ((response.data as any[]) ?? []).filter((m) => m.active);
      } catch {
        return [];
      }
    },
  );

  const staffName = (id: string | null | undefined) =>
    (staffMembers() ?? []).find((m: any) => m.id === id)?.displayName ?? "";

  const [workingHours, { refetch: refetchHours, mutate: mutateHours }] = createResource(
    () => [data.token(), activeTab(), hoursScope()] as const,
    async ([bearer, tab, scope]) => {
      if (!bearer || tab !== "hours") return [];
      if (bearer.startsWith("demo.")) {
        if (scope) {
          return [0, 1, 2, 3, 4, 5, 6].map((d) => ({ dayOfWeek: d, open: d >= 1 && d <= 5 ? "08:00" : "", close: d >= 1 && d <= 5 ? "14:00" : "", isOpen: d >= 1 && d <= 5 }));
        }
        return [0, 1, 2, 3, 4, 5, 6].map((d) => ({ dayOfWeek: d, open: d === 0 ? "" : "09:00", close: d === 0 ? "" : "18:00", isOpen: d !== 0 }));
      }
      const url = scope ? `/v1/catalog/staff/${scope}/working-hours` : "/v1/catalog/working-hours";
      const response = await (apiClient as any).GET(url, authHeaders());
      const rows = (response.data as any[]) ?? [];
      return [0, 1, 2, 3, 4, 5, 6].map((d) => {
        const row = rows.find((r) => r.dayOfWeek === d);
        return { dayOfWeek: d, open: (row?.open ?? "").slice(0, 5), close: (row?.close ?? "").slice(0, 5), isOpen: row?.isOpen ?? false };
      });
    },
  );

  const [classTemplates, { refetch: refetchTemplates }] = createResource(
    () => [data.token(), activeTab()] as const,
    async ([bearer, tab]) => {
      if (!bearer || tab !== "classes") return [];
      if (bearer.startsWith("demo.")) {
        return [{ id: "ct1", title: cs() ? "Jóga pro začátečníky" : "Beginner yoga", durationMinutes: 60, capacity: 8 }];
      }
      const response = await (apiClient as any).GET("/v1/catalog/class-templates", authHeaders());
      return (response.data as any[]) ?? [];
    },
  );

  const [classSessions, { refetch: refetchSessions }] = createResource(
    () => [data.token(), activeTab()] as const,
    async ([bearer, tab]) => {
      if (!bearer || tab !== "classes") return [];
      if (bearer.startsWith("demo.")) {
        const start = new Date(Date.now() + 3 * 86400000);
        return [{ id: "cs1", templateId: "ct1", templateTitle: cs() ? "Jóga pro začátečníky" : "Beginner yoga", locationName: cs() ? "Hlavní sál" : "Main Hall", startsAt: start.toISOString(), endsAt: new Date(start.getTime() + 3600000).toISOString(), capacity: 8, bookedCount: 3, waitlistCount: 2 }];
      }
      const response = await (apiClient as any).GET("/v1/catalog/class-sessions", authHeaders());
      return (response.data as any[]) ?? [];
    },
  );

  const [classSchedules, { refetch: refetchSchedules }] = createResource(
    () => [data.token(), activeTab()] as const,
    async ([bearer, tab]) => {
      if (!bearer || tab !== "classes") return [];
      if (bearer.startsWith("demo.")) {
        return [
          { id: "sch1", templateId: "ct1", templateTitle: cs() ? "Jóga pro začátečníky" : "Beginner yoga", locationId: "z1", locationName: cs() ? "Hlavní sál" : "Main Hall", dayOfWeek: 3, startsLocal: "10:00:00", active: true },
          { id: "sch2", templateId: "ct1", templateTitle: cs() ? "Jóga pro začátečníky" : "Beginner yoga", locationId: "z1", locationName: cs() ? "Hlavní sál" : "Main Hall", dayOfWeek: 6, startsLocal: "09:30:00", active: true },
        ];
      }
      const response = await (apiClient as any).GET("/v1/catalog/class-schedules", authHeaders());
      return (response.data as any[]) ?? [];
    },
  );

  const weekdayName = (dow: number) =>
    data.i18n.t(`dashboard.class.dow.${dow}`) as string;

  const [roster, { refetch: refetchRoster }] = createResource(
    () => [data.token(), expandedSessionId()] as const,
    async ([bearer, sessionId]) => {
      if (!bearer || !sessionId) return null;
      if (bearer.startsWith("demo.")) {
        const start = new Date(Date.now() + 3 * 86400000);
        const mk = (id: string, name: string, email: string, status: string, pos = 0) => ({
          bookingId: id, reference: `BOK-${id.slice(-3).toUpperCase()}`, customerName: name, customerEmail: email,
          status, waitlistPosition: pos, createdAt: start.toISOString(),
        });
        return {
          sessionId,
          templateTitle: cs() ? "Jóga pro začátečníky" : "Beginner yoga",
          locationName: cs() ? "Hlavní sál" : "Main Hall",
          startsAt: start.toISOString(),
          endsAt: new Date(start.getTime() + 3600000).toISOString(),
          capacity: 8,
          confirmed: [
            mk("roster-001", cs() ? "Martina Nováková" : "Martina Novakova", "martina@example.com", "confirmed"),
            mk("roster-002", "David Svoboda", "david@example.com", "confirmed"),
            mk("roster-003", "Alice Johnson", "alice@example.com", "confirmed"),
          ],
          waitlist: [
            mk("roster-004", cs() ? "Jana Kovářová" : "Jana Kovarova", "jana@example.com", "waitlisted", 1),
            mk("roster-005", "Bob Smith", "bob@example.com", "waitlisted", 2),
          ],
        };
      }
      const response = await (apiClient as any).GET(`/v1/catalog/class-sessions/${sessionId}/roster`, authHeaders());
      return response.data ?? null;
    },
  );

  const handlePromote = async (bookingId: string, allowOverCapacity: boolean) => {
    const bearer = data.token();
    if (!bearer || bearer.startsWith("demo.")) {
      data.setDemoNotice(data.i18n.t("dashboard.demo.noModify"));
      return;
    }
    setPromoteBusy(bookingId);
    try {
      const response = await (apiClient as any).POST(`/v1/catalog/bookings/${bookingId}/promote`, {
        ...authHeaders(),
        body: { allowOverCapacity },
      });
      if (response.error) {
        if (response.response?.status === 409 && !allowOverCapacity) {
          setPromoteArmed((prev) => new Set(prev).add(bookingId));
          return;
        }
        throw new Error("promote failed");
      }
      setPromoteArmed((prev) => { const next = new Set(prev); next.delete(bookingId); return next; });
      void refetchRoster(); void refetchSessions(); void data.refetchSummary();
    } catch {
      data.setDemoNotice(data.i18n.t("dashboard.class.promoteFailed"));
    } finally {
      setPromoteBusy(null);
    }
  };

  const resolvedLocations = () => locations() ?? [];
  const locationLimit = () => data.resolvedBilling()?.entitlements?.maxLocations ?? 3;
  const canAddLocation = () => locationLimit() < 0 || resolvedLocations().length < locationLimit();

  const handleAddZone = async () => {
    const bearer = data.token();
    if (!newZoneName().trim()) return;
    if (!canAddLocation()) { setShowUpgradePrompt(true); setShowAddZone(false); return; }
    if (!bearer || bearer.startsWith("demo.")) {
      data.setDemoNotice(data.i18n.t("dashboard.demo.noSave"));
      return;
    }
    try {
      await (apiClient as any).POST("/v1/catalog/locations", {
        ...authHeaders(),
        body: { name: newZoneName().trim(), type: newZoneType(), capacity: newZoneCapacity() },
      });
      setNewZoneName(""); setNewZoneType("room"); setNewZoneCapacity(10); setShowAddZone(false);
      void refetchLocations();
    } catch {
      data.setDemoNotice(data.i18n.t("dashboard.zone.saveFailed"));
    }
  };

  const handleDeleteZone = async (id: string) => {
    const bearer = data.token();
    if (!bearer || bearer.startsWith("demo.")) { data.setDemoNotice(data.i18n.t("dashboard.demo.noDelete")); return; }
    try {
      await (apiClient as any).DELETE(`/v1/catalog/locations/${id}`, authHeaders());
      void refetchLocations();
    } catch {
      data.setDemoNotice(data.i18n.t("dashboard.deleteFailed"));
    }
  };

  const handleAddBlockedDay = async () => {
    const bearer = data.token();
    if (!newBlockedDate()) return;
    if (!bearer || bearer.startsWith("demo.")) { data.setDemoNotice(data.i18n.t("dashboard.demo.noSave")); return; }
    setBlockedSaving(true);
    try {
      await (apiClient as any).POST("/v1/catalog/blocked-days", {
        ...authHeaders(),
        body: {
          date: new Date(`${newBlockedDate()}T00:00:00`).toISOString(),
          type: "closure",
          reason: newBlockedReason().trim() || (data.i18n.t("dashboard.day.closed")),
          ...(newBlockedStaffId() ? { staffId: newBlockedStaffId() } : {}),
        },
      });
      setNewBlockedDate(""); setNewBlockedReason(""); setNewBlockedStaffId("");
      void refetchBlocked();
    } catch {
      data.setDemoNotice(data.i18n.t("dashboard.saveFailed"));
    } finally {
      setBlockedSaving(false);
    }
  };

  const handleDeleteBlockedDay = async (id: string) => {
    const bearer = data.token();
    if (!bearer || bearer.startsWith("demo.")) return;
    try {
      await (apiClient as any).DELETE(`/v1/catalog/blocked-days/${id}`, authHeaders());
      void refetchBlocked();
    } catch { /* noop */ }
  };

  const handleSaveHours = async (day: { dayOfWeek: number; open: string; close: string; isOpen: boolean }) => {
    const bearer = data.token();
    if (!bearer || bearer.startsWith("demo.")) { data.setDemoNotice(data.i18n.t("dashboard.demo.noSave")); return; }
    setHoursSaving(day.dayOfWeek);
    try {
      const scope = hoursScope();
      const url = scope ? `/v1/catalog/staff/${scope}/working-hours/${day.dayOfWeek}` : `/v1/catalog/working-hours/${day.dayOfWeek}`;
      await (apiClient as any).PUT(url, {
        ...authHeaders(),
        body: { open: day.open, close: day.close, isOpen: day.isOpen },
      });
      void refetchHours();
    } catch {
      data.setDemoNotice(data.i18n.t("dashboard.saveFailed"));
    } finally {
      setHoursSaving(null);
    }
  };

  const resetTemplateForm = () => {
    setNewTemplateTitle(""); setNewTemplateDuration(60); setNewTemplateCapacity(8); setEditingTemplateId(null);
  };

  const handleSaveTemplate = async () => {
    const bearer = data.token();
    if (!newTemplateTitle().trim()) return;
    if (!bearer || bearer.startsWith("demo.")) { data.setDemoNotice(data.i18n.t("dashboard.demo.noSave")); return; }
    setTemplateSaving(true);
    try {
      const body = { title: newTemplateTitle().trim(), durationMinutes: newTemplateDuration(), capacity: newTemplateCapacity() };
      const editing = editingTemplateId();
      if (editing) {
        await (apiClient as any).PUT(`/v1/catalog/class-templates/${editing}`, { ...authHeaders(), body });
      } else {
        await (apiClient as any).POST("/v1/catalog/class-templates", { ...authHeaders(), body });
      }
      resetTemplateForm();
      void refetchTemplates(); void refetchSessions();
    } catch {
      data.setDemoNotice(data.i18n.t("dashboard.saveFailed"));
    } finally {
      setTemplateSaving(false);
    }
  };

  const handleEditTemplate = (tpl: any) => {
    setNewTemplateTitle(tpl.title);
    setNewTemplateDuration(tpl.durationMinutes);
    setNewTemplateCapacity(tpl.capacity);
    setEditingTemplateId(tpl.id);
  };

  const handleDeleteTemplate = async (id: string) => {
    const bearer = data.token();
    if (!bearer || bearer.startsWith("demo.")) { data.setDemoNotice(data.i18n.t("dashboard.demo.noDelete")); return; }
    try {
      await (apiClient as any).DELETE(`/v1/catalog/class-templates/${id}`, authHeaders());
      void refetchTemplates(); void refetchSessions();
    } catch {
      data.setDemoNotice(data.i18n.t("dashboard.deleteFailed"));
    }
  };

  const handleAddSession = async () => {
    const bearer = data.token();
    if (!newSessionTemplateId() || !newSessionStartsAt()) return;
    if (!bearer || bearer.startsWith("demo.")) { data.setDemoNotice(data.i18n.t("dashboard.demo.noSave")); return; }
    setSessionSaving(true);
    try {
      await (apiClient as any).POST("/v1/catalog/class-sessions", {
        ...authHeaders(),
        body: {
          templateId: newSessionTemplateId(),
          startsAt: new Date(newSessionStartsAt()).toISOString(),
          ...(newSessionLocationId() ? { locationId: newSessionLocationId() } : {}),
        },
      });
      setNewSessionTemplateId(""); setNewSessionLocationId(""); setNewSessionStartsAt("");
      void refetchSessions();
    } catch {
      data.setDemoNotice(data.i18n.t("dashboard.saveFailed"));
    } finally {
      setSessionSaving(false);
    }
  };

  const handleDeleteSession = async (id: string) => {
    const bearer = data.token();
    if (!bearer || bearer.startsWith("demo.")) { data.setDemoNotice(data.i18n.t("dashboard.demo.noDelete")); return; }
    try {
      await (apiClient as any).DELETE(`/v1/catalog/class-sessions/${id}`, authHeaders());
      void refetchSessions();
    } catch {
      data.setDemoNotice(data.i18n.t("dashboard.deleteFailed"));
    }
  };

  const handleAddSchedule = async () => {
    const bearer = data.token();
    if (!newSchedTemplateId() || !newSchedStartsLocal()) return;
    if (!bearer || bearer.startsWith("demo.")) { data.setDemoNotice(data.i18n.t("dashboard.demo.noSave")); return; }
    setSchedSaving(true);
    try {
      await (apiClient as any).POST("/v1/catalog/class-schedules", {
        ...authHeaders(),
        body: {
          templateId: newSchedTemplateId(),
          dayOfWeek: parseInt(newSchedDayOfWeek(), 10),
          startsLocal: newSchedStartsLocal(),
          ...(newSchedLocationId() ? { locationId: newSchedLocationId() } : {}),
        },
      });
      setNewSchedTemplateId(""); setNewSchedStartsLocal(""); setNewSchedLocationId("");
      void refetchSchedules();
      void refetchSessions();
    } catch {
      data.setDemoNotice(data.i18n.t("dashboard.saveFailed"));
    } finally {
      setSchedSaving(false);
    }
  };

  const startEditSchedule = (sch: any) => {
    setEditingSchedId(sch.id);
    setEditSchedDayOfWeek(String(sch.dayOfWeek));
    setEditSchedStartsLocal(String(sch.startsLocal).slice(0, 5));
    setEditSchedLocationId(sch.locationId ?? "");
    setEditSchedApplyFuture(true);
    setEditSchedActive(sch.active !== false);
  };

  const handleSaveSchedule = async () => {
    const bearer = data.token();
    const id = editingSchedId();
    if (!id) return;
    if (!bearer || bearer.startsWith("demo.")) { data.setDemoNotice(data.i18n.t("dashboard.demo.noSave")); return; }
    setSchedEditSaving(true);
    try {
      await (apiClient as any).PATCH(`/v1/catalog/class-schedules/${id}`, {
        ...authHeaders(),
        body: {
          dayOfWeek: parseInt(editSchedDayOfWeek(), 10),
          startsLocal: editSchedStartsLocal(),
          locationId: editSchedLocationId(),
          active: editSchedActive(),
          applyToFuture: editSchedApplyFuture(),
        },
      });
      setEditingSchedId(null);
      void refetchSchedules();
      void refetchSessions();
    } catch {
      data.setDemoNotice(data.i18n.t("dashboard.saveFailed"));
    } finally {
      setSchedEditSaving(false);
    }
  };

  const startEditCapacity = (session: any) => {
    setEditingCapSessionId(session.id);
    setEditCapValue(session.capacity);
    setCapOverbookConfirm(null);
  };

  const handleSaveCapacity = async (session: any, allowOverCapacity: boolean) => {
    const bearer = data.token();
    if (!bearer || bearer.startsWith("demo.")) { data.setDemoNotice(data.i18n.t("dashboard.demo.noSave")); return; }
    setCapSaving(true);
    try {
      const response = await (apiClient as any).PATCH(`/v1/catalog/class-sessions/${session.id}`, {
        ...authHeaders(),
        body: { capacity: editCapValue(), allowOverCapacity },
      });
      if (response.response?.status === 409 && !allowOverCapacity) {
        setCapOverbookConfirm(session.id);
        return;
      }
      setEditingCapSessionId(null);
      setCapOverbookConfirm(null);
      void refetchSessions();
    } catch {
      data.setDemoNotice(data.i18n.t("dashboard.saveFailed"));
    } finally {
      setCapSaving(false);
    }
  };

  const handleDeleteSchedule = async (id: string) => {
    const bearer = data.token();
    if (!bearer || bearer.startsWith("demo.")) { data.setDemoNotice(data.i18n.t("dashboard.demo.noDelete")); return; }
    try {
      await (apiClient as any).DELETE(`/v1/catalog/class-schedules/${id}`, authHeaders());
      void refetchSchedules();
    } catch {
      data.setDemoNotice(data.i18n.t("dashboard.deleteFailed"));
    }
  };

  const typeLabel = (type: string) => {
    const map: Record<string, string> = { room: data.i18n.t("dashboard.zone.rooms"), private: data.i18n.t("dashboard.zone.private"), hall: data.i18n.t("dashboard.zone.hall") };
    return map[type] || type;
  };

  const dayLabel = (d: number) => {
    const labels = cs()
      ? ["Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota"]
      : ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    return labels[d];
  };

  return (
    <div class="space-y-6">
      <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h1 class="text-2xl sm:text-3xl font-bold text-ink font-display">{data.i18n.t("dashboard.zones")}</h1>
          <p class="text-ink-muted mt-1">{resolvedLocations().length} {cs() ? "zón" : "locations"}</p>
        </div>
      </div>

      <div class="flex flex-wrap gap-2 p-1 bg-canvas-subtle rounded-xl w-fit max-w-full">
        {[
          { id: "zones", label: data.i18n.t("dashboard.zones"), icon: MapPinIcon },
          { id: "blocked", label: data.i18n.t("dashboard.zone.blockedDays"), icon: BanIcon },
          { id: "hours", label: data.i18n.t("dashboard.zone.workingHours"), icon: ClockIcon },
          { id: "classes", label: data.i18n.t("dashboard.classes"), icon: UsersIcon },
        ].map((tab) => (
          <button onClick={() => setActiveTab(tab.id as any)} class={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${activeTab() === tab.id ? "bg-canvas text-accent shadow-sm" : "text-ink-muted hover:text-ink"}`}>
            <tab.icon /> {tab.label}
          </button>
        ))}
      </div>

      {activeTab() === "zones" && (
        <div class="surface-card overflow-hidden">
          <div class="p-6 border-b border-border flex items-center justify-between">
            <h3 class="text-lg font-display font-semibold text-ink">{data.i18n.t("dashboard.zones")}</h3>
            <Show when={canAddLocation()} fallback={
              <button onClick={() => setShowUpgradePrompt(true)} class="flex items-center gap-2 px-4 py-2 bg-canvas-subtle text-ink-muted border border-border rounded-lg text-sm opacity-60 cursor-not-allowed">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                {data.i18n.t("dashboard.zone.limitReached")}
              </button>
            }>
              <button onClick={() => setShowAddZone(true)} class="btn-primary text-sm"><PlusIcon /> {data.i18n.t("dashboard.zone.add")}</button>
            </Show>
          </div>
          <Show when={showAddZone()}>
            <div class="p-6 border-b border-border bg-canvas-subtle/50">
              <h4 class="font-medium text-ink mb-4">{data.i18n.t("dashboard.zone.add")}</h4>
              <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <Input type="text" label={data.i18n.t("dashboard.zone.name")} value={newZoneName()} onInput={(e) => setNewZoneName(e.currentTarget.value)} placeholder={cs() ? "např. Hlavní sál" : "e.g. Main Hall"} />
                <Select label={data.i18n.t("dashboard.zone.type")} value={newZoneType()} onChange={(v) => setNewZoneType(v)} options={[{ value: "room", label: data.i18n.t("dashboard.zone.rooms") }, { value: "private", label: data.i18n.t("dashboard.zone.private") }, { value: "hall", label: data.i18n.t("dashboard.zone.hall") }]} />
                <Input type="number" label={data.i18n.t("dashboard.zone.capacity")} value={newZoneCapacity()} onInput={(e) => setNewZoneCapacity(parseInt(e.currentTarget.value) || 10)} />
              </div>
              <div class="flex gap-3 mt-4">
                <button onClick={() => void handleAddZone()} class="btn-primary text-sm">{data.i18n.t("dashboard.settings.save")}</button>
                <button onClick={() => setShowAddZone(false)} class="btn-secondary text-sm">{data.i18n.t("common.cancel")}</button>
              </div>
            </div>
          </Show>
          <Show when={resolvedLocations().length > 0} fallback={
            <div class="p-12 text-center">
              <p class="text-ink-muted font-medium">{data.i18n.t("dashboard.empty.title")}</p>
              <p class="text-sm text-ink-subtle mt-1">{data.i18n.t("dashboard.zone.addFirst")}</p>
            </div>
          }>
            <div class="divide-y divide-border/60">
              {resolvedLocations().map((zone: any) => (
                <div class="flex items-center justify-between p-6 hover:bg-canvas-subtle/30 transition-colors">
                  <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-xl bg-accent-subtle/50 flex items-center justify-center text-accent"><MapPinIcon /></div>
                    <div>
                      <h4 class="font-medium text-ink">{zone.name}</h4>
                      <p class="text-sm text-ink-muted">{typeLabel(zone.type)} &bull; {data.i18n.t("dashboard.zone.capacity")}: {zone.capacity}</p>
                    </div>
                  </div>
                  <button onClick={() => void handleDeleteZone(zone.id)} class="p-2 text-ink-subtle hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" aria-label={data.i18n.t("dashboard.action.delete")}>
                    <Trash2Icon />
                  </button>
                </div>
              ))}
            </div>
          </Show>
        </div>
      )}

      {activeTab() === "blocked" && (
        <div class="surface-card overflow-hidden">
          <div class="p-6 border-b border-border">
            <h3 class="text-lg font-display font-semibold text-ink">{data.i18n.t("dashboard.zone.blockedDays")}</h3>
            <p class="text-sm text-ink-muted mt-1">{data.i18n.t("dashboard.blockedDay.hint")}</p>
          </div>
          <div class="p-6 border-b border-border bg-canvas-subtle/50">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              <Input type="date" label={data.i18n.t("dashboard.blockedDay.date")} value={newBlockedDate()} onInput={(e) => setNewBlockedDate(e.currentTarget.value)} />
              <Input type="text" label={cs() ? "Důvod" : "Reason"} value={newBlockedReason()} onInput={(e) => setNewBlockedReason(e.currentTarget.value)} placeholder={data.i18n.t("dashboard.blockedDay.placeholder")} />
              <Select
                label={data.i18n.t("dashboard.zone.staff")}
                value={newBlockedStaffId()}
                onChange={(v) => setNewBlockedStaffId(v)}
                options={[
                  { value: "", label: data.i18n.t("dashboard.zone.allStaff") },
                  ...(staffMembers() ?? []).map((m: any) => ({ value: m.id, label: m.displayName })),
                ]}
              />
              <div class="flex items-end">
                <button onClick={() => void handleAddBlockedDay()} disabled={blockedSaving() || !newBlockedDate()} class="btn-primary text-sm w-full sm:w-auto disabled:opacity-60">
                  {blockedSaving() ? data.i18n.t("dashboard.saving") : data.i18n.t("dashboard.settings.save")}
                </button>
              </div>
            </div>
          </div>
          <Show when={(blockedDays() ?? []).length > 0} fallback={
            <div class="p-12 text-center">
              <div class="w-16 h-16 rounded-full bg-canvas-subtle flex items-center justify-center mx-auto mb-4"><BanIcon /></div>
              <p class="text-ink-muted font-medium">{data.i18n.t("dashboard.empty.title")}</p>
              <p class="text-sm text-ink-muted">{data.i18n.t("dashboard.blockedDay.empty")}</p>
            </div>
          }>
            <div class="divide-y divide-border/60">
              <For each={blockedDays() ?? []}>
                {(day: any) => (
                  <div class="flex items-center justify-between p-4 px-6">
                    <div>
                      <p class="font-medium text-ink">{new Date(day.date).toLocaleDateString(cs() ? "cs-CZ" : "en-US", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}</p>
                      <p class="text-sm text-ink-muted">
                        {day.reason || "—"}
                        <Show when={staffName(day.staffId)}>
                          <span class="text-ink-subtle"> &bull; {staffName(day.staffId)}</span>
                        </Show>
                      </p>
                    </div>
                    <button onClick={() => void handleDeleteBlockedDay(day.id)} class="p-2 text-ink-subtle hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"><Trash2Icon /></button>
                  </div>
                )}
              </For>
            </div>
          </Show>
        </div>
      )}

      {activeTab() === "hours" && (
        <div class="surface-card overflow-hidden">
          <div class="p-6 border-b border-border flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <h3 class="text-lg font-display font-semibold text-ink">{data.i18n.t("dashboard.zone.workingHours")}</h3>
              <p class="text-sm text-ink-muted mt-1">{data.i18n.t("dashboard.availability.hint")}</p>
            </div>
            <div class="w-full sm:w-56 shrink-0">
              <Select
                label={data.i18n.t("dashboard.zone.staff")}
                value={hoursScope()}
                onChange={(v) => setHoursScope(v)}
                options={[
                  { value: "", label: data.i18n.t("dashboard.zone.businessHours") },
                  ...(staffMembers() ?? []).map((m: any) => ({ value: m.id, label: m.displayName })),
                ]}
              />
            </div>
          </div>
          <div class="divide-y divide-border/60">
            <For each={workingHours() ?? []}>
              {(day) => {
                const isOpen = () => day.isOpen;
                const setField = (patch: Partial<typeof day>) => {
                  const updated = { ...day, ...patch };
                  mutateHours((workingHours() ?? []).map((d) => (d.dayOfWeek === day.dayOfWeek ? updated : d)));
                };
                return (
                  <div class="flex flex-col sm:flex-row sm:items-center gap-3 p-4 px-6">
                    <div class="w-32 shrink-0 font-medium text-ink">{dayLabel(day.dayOfWeek)}</div>
                    <label class="flex items-center gap-2 text-sm text-ink-muted shrink-0">
                      <input
                        type="checkbox"
                        checked={isOpen()}
                        onChange={(e) => setField({ isOpen: e.currentTarget.checked, open: e.currentTarget.checked ? (day.open || "09:00") : day.open, close: e.currentTarget.checked ? (day.close || "18:00") : day.close })}
                        class="rounded border-border accent-[#c25e3a]"
                      />
                      {data.i18n.t("dashboard.day.open")}
                    </label>
                    <Show when={isOpen()}>
                      <div class="flex items-center gap-2">
                        <input type="time" value={day.open} onInput={(e) => setField({ open: e.currentTarget.value })} class="px-3 py-2 bg-canvas-subtle border border-border rounded-lg text-sm text-ink" />
                        <span class="text-ink-muted">–</span>
                        <input type="time" value={day.close} onInput={(e) => setField({ close: e.currentTarget.value })} class="px-3 py-2 bg-canvas-subtle border border-border rounded-lg text-sm text-ink" />
                      </div>
                    </Show>
                    <button onClick={() => void handleSaveHours(workingHours()?.find((d) => d.dayOfWeek === day.dayOfWeek) ?? day)} disabled={hoursSaving() === day.dayOfWeek} class="sm:ml-auto px-4 py-2 bg-accent text-canvas text-sm font-medium rounded-lg hover:bg-accent-hover transition-colors disabled:opacity-60">
                      {hoursSaving() === day.dayOfWeek ? "…" : data.i18n.t("dashboard.settings.save")}
                    </button>
                  </div>
                );
              }}
            </For>
          </div>
        </div>
      )}

      {activeTab() === "classes" && (
        <div class="space-y-6">
          <div class="surface-card overflow-hidden">
            <div class="p-6 border-b border-border">
              <h3 class="text-lg font-display font-semibold text-ink">{data.i18n.t("dashboard.class.templates")}</h3>
              <p class="text-sm text-ink-muted mt-1">{data.i18n.t("dashboard.class.sessionHint")}</p>
            </div>
            <div class="p-6 border-b border-border bg-canvas-subtle/50">
              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <Input type="text" label={data.i18n.t("dashboard.class.title")} value={newTemplateTitle()} onInput={(e) => setNewTemplateTitle(e.currentTarget.value)} placeholder={data.i18n.t("dashboard.class.titlePlaceholder")} />
                <Input type="number" label={data.i18n.t("dashboard.class.durationMin")} value={newTemplateDuration()} onInput={(e) => setNewTemplateDuration(parseInt(e.currentTarget.value) || 60)} />
                <Input type="number" label={data.i18n.t("dashboard.zone.capacity")} value={newTemplateCapacity()} onInput={(e) => setNewTemplateCapacity(parseInt(e.currentTarget.value) || 8)} />
                <div class="flex items-end">
                  <button onClick={() => void handleSaveTemplate()} disabled={templateSaving() || !newTemplateTitle().trim()} class="btn-primary text-sm w-full sm:w-auto disabled:opacity-60">
                    {templateSaving() ? data.i18n.t("dashboard.saving") : editingTemplateId() ? data.i18n.t("dashboard.class.saveChanges") : data.i18n.t("dashboard.class.addTemplate")}
                  </button>
                  <Show when={editingTemplateId()}>
                    <button onClick={resetTemplateForm} class="text-sm text-ink-muted hover:text-ink px-3 py-2">
                      {data.i18n.t("dashboard.cancel")}
                    </button>
                  </Show>
                </div>
              </div>
            </div>
            <Show when={(classTemplates() ?? []).length > 0} fallback={
              <div class="p-10 text-center">
                <p class="text-ink-muted font-medium">{data.i18n.t("dashboard.class.noTemplates")}</p>
              </div>
            }>
              <div class="divide-y divide-border/60">
                <For each={classTemplates() ?? []}>
                  {(tpl: any) => (
                    <div class="flex items-center justify-between p-4 px-6">
                      <div class="flex items-center gap-4">
                        <div class="w-10 h-10 rounded-xl bg-accent-subtle/50 flex items-center justify-center text-accent"><UsersIcon /></div>
                        <div>
                          <p class="font-medium text-ink">{tpl.title}</p>
                          <p class="text-sm text-ink-muted">{tpl.durationMinutes} {data.i18n.t("dashboard.service.min")} &bull; {data.i18n.t("dashboard.zone.capacity")}: {tpl.capacity}</p>
                        </div>
                      </div>
                      <div class="flex items-center gap-1">
                        <button onClick={() => handleEditTemplate(tpl)} class="p-2 text-ink-subtle hover:text-accent hover:bg-accent-subtle rounded-lg transition-colors"><PencilIcon /></button>
                        <button onClick={() => void handleDeleteTemplate(tpl.id)} class="p-2 text-ink-subtle hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"><Trash2Icon /></button>
                      </div>
                    </div>
                  )}
                </For>
              </div>
            </Show>
          </div>

          <div class="surface-card overflow-hidden">
            <div class="p-6 border-b border-border">
              <h3 class="text-lg font-display font-semibold text-ink">{data.i18n.t("dashboard.class.recurring")}</h3>
              <p class="text-sm text-ink-muted mt-1">{data.i18n.t("dashboard.class.recurringHint")}</p>
            </div>
            <div class="p-6 border-b border-border bg-canvas-subtle/50">
              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
                <Select
                  label={data.i18n.t("dashboard.class.template")}
                  value={newSchedTemplateId()}
                  onChange={(v) => setNewSchedTemplateId(v)}
                  options={[
                    { value: "", label: "—" },
                    ...(classTemplates() ?? []).map((t: any) => ({ value: t.id, label: t.title })),
                  ]}
                />
                <Select
                  label={data.i18n.t("dashboard.class.weekday")}
                  value={newSchedDayOfWeek()}
                  onChange={(v) => setNewSchedDayOfWeek(v)}
                  options={[1, 2, 3, 4, 5, 6, 0].map((d) => ({ value: String(d), label: weekdayName(d) }))}
                />
                <Input type="time" label={data.i18n.t("dashboard.class.startsLocal")} value={newSchedStartsLocal()} onInput={(e) => setNewSchedStartsLocal(e.currentTarget.value)} />
                <Select
                  label={data.i18n.t("dashboard.class.location")}
                  value={newSchedLocationId()}
                  onChange={(v) => setNewSchedLocationId(v)}
                  options={[
                    { value: "", label: data.i18n.t("dashboard.class.noLocation") },
                    ...resolvedLocations().map((l: any) => ({ value: l.id, label: l.name })),
                  ]}
                />
                <div class="flex items-end">
                  <button onClick={() => void handleAddSchedule()} disabled={schedSaving() || !newSchedTemplateId() || !newSchedStartsLocal()} class="btn-primary text-sm w-full sm:w-auto disabled:opacity-60">
                    {schedSaving() ? data.i18n.t("dashboard.saving") : data.i18n.t("dashboard.class.addSchedule")}
                  </button>
                </div>
              </div>
            </div>
            <Show when={(classSchedules() ?? []).length > 0} fallback={
              <div class="p-10 text-center">
                <p class="text-ink-muted font-medium">{data.i18n.t("dashboard.class.noSchedules")}</p>
              </div>
            }>
              <div class="divide-y divide-border/60">
                <For each={classSchedules() ?? []}>
                  {(sch: any) => (
                    <Show
                      when={editingSchedId() === sch.id}
                      fallback={
                        <div class="flex items-center justify-between p-4 px-6">
                          <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-xl bg-accent-subtle/50 flex items-center justify-center text-accent"><CalendarDaysIcon /></div>
                            <div>
                              <p class="font-medium text-ink">{sch.templateTitle}</p>
                              <p class="text-sm text-ink-muted">
                                {`${weekdayName(sch.dayOfWeek)} ${String(sch.startsLocal).slice(0, 5)}`}
                                {sch.locationName ? ` • ${sch.locationName}` : ""}
                                {!sch.active ? ` • ${data.i18n.t("dashboard.class.inactive")}` : ""}
                              </p>
                            </div>
                          </div>
                          <div class="flex items-center gap-1">
                            <button onClick={() => startEditSchedule(sch)} class="p-2 text-ink-subtle hover:text-accent hover:bg-accent-subtle/40 rounded-lg transition-colors" aria-label={data.i18n.t("dashboard.class.editSchedule")}><PencilIcon /></button>
                            <button onClick={() => void handleDeleteSchedule(sch.id)} class="p-2 text-ink-subtle hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" aria-label={data.i18n.t("dashboard.action.delete")}><Trash2Icon /></button>
                          </div>
                        </div>
                      }
                    >
                      <div class="p-4 px-6 bg-canvas-subtle/40">
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                          <Select
                            label={data.i18n.t("dashboard.class.weekday")}
                            value={editSchedDayOfWeek()}
                            onChange={(v) => setEditSchedDayOfWeek(v)}
                            options={[1, 2, 3, 4, 5, 6, 0].map((d) => ({ value: String(d), label: weekdayName(d) }))}
                          />
                          <Input type="time" label={data.i18n.t("dashboard.class.startsLocal")} value={editSchedStartsLocal()} onInput={(e) => setEditSchedStartsLocal(e.currentTarget.value)} />
                          <Select
                            label={data.i18n.t("dashboard.class.location")}
                            value={editSchedLocationId()}
                            onChange={(v) => setEditSchedLocationId(v)}
                            options={[
                              { value: "", label: data.i18n.t("dashboard.class.noLocation") },
                              ...resolvedLocations().map((l: any) => ({ value: l.id, label: l.name })),
                            ]}
                          />
                        </div>
                        <label class="flex items-start gap-2 mt-4 cursor-pointer">
                          <input type="checkbox" checked={editSchedActive()} onChange={(e) => setEditSchedActive(e.currentTarget.checked)} class="mt-0.5 accent-accent" />
                          <span class="text-sm font-medium text-ink">{data.i18n.t("dashboard.class.ruleActive")}</span>
                        </label>
                        <label class="flex items-start gap-2 mt-3 cursor-pointer">
                          <input type="checkbox" checked={editSchedApplyFuture()} onChange={(e) => setEditSchedApplyFuture(e.currentTarget.checked)} class="mt-0.5 accent-accent" />
                          <span>
                            <span class="text-sm font-medium text-ink">{data.i18n.t("dashboard.class.applyToFuture")}</span>
                            <span class="block text-xs text-ink-muted">{data.i18n.t("dashboard.class.applyToFutureHint")}</span>
                          </span>
                        </label>
                        <div class="flex items-center gap-2 mt-4">
                          <button onClick={() => void handleSaveSchedule()} disabled={schedEditSaving() || !editSchedStartsLocal()} class="btn-primary text-sm disabled:opacity-60">
                            <CheckIcon /> {schedEditSaving() ? data.i18n.t("dashboard.saving") : data.i18n.t("dashboard.saveChanges")}
                          </button>
                          <button onClick={() => setEditingSchedId(null)} class="btn-secondary text-sm">
                            <XIcon /> {data.i18n.t("dashboard.cancel")}
                          </button>
                        </div>
                      </div>
                    </Show>
                  )}
                </For>
              </div>
            </Show>
          </div>

          <div class="surface-card overflow-hidden">
            <div class="p-6 border-b border-border">
              <h3 class="text-lg font-display font-semibold text-ink">{data.i18n.t("dashboard.class.sessions")}</h3>
            </div>
            <div class="p-6 border-b border-border bg-canvas-subtle/50">
              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <Select
                  label={data.i18n.t("dashboard.class.template")}
                  value={newSessionTemplateId()}
                  onChange={(v) => setNewSessionTemplateId(v)}
                  options={[
                    { value: "", label: "—" },
                    ...(classTemplates() ?? []).map((t: any) => ({ value: t.id, label: t.title })),
                  ]}
                />
                <Select
                  label={data.i18n.t("dashboard.class.location")}
                  value={newSessionLocationId()}
                  onChange={(v) => setNewSessionLocationId(v)}
                  options={[
                    { value: "", label: data.i18n.t("dashboard.class.noLocation") },
                    ...resolvedLocations().map((l: any) => ({ value: l.id, label: l.name })),
                  ]}
                />
                <Input type="datetime-local" label={data.i18n.t("dashboard.class.startsAt")} value={newSessionStartsAt()} onInput={(e) => setNewSessionStartsAt(e.currentTarget.value)} />
                <div class="flex items-end">
                  <button onClick={() => void handleAddSession()} disabled={sessionSaving() || !newSessionTemplateId() || !newSessionStartsAt()} class="btn-primary text-sm w-full sm:w-auto disabled:opacity-60">
                    {sessionSaving() ? data.i18n.t("dashboard.saving") : data.i18n.t("dashboard.class.addSession")}
                  </button>
                </div>
              </div>
            </div>
            <Show when={(classSessions() ?? []).length > 0} fallback={
              <div class="p-10 text-center">
                <p class="text-ink-muted font-medium">{data.i18n.t("dashboard.class.noSessions")}</p>
              </div>
            }>
              <div class="divide-y divide-border/60">
                <For each={classSessions() ?? []}>
                  {(session: any) => {
                    const expanded = () => expandedSessionId() === session.id;
                    return (
                      <div>
                        <div class="flex items-center justify-between gap-3 p-4 px-6">
                          <div class="min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                              <p class="font-medium text-ink">{session.templateTitle}</p>
                              <Show when={session.waitlistCount > 0}>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium bg-warning-subtle text-warning">
                                  {session.waitlistCount} {data.i18n.t("dashboard.class.waiting")}
                                </span>
                              </Show>
                            </div>
                            <p class="text-sm text-ink-muted">
                              {new Date(session.startsAt).toLocaleString(cs() ? "cs-CZ" : "en-US", { weekday: "short", day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" })}
                              {session.locationName ? ` • ${session.locationName}` : ""}
                              {` • ${session.bookedCount}/${session.capacity} ${data.i18n.t("dashboard.class.booked")}`}
                            </p>
                          </div>
                          <div class="flex items-center gap-1 shrink-0">
                            <button
                              onClick={() => setExpandedSessionId(expanded() ? null : session.id)}
                              class={`flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-lg transition-colors ${expanded() ? "bg-accent-subtle text-accent" : "text-ink-muted hover:text-ink hover:bg-canvas-subtle"}`}
                            >
                              {expanded() ? data.i18n.t("dashboard.class.hideRoster") : data.i18n.t("dashboard.class.showRoster")}
                              <span class={`inline-flex transition-transform duration-200 ${expanded() ? "rotate-180" : ""}`}><ChevronDownIcon /></span>
                            </button>
                            <button onClick={() => startEditCapacity(session)} class="p-2 text-ink-subtle hover:text-accent hover:bg-accent-subtle/40 rounded-lg transition-colors" aria-label={data.i18n.t("dashboard.class.editCapacity")}><PencilIcon /></button>
                            <button onClick={() => void handleDeleteSession(session.id)} class="p-2 text-ink-subtle hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" aria-label={data.i18n.t("dashboard.action.delete")}><Trash2Icon /></button>
                          </div>
                        </div>
                        <Show when={editingCapSessionId() === session.id}>
                          <div class="px-6 pb-4 animate-fade-in">
                            <div class="flex flex-wrap items-end gap-3 rounded-xl border border-border/60 bg-canvas-subtle/30 p-4">
                              <Input type="number" label={data.i18n.t("dashboard.class.capacityLabel")} value={String(editCapValue())} min={1} onInput={(e) => setEditCapValue(parseInt(e.currentTarget.value, 10) || 0)} />
                              <button onClick={() => void handleSaveCapacity(session, capOverbookConfirm() === session.id)} disabled={capSaving() || editCapValue() < 1} class="btn-primary text-sm disabled:opacity-60">
                                <CheckIcon /> {capSaving() ? data.i18n.t("dashboard.saving") : data.i18n.t("dashboard.saveChanges")}
                              </button>
                              <button onClick={() => { setEditingCapSessionId(null); setCapOverbookConfirm(null); }} class="btn-secondary text-sm">
                                <XIcon /> {data.i18n.t("dashboard.cancel")}
                              </button>
                              <Show when={capOverbookConfirm() === session.id}>
                                <p class="w-full text-sm text-warning font-medium">{data.i18n.t("dashboard.class.capacityOverbookHint")}</p>
                              </Show>
                            </div>
                          </div>
                        </Show>
                        <Show when={expanded()}>
                          <div class="px-6 pb-5 animate-fade-in">
                            <div class="rounded-xl border border-border/60 bg-canvas-subtle/30 overflow-hidden">
                              <Show when={!roster.loading} fallback={
                                <div class="p-8 text-center text-sm text-ink-muted animate-pulse">…</div>
                              }>
                                <div class="grid sm:grid-cols-2 divide-y sm:divide-y-0 sm:divide-x divide-border/60">
                                  <div class="p-4">
                                    <p class="text-xs font-semibold uppercase tracking-wider text-ink-muted mb-3">
                                      {data.i18n.t("dashboard.class.attendees")} ({(roster()?.confirmed ?? []).length}/{roster()?.capacity ?? session.capacity})
                                    </p>
                                    <Show when={(roster()?.confirmed ?? []).length > 0} fallback={
                                      <p class="text-sm text-ink-subtle">{data.i18n.t("dashboard.class.noAttendees")}</p>
                                    }>
                                      <div class="space-y-2">
                                        <For each={roster()?.confirmed ?? []}>
                                          {(entry: any) => (
                                            <div class="flex items-center gap-3">
                                              <div class="w-8 h-8 rounded-full bg-accent-subtle flex items-center justify-center text-[11px] font-bold text-accent shrink-0">
                                                {getInitials(entry.customerName)}
                                              </div>
                                              <div class="min-w-0 flex-1">
                                                <p class="text-sm font-medium text-ink truncate">{entry.customerName}</p>
                                                <p class="text-xs text-ink-muted truncate">{entry.customerEmail} • {entry.reference}</p>
                                              </div>
                                            </div>
                                          )}
                                        </For>
                                      </div>
                                    </Show>
                                  </div>
                                  <div class="p-4">
                                    <p class="text-xs font-semibold uppercase tracking-wider text-ink-muted mb-3">
                                      {data.i18n.t("dashboard.class.waitlist")} ({(roster()?.waitlist ?? []).length})
                                    </p>
                                    <Show when={(roster()?.waitlist ?? []).length > 0} fallback={
                                      <p class="text-sm text-ink-subtle">{data.i18n.t("dashboard.class.noWaitlist")}</p>
                                    }>
                                      <div class="space-y-2">
                                        <For each={roster()?.waitlist ?? []}>
                                          {(entry: any) => (
                                            <div class="flex items-center gap-3">
                                              <div class="w-8 h-8 rounded-full bg-warning-subtle flex items-center justify-center text-[11px] font-bold text-warning shrink-0">
                                                #{entry.waitlistPosition}
                                              </div>
                                              <div class="min-w-0 flex-1">
                                                <p class="text-sm font-medium text-ink truncate">{entry.customerName}</p>
                                                <p class="text-xs text-ink-muted truncate">{entry.customerEmail} • {entry.reference}</p>
                                              </div>
                                              <Show
                                                when={!promoteArmed().has(entry.bookingId)}
                                                fallback={
                                                  <button
                                                    onClick={() => void handlePromote(entry.bookingId, true)}
                                                    disabled={promoteBusy() === entry.bookingId}
                                                    title={data.i18n.t("dashboard.class.promoteFull")}
                                                    class="shrink-0 px-2.5 py-1.5 text-xs font-medium rounded-lg bg-warning text-canvas hover:opacity-90 transition-opacity disabled:opacity-60"
                                                  >
                                                    {promoteBusy() === entry.bookingId ? "…" : data.i18n.t("dashboard.class.promoteConfirm")}
                                                  </button>
                                                }
                                              >
                                                <button
                                                  onClick={() => void handlePromote(entry.bookingId, false)}
                                                  disabled={promoteBusy() === entry.bookingId}
                                                  class="shrink-0 px-2.5 py-1.5 text-xs font-medium rounded-lg bg-accent text-canvas hover:bg-accent-hover transition-colors disabled:opacity-60"
                                                >
                                                  {promoteBusy() === entry.bookingId ? "…" : data.i18n.t("dashboard.class.promote")}
                                                </button>
                                              </Show>
                                            </div>
                                          )}
                                        </For>
                                      </div>
                                    </Show>
                                  </div>
                                </div>
                              </Show>
                            </div>
                          </div>
                        </Show>
                      </div>
                    );
                  }}
                </For>
              </div>
            </Show>
          </div>
        </div>
      )}

      <Show when={showUpgradePrompt()}>
        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div class="absolute inset-0 bg-ink/50 backdrop-blur-sm" onClick={() => setShowUpgradePrompt(false)} />
          <div class="relative bg-canvas rounded-2xl shadow-2xl w-full max-w-md p-6 animate-scale-in">
            <div class="flex items-start gap-4">
              <div class="w-10 h-10 rounded-full bg-accent-subtle flex items-center justify-center shrink-0"><SparklesIcon /></div>
              <div class="flex-1">
                <h4 class="font-medium text-ink mb-1">{data.i18n.t("dashboard.locationLimitReached")}</h4>
                <p class="text-sm text-ink-muted">{data.i18n.t("dashboard.zone.limitHint")}</p>
                <div class="flex gap-3 mt-3">
                  <button onClick={() => { setShowUpgradePrompt(false); void data.openCheckout(); }} class="px-4 py-2 bg-accent text-canvas text-sm font-medium rounded-lg hover:bg-accent-hover transition-colors">{data.i18n.t("dashboard.upgrade")}</button>
                  <button onClick={() => setShowUpgradePrompt(false)} class="px-4 py-2 bg-canvas-subtle text-ink-muted text-sm font-medium rounded-lg hover:bg-canvas transition-colors">{data.i18n.t("dashboard.close")}</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Show>
    </div>
  );
}

export default function ZonesRoute() {
  return (
    <DashboardLayout>
      <ZonesPage />
    </DashboardLayout>
  );
}