import { Show, For, createResource, createSignal, createMemo, createEffect, type JSX } from "solid-js";
import { A, useSearchParams } from "@solidjs/router";
import { apiClient } from "../lib/api-client";
import { getPaddle, paddleConfigured } from "../lib/paddle";
import { getStripe, stripeConfigured } from "../lib/stripe";
import { useAuth } from "../providers/auth-provider";
import { useI18n } from "../providers/i18n-provider";
import { useTheme } from "../providers/theme-provider";
import { BookraCharacter } from "../components/bookra-character";
import { WidgetBuilder } from "../components/widget-builder";
import { IntegrationModal } from "../components/integration-modal";
import { SMSSettings } from "../components/sms-settings";
import { Select } from "../components/ui/select";
import { Input } from "../components/ui/input";
import { Textarea } from "../components/ui/textarea";
import { RevenueChart } from "../components/dashboard/revenue-chart";
import { CalendarView } from "../components/dashboard/calendar-view";
import { NotificationDropdown } from "../components/dashboard/notification-dropdown";
import type { Section } from "../components/dashboard/types";
import { getInitials, getBookingDuration } from "../components/dashboard/types";
import {
  LayoutDashboardIcon, CalendarDaysIcon, CreditCardIcon, Settings2Icon,
  LogOutIcon, MenuIcon, XIcon, TrendingUpIcon, TrendingDownIcon,
  ClockIcon, CheckCircleIcon, AlertCircleIcon, MoreHorizontalIcon,
  ChevronLeftIcon, ChevronRightIcon, SparklesIcon, BellIcon, PlusIcon,
  UsersIcon, UserCircleIcon, MapPinIcon, BarChart3Icon, CheckIcon,
  SunIcon, MoonIcon, GlobeIcon, PaletteIcon, MailIcon, XCircleIcon,
  BanIcon, ClockOffIcon, Trash2Icon, EditIcon, EyeIcon
} from "../components/dashboard/icons";

// ============================================
// DEMO DATA
// ============================================
function createDemoData(i18n: ReturnType<typeof useI18n>) {
  const cs = i18n.locale() === "cs";
  const now = new Date();
  const fmt = (d: Date) => d.toISOString();
  const addDays = (n: number) => { const d = new Date(now); d.setDate(d.getDate() + n); return d; };
  const addHours = (d: Date, h: number) => { const r = new Date(d); r.setHours(r.getHours() + h); return r; };

  const services = cs
    ? ["Masaz", "Kosmetika", "Fyzioterapie", "Manikura"]
    : ["Massage", "Cosmetics", "Physiotherapy", "Manicure"];
  const customers = [
    { name: cs ? "Martina Novakova" : "Martina Novakova", email: "martina@example.com" },
    { name: cs ? "David Svoboda" : "David Svoboda", email: "david@example.com" },
    { name: cs ? "Jana KovarovA" : "Jana KovarovA", email: "jana@example.com" },
    { name: cs ? "Alice Johnson" : "Alice Johnson", email: "alice@example.com" },
    { name: cs ? "Bob Smith" : "Bob Smith", email: "bob@example.com" },
  ];

  const allBookings = [
    { id: "b1", customerName: customers[0].name, customerEmail: customers[0].email, service: services[0], status: "confirmed", startsAt: fmt(addHours(addDays(0), 10)), endsAt: fmt(addHours(addDays(0), 11)), reference: "BOK-001", location: cs ? "Hlavni salon" : "Main Salon", staffName: cs ? "Petra M." : "Petra M.", notes: "" },
    { id: "b2", customerName: customers[1].name, customerEmail: customers[1].email, service: services[1], status: "pending", startsAt: fmt(addHours(addDays(1), 14)), endsAt: fmt(addHours(addDays(1), 15)), reference: "BOK-002", location: cs ? "Hlavni salon" : "Main Salon", staffName: cs ? "Lucie K." : "Lucie K.", notes: "" },
    { id: "b3", customerName: customers[2].name, customerEmail: customers[2].email, service: services[2], status: "confirmed", startsAt: fmt(addHours(addDays(2), 9)), endsAt: fmt(addHours(addDays(2), 10)), reference: "BOK-003", location: cs ? "Studio B" : "Studio B", staffName: "", notes: cs ? "Bolest zad" : "Back pain" },
    { id: "b4", customerName: customers[3].name, customerEmail: customers[3].email, service: services[3], status: "cancelled", startsAt: fmt(addHours(addDays(-1), 11)), endsAt: fmt(addHours(addDays(-1), 12)), reference: "BOK-004", location: cs ? "Hlavni salon" : "Main Salon", staffName: cs ? "Petra M." : "Petra M.", notes: "" },
    { id: "b5", customerName: customers[4].name, customerEmail: customers[4].email, service: services[0], status: "completed", startsAt: fmt(addHours(addDays(-2), 13)), endsAt: fmt(addHours(addDays(-2), 14)), reference: "BOK-005", location: cs ? "Studio B" : "Studio B", staffName: cs ? "Lucie K." : "Lucie K.", notes: "" },
    { id: "b6", customerName: customers[0].name, customerEmail: customers[0].email, service: services[1], status: "confirmed", startsAt: fmt(addHours(addDays(3), 10)), endsAt: fmt(addHours(addDays(3), 11)), reference: "BOK-006", location: cs ? "Hlavni salon" : "Main Salon", staffName: cs ? "Petra M." : "Petra M.", notes: "" },
    { id: "b7", customerName: customers[1].name, customerEmail: customers[1].email, service: services[2], status: "confirmed", startsAt: fmt(addHours(addDays(0), 16)), endsAt: fmt(addHours(addDays(0), 17)), reference: "BOK-007", location: cs ? "Studio B" : "Studio B", staffName: "", notes: "" },
    { id: "b8", customerName: customers[2].name, customerEmail: customers[2].email, service: services[3], status: "pending", startsAt: fmt(addHours(addDays(4), 9)), endsAt: fmt(addHours(addDays(4), 10)), reference: "BOK-008", location: cs ? "Hlavni salon" : "Main Salon", staffName: cs ? "Lucie K." : "Lucie K.", notes: "" },
    { id: "b9", customerName: customers[3].name, customerEmail: customers[3].email, service: services[0], status: "confirmed", startsAt: fmt(addHours(addDays(5), 11)), endsAt: fmt(addHours(addDays(5), 12)), reference: "BOK-009", location: cs ? "Hlavni salon" : "Main Salon", staffName: cs ? "Petra M." : "Petra M.", notes: "" },
    { id: "b10", customerName: customers[4].name, customerEmail: customers[4].email, service: services[1], status: "completed", startsAt: fmt(addHours(addDays(-3), 10)), endsAt: fmt(addHours(addDays(-3), 11)), reference: "BOK-010", location: cs ? "Studio B" : "Studio B", staffName: "", notes: "" },
  ];

  return {
    summary: {
      tenantName: cs ? "Demo Studio" : "Demo Studio",
      tenantSlug: "demo-studio",
      publicBookingUrl: "http://localhost:3000/book/demo-studio",
      kpis: [
        { label: i18n.t("dashboard.kpi.bookings"), value: 42, change: "+12%", trend: "up" },
        { label: i18n.t("dashboard.kpi.cancelled"), value: 3, change: "-5%", trend: "down" },
        { label: i18n.t("dashboard.kpi.completed"), value: 38, change: "+8%", trend: "up" },
        { label: i18n.t("dashboard.kpi.newClients"), value: 12, change: "+24%", trend: "up" },
      ],
      staff: [{ id: "s1", name: cs ? "Petra M." : "Petra M.", role: cs ? "Specialista" : "Specialist", email: "petra@demo.cz" }],
      upcomingBookings: allBookings.filter(b => b.status !== "cancelled" && b.status !== "completed"),
      allBookings,
      recentActivity: [
        { action: cs ? "Nova rezervace" : "New booking", detail: `${customers[0].name} - ${services[0]}`, time: cs ? "Dnes, 10:00" : "Today, 10:00", type: "booking" },
        { action: cs ? "Zruseni rezervace" : "Booking cancelled", detail: `${customers[3].name} - ${services[3]}`, time: cs ? "Vcera" : "Yesterday", type: "cancel" },
        { action: cs ? "Dokoncena rezervace" : "Booking completed", detail: `${customers[4].name} - ${services[1]}`, time: cs ? "Pred 2 dny" : "2 days ago", type: "reminder" },
      ],
    },
    bootstrap: {
      tenantName: cs ? "Demo Studio" : "Demo Studio",
      slug: "demo-studio",
      brand: { primaryColor: "#c25e3a" },
      locale: cs ? "cs" : "en",
      timezone: "Europe/Prague",
    },
    billing: {
      planCode: "pro",
      planName: "Pro",
      subscriptionStatus: "trialing",
      trialDaysRemaining: 12,
      entitlements: { maxLocations: 3, maxBookings: -1, maxStaff: 10 },
      billingProvider: "stripe",
    },
  };
}

// ============================================
// KPI CARD
// ============================================
function KpiCard(props: { kpi: any; index: number }) {
  const trend = () => props.kpi.trend ?? "neutral";
  const trendClass = () => {
    switch (trend()) {
      case "up": return "bg-canvas-muted text-accent";
      case "down": return "bg-canvas-muted text-ink-muted";
      default: return "bg-canvas-muted text-ink-muted";
    }
  };
  return (
    <div class="surface-card p-5 hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 group">
      <div class="flex items-start justify-between">
        <div>
          <p class="text-xs font-medium text-ink-subtle uppercase tracking-wider">{props.kpi.label}</p>
          <p class="text-2xl font-bold text-ink mt-2 tracking-tight font-display">{props.kpi.value}</p>
        </div>
        <div class={`inline-flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-semibold ${trendClass()}`}>
          {trend() === "up" ? <TrendingUpIcon /> : trend() === "down" ? <TrendingDownIcon /> : <MoreHorizontalIcon />}
          {props.kpi.change ?? "—"}
        </div>
      </div>
      <div class="mt-4 flex items-end gap-0.5 h-6">
        {[30, 55, 40, 70, 50, 65, 85, 60, 75, 90].map((h, i) => (
          <div class={`flex-1 rounded-t-sm bg-canvas-muted group-hover:bg-accent/20 transition-all duration-300`} style={{ height: `${h}%`, "transition-delay": `${i * 30}ms` }} />
        ))}
      </div>
    </div>
  );
}

// ============================================
// ACTIVITY TIMELINE
// ============================================
function ActivityTimeline(props: { activities: any[] }) {
  const i18n = useI18n();
  const getIcon = (type: string) => {
    const base = "w-8 h-8 rounded-full flex items-center justify-center shrink-0";
    switch (type) {
      case "booking": return <div class={`${base} bg-accent-subtle text-accent`}><CheckCircleIcon /></div>;
      case "cancel": return <div class={`${base} bg-canvas-muted text-ink-muted`}><XCircleIcon /></div>;
      case "client": return <div class={`${base} bg-accent-subtle text-accent`}><UsersIcon /></div>;
      case "reschedule": return <div class={`${base} bg-canvas-muted text-ink-muted`}><ClockIcon /></div>;
      case "reminder": return <div class={`${base} bg-accent-subtle text-accent`}><BellIcon /></div>;
      default: return <div class={`${base} bg-canvas-muted text-ink-muted`}><MoreHorizontalIcon /></div>;
    }
  };
  return (
    <div class="surface-card p-6 shadow-sm">
      <h3 class="text-lg font-semibold text-ink mb-5">{i18n.t("dashboard.recentActivity")}</h3>
      <Show when={props.activities.length > 0} fallback={
        <div class="text-center py-8">
          <p class="text-sm text-ink-muted">{i18n.t("dashboard.recentActivity.empty")}</p>
        </div>
      }>
        <div class="space-y-0">
          {props.activities.map((activity, index) => (
            <div class="group flex gap-4 relative" style={{ "animation-delay": `${index * 75}ms` }}>
              {index < props.activities.length - 1 && (
                <div class="absolute left-4 top-8 bottom-0 w-px bg-border" />
              )}
              <div class="relative z-10 flex-shrink-0 transition-transform duration-300 group-hover:scale-110">
                {getIcon(activity.type)}
              </div>
              <div class="flex-1 pb-5">
                <div class="flex items-start justify-between gap-3">
                  <div class="min-w-0">
                    <p class="text-sm font-semibold text-ink group-hover:text-accent transition-colors">{activity.action}</p>
                    <p class="text-sm text-ink-muted mt-0.5 truncate">{activity.detail}</p>
                  </div>
                  <span class="text-xs text-ink-subtle whitespace-nowrap shrink-0">{activity.time}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Show>
    </div>
  );
}

export function DashboardRoute() {
  const i18n = useI18n();
  const auth = useAuth();
  const theme = useTheme();
  const [searchParams] = useSearchParams();
  const [activeSection, setActiveSection] = createSignal<Section>("overview");
  const [isMobileMenuOpen, setIsMobileMenuOpen] = createSignal(false);
  const [isPageTransitioning, setIsPageTransitioning] = createSignal(false);
  const [billingNotice, setBillingNotice] = createSignal<string | null>(null);
  const [billingError, setBillingError] = createSignal<string | null>(null);
  const [billingAction, setBillingAction] = createSignal<"checkout" | "refresh" | "portal" | null>(null);
  const [handledBillingState, setHandledBillingState] = createSignal<string | null>(null);
  const [showIntegrationModal, setShowIntegrationModal] = createSignal(false);
  const [billingInterval, setBillingInterval] = createSignal<"monthly" | "yearly">("monthly");
  const [demoNotice, setDemoNotice] = createSignal<string | null>(null);
  const [token] = createResource(() => auth.session()?.session?.id, () => auth.getToken());

  const isDemoMode = () => token()?.startsWith("demo.") ?? false;
  const demoData = createMemo(() => createDemoData(i18n));

  const [summary] = createResource(token, async (bearer) => {
    if (!bearer) return null;
    if (bearer.startsWith("demo.")) return demoData().summary;
    const response = await apiClient.GET("/v1/dashboard/summary", { headers: { Authorization: `Bearer ${bearer}` } });
    return response.data ?? null;
  });

  const [bootstrap] = createResource(token, async (bearer) => {
    if (!bearer) return null;
    if (bearer.startsWith("demo.")) return demoData().bootstrap;
    const response = await apiClient.GET("/v1/tenants/bootstrap", { headers: { Authorization: `Bearer ${bearer}` } });
    return response.data ?? null;
  });

  const [billing, { refetch: refetchBilling }] = createResource(token, async (bearer) => {
    if (!bearer) return null;
    if (bearer.startsWith("demo.")) return demoData().billing;
    const response = await apiClient.GET("/v1/billing/subscription", { headers: { Authorization: `Bearer ${bearer}` } });
    return response.data ?? null;
  });

  const [locationData] = createResource(token, async (bearer) => {
    if (!bearer) return 0;
    if (bearer.startsWith("demo.")) return 1;
    try {
      const response = await (apiClient as any).GET("/v1/catalog/locations", { headers: { Authorization: `Bearer ${bearer}` } });
      return (response.data as any[])?.length ?? 0;
    } catch { return 0; }
  });

  const [smsUsage] = createResource(token, async (bearer) => {
    if (!bearer || bearer.startsWith("demo.")) return null;
    try {
      const response = await (apiClient as any).GET("/v1/sms/usage", { headers: { Authorization: `Bearer ${bearer}` } });
      return response.data as any ?? null;
    } catch { return null; }
  });

  const resolvedSummary = () => (summary.latest as any) ?? (isDemoMode() ? demoData().summary : undefined);
  const resolvedBootstrap = () => (bootstrap.latest as any) ?? (isDemoMode() ? demoData().bootstrap : undefined);
  const resolvedBilling = () => (billing.latest as any) ?? (isDemoMode() ? demoData().billing : undefined);

  const normalizedKpis = createMemo(() => (resolvedSummary()?.kpis ?? []).map((kpi: any) => ({
    ...kpi, trend: kpi.trend ?? "neutral", change: kpi.change ?? "—",
  })));

  const normalizedUpcomingBookings = createMemo(() => (resolvedSummary()?.upcomingBookings ?? []).map((booking: any) => ({
    ...booking,
    avatar: booking.avatar ?? getInitials(booking.customerName),
    service: booking.service ?? booking.label ?? booking.reference ?? (i18n.locale() === "cs" ? "Rezervace" : "Booking"),
    duration: booking.duration ?? getBookingDuration(booking.startsAt, booking.endsAt),
  })));

  const normalizedRecentActivity = createMemo(() => {
    if (resolvedSummary()?.recentActivity?.length) return resolvedSummary().recentActivity;
    return normalizedUpcomingBookings().slice(0, 5).map((booking: any) => ({
      action: i18n.locale() === "cs" ? "Nadchazejici rezervace" : "Upcoming booking",
      detail: `${booking.customerName} • ${booking.service}`,
      time: new Date(booking.startsAt).toLocaleDateString(undefined, { month: "short", day: "numeric" }),
      type: "booking",
    }));
  });

  const normalizedAllBookings = createMemo(() => resolvedSummary()?.allBookings ?? normalizedUpcomingBookings());

  const isDashboardReady = () => !!token() && !bootstrap.loading && !summary.loading && !billing.loading;

  const changeSection = (section: Section) => {
    if (section === activeSection()) return;
    setIsPageTransitioning(true);
    setTimeout(() => { setActiveSection(section); setIsPageTransitioning(false); }, 150);
  };

  const openCheckout = async () => {
    const bearer = token();
    if (!bearer || bearer.startsWith("demo.")) { setDemoNotice(i18n.locale() === "cs" ? "V demo rezimu nelze upravovat predplatne." : "Cannot modify billing in demo mode."); return; }
    setBillingAction("checkout");
    setBillingError(null);
    try {
      const response = await (apiClient as any).POST("/v1/billing/checkout", {
        headers: { Authorization: `Bearer ${bearer}` },
        body: { interval: billingInterval() },
      });
      if (response.data?.url) window.location.href = response.data.url;
      else throw new Error("No checkout URL");
    } catch (err) { setBillingError(err instanceof Error ? err.message : String(err)); }
    finally { setBillingAction(null); }
  };

  const openPortal = async () => {
    const bearer = token();
    if (!bearer || bearer.startsWith("demo.")) { setDemoNotice(i18n.locale() === "cs" ? "V demo rezimu nelze upravovat predplatne." : "Cannot modify billing in demo mode."); return; }
    setBillingAction("portal");
    setBillingError(null);
    try {
      const response = await (apiClient as any).POST("/v1/billing/portal", { headers: { Authorization: `Bearer ${bearer}` } });
      if (response.data?.url) window.location.href = response.data.url;
      else throw new Error("No portal URL");
    } catch (err) { setBillingError(err instanceof Error ? err.message : String(err)); }
    finally { setBillingAction(null); }
  };

  const refreshBilling = async () => {
    const bearer = token();
    if (!bearer || bearer.startsWith("demo.")) { setDemoNotice(i18n.locale() === "cs" ? "V demo rezimu nelze obnovit predplatne." : "Cannot refresh billing in demo mode."); return; }
    setBillingAction("refresh");
    setBillingError(null);
    try {
      const response = await (apiClient as any).POST("/v1/billing/refresh", { headers: { Authorization: `Bearer ${bearer}` } });
      if (response.data) { setBillingNotice(i18n.locale() === "cs" ? "Predplatne obnoveno." : "Billing refreshed."); void refetchBilling(); }
    } catch (err) { setBillingError(err instanceof Error ? err.message : String(err)); }
    finally { setBillingAction(null); }
  };

  createEffect(() => {
    const state = Array.isArray(searchParams["billing"]) ? searchParams["billing"][0] : searchParams["billing"];
    if (state && state !== handledBillingState()) {
      setHandledBillingState(state);
      if (state === "success") setBillingNotice(i18n.locale() === "cs" ? "Platba uspesna! Vase predplatne je aktivni." : "Payment successful! Your subscription is active.");
      else if (state === "cancelled") setBillingNotice(i18n.locale() === "cs" ? "Platba byla zrusena." : "Payment was cancelled.");
    }
  });

  const navItems = [
    { id: "overview" as Section, label: i18n.t("dashboard.overview"), icon: LayoutDashboardIcon },
    { id: "bookings" as Section, label: i18n.t("dashboard.bookings"), icon: CalendarDaysIcon },
    { id: "customers" as Section, label: i18n.t("dashboard.customers"), icon: UserCircleIcon },
    { id: "zones" as Section, label: i18n.t("dashboard.zones"), icon: MapPinIcon },
    { id: "billing" as Section, label: i18n.t("dashboard.billing"), icon: CreditCardIcon },
    { id: "settings" as Section, label: i18n.t("dashboard.settings"), icon: Settings2Icon },
  ];

  const LanguageToggle = () => (
    <button
      onClick={() => i18n.toggleLocale()}
      class="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-ink-muted hover:text-ink hover:bg-canvas-subtle rounded-lg transition-all"
      title={i18n.t("dashboard.language")}
    >
      <GlobeIcon />
      {i18n.locale() === "cs" ? "CS" : "EN"}
    </button>
  );

  const ThemeToggle = () => (
    <button
      onClick={() => theme.toggle()}
      class="p-2 text-ink-subtle hover:text-ink hover:bg-canvas-subtle rounded-xl transition-all"
      aria-label="Toggle theme"
    >
      {theme.resolvedTheme() === "dark" ? <SunIcon /> : <MoonIcon />}
    </button>
  );

  const DemoBanner = () => (
    <Show when={isDemoMode()}>
      <div class="mb-6 p-4 rounded-xl bg-accent-subtle border border-accent/20 flex items-center justify-between animate-fade-in">
        <div class="flex items-center gap-3 min-w-0">
          <SparklesIcon />
          <div class="min-w-0">
            <p class="text-sm font-semibold text-accent">{i18n.t("dashboard.demoBanner")}</p>
            <p class="text-xs text-accent/70">{i18n.t("dashboard.demoBannerDesc")}</p>
          </div>
        </div>
        <button
          onClick={() => window.dispatchEvent(new CustomEvent("openAuthDialog", { detail: { mode: "register" } }))}
          class="shrink-0 ml-4 px-4 py-2 bg-accent text-canvas text-sm font-medium rounded-lg hover:bg-accent-hover transition-colors"
        >
          {i18n.t("dashboard.demoBannerCTA")}
        </button>
      </div>
    </Show>
  );

  const Sidebar = () => (
    <aside class="hidden lg:flex flex-col w-64 h-screen bg-canvas border-r border-border sticky top-0 shrink-0">
      <div class="p-6">
        <A href="/" class="flex items-center gap-2.5 text-lg font-display font-semibold tracking-tight text-ink hover:text-accent transition-colors">
          <img src="/bookra-logo.svg" alt="Bookra" class="h-8 w-auto dark:invert" />
        </A>
      </div>
      <nav class="flex-1 px-4 space-y-1 overflow-y-auto">
        {navItems.map((item) => (
          <button
            onClick={() => changeSection(item.id)}
            class={`
              w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-200
              ${activeSection() === item.id
                ? "bg-accent text-canvas shadow-sm"
                : "text-ink-muted hover:bg-canvas-subtle hover:text-ink"
              }
            `}
          >
            <item.icon /> {item.label}
          </button>
        ))}
      </nav>
      <div class="p-4 border-t border-border space-y-1">
        <div class="flex items-center gap-2 px-4 py-2">
          <LanguageToggle />
          <ThemeToggle />
        </div>
        <Show when={auth.session()?.user}>
          <div class="flex items-center gap-3 px-4 py-3">
            <div class="w-8 h-8 rounded-full bg-accent-subtle flex items-center justify-center text-sm font-bold text-accent shrink-0">
              {getInitials(auth.session()?.user?.name)}
            </div>
            <div class="min-w-0">
              <p class="text-sm font-semibold text-ink truncate">{auth.session()?.user?.name}</p>
              <p class="text-xs text-ink-muted truncate">{auth.session()?.user?.email}</p>
            </div>
          </div>
        </Show>
        <button
          onClick={() => void auth.signOut()}
          class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium text-ink-muted hover:text-ink hover:bg-canvas-subtle transition-all group"
        >
          <span class="group-hover:translate-x-0.5 transition-transform"><LogOutIcon /></span>
          {i18n.t("auth.signOut")}
        </button>
      </div>
    </aside>
  );

  const MobileMenu = () => (
    <Show when={isMobileMenuOpen()}>
      <div class="lg:hidden fixed inset-0 z-50">
        <div class="absolute inset-0 bg-ink/40 backdrop-blur-sm transition-opacity" onClick={() => setIsMobileMenuOpen(false)} />
        <div class="absolute left-0 top-0 h-full w-72 bg-canvas shadow-2xl">
          <div class="p-4 border-b border-border flex items-center justify-between">
            <img src="/bookra-logo.svg" alt="Bookra" class="h-8 w-auto dark:invert" />
            <button onClick={() => setIsMobileMenuOpen(false)} class="p-2 hover:bg-canvas-subtle rounded-xl transition-colors" aria-label={i18n.t("dashboard.close")}>
              <XIcon />
            </button>
          </div>
          <nav class="p-4 space-y-1">
            {navItems.map((item) => (
              <button
                onClick={() => { changeSection(item.id); setIsMobileMenuOpen(false); }}
                class={`
                  w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all
                  ${activeSection() === item.id ? "bg-accent text-canvas" : "text-ink-muted hover:bg-canvas-subtle"}
                `}
              >
                <item.icon /> {item.label}
              </button>
            ))}
          </nav>
          <div class="p-4 border-t border-border">
            <div class="flex items-center gap-2 mb-2">
              <LanguageToggle />
              <ThemeToggle />
            </div>
            <button onClick={() => void auth.signOut()} class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium text-ink-muted hover:text-ink hover:bg-canvas-subtle transition-all">
              <LogOutIcon /> {i18n.t("auth.signOut")}
            </button>
          </div>
        </div>
      </div>
    </Show>
  );

  const [showBookingDetail, setShowBookingDetail] = createSignal(false);
  const [selectedBooking, setSelectedBooking] = createSignal<any>(null);

  const openBookingDetail = (booking: any) => {
    setSelectedBooking(booking);
    setShowBookingDetail(true);
  };

  const BookingDetailModal = () => (
    <Show when={showBookingDetail() && selectedBooking()}>
      <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={() => setShowBookingDetail(false)} />
        <div class="relative bg-canvas rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto animate-scale-in">
          <div class="p-6 border-b border-border flex items-center justify-between">
            <h3 class="text-xl font-bold text-ink">{i18n.t("dashboard.bookingDetails")}</h3>
            <button onClick={() => setShowBookingDetail(false)} class="p-2 hover:bg-canvas-subtle rounded-lg transition-colors" aria-label={i18n.t("dashboard.close")}>
              <XIcon />
            </button>
          </div>
          <div class="p-6 space-y-5">
            <div class="flex items-center gap-4 p-4 bg-canvas-subtle rounded-xl">
              <div class="w-14 h-14 rounded-full bg-accent-subtle flex items-center justify-center text-lg font-bold text-accent">
                {getInitials(selectedBooking()?.customerName)}
              </div>
              <div class="min-w-0">
                <p class="font-semibold text-ink text-lg">{selectedBooking()?.customerName}</p>
                <p class="text-ink-muted">{selectedBooking()?.customerEmail}</p>
              </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div class="p-4 bg-canvas-subtle rounded-xl">
                <p class="text-xs text-ink-muted uppercase tracking-wider mb-1">{i18n.t("dashboard.bookingModal.service")}</p>
                <p class="font-medium text-ink">{selectedBooking()?.service}</p>
              </div>
              <div class="p-4 bg-canvas-subtle rounded-xl">
                <p class="text-xs text-ink-muted uppercase tracking-wider mb-1">{i18n.t("dashboard.bookingModal.location")}</p>
                <p class="font-medium text-ink">{selectedBooking()?.location || "—"}</p>
              </div>
              <div class="p-4 bg-canvas-subtle rounded-xl col-span-2">
                <p class="text-xs text-ink-muted uppercase tracking-wider mb-1">{i18n.t("dashboard.bookingModal.assignedTo")}</p>
                <Show when={selectedBooking()?.staffName} fallback={<p class="text-ink-subtle">{i18n.t("dashboard.bookingModal.noAssign")}</p>}>
                  <div class="flex items-center gap-2">
                    <div class="w-7 h-7 rounded-full bg-accent-subtle flex items-center justify-center text-[10px] font-bold text-accent">
                      {selectedBooking()?.staffName?.split(" ").map((n: string) => n[0]).join("")}
                    </div>
                    <p class="font-medium text-ink">{selectedBooking()?.staffName}</p>
                  </div>
                </Show>
              </div>
            </div>
            <div class="p-4 bg-canvas-subtle rounded-xl">
              <p class="text-xs text-ink-muted uppercase tracking-wider mb-1">{i18n.t("dashboard.bookingModal.dateTime")}</p>
              <p class="font-medium text-ink">
                {new Date(selectedBooking()?.startsAt).toLocaleString(undefined, { weekday: "long", year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit" })}
              </p>
              <p class="text-sm text-ink-muted">{i18n.t("dashboard.bookingModal.duration")}: {getBookingDuration(selectedBooking()?.startsAt, selectedBooking()?.endsAt)}</p>
            </div>
            <div class="flex items-center justify-between p-4 bg-canvas-subtle rounded-xl">
              <div>
                <p class="text-xs text-ink-muted uppercase tracking-wider mb-1">{i18n.t("dashboard.bookingModal.reference")}</p>
                <p class="font-medium text-ink font-mono text-sm">{selectedBooking()?.reference}</p>
              </div>
              <span class={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${
                selectedBooking()?.status === "confirmed" ? "bg-accent/10 text-accent"
                : selectedBooking()?.status === "pending" ? "bg-canvas-muted text-ink-muted"
                : "bg-canvas-subtle text-ink-subtle"
              }`}>
                {i18n.t(`dashboard.${selectedBooking()?.status}`)}
              </span>
            </div>
            <Show when={selectedBooking()?.notes}>
              <div class="p-4 bg-canvas-subtle rounded-xl">
                <p class="text-xs text-ink-muted uppercase tracking-wider mb-1">{i18n.t("dashboard.bookingModal.notes")}</p>
                <p class="text-ink text-sm">{selectedBooking()?.notes}</p>
              </div>
            </Show>
          </div>
        </div>
      </div>
    </Show>
  );


  // ==========================================
  const OverviewPage = () => (
    <div class={`space-y-6 transition-opacity duration-200 ${isPageTransitioning() ? "opacity-0" : "opacity-100"}`}>
      {/* Header */}
      <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 tracking-tight font-display">
            {i18n.t("dashboard.welcome")} <span class="text-accent">{auth.session()?.user?.name}</span>
          </h1>
          <p class="text-ink-muted mt-1">{i18n.t("dashboard.overviewFor")} {resolvedBootstrap()?.tenantName}</p>
        </div>
        <div class="flex items-center gap-3 shrink-0">
          <button onClick={() => setShowIntegrationModal(true)} class="btn-secondary text-sm">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
            </svg>
            {i18n.t("dashboard.shareManage")}
          </button>
          <span class="text-sm text-ink-subtle hidden sm:inline">{new Date().toLocaleDateString(undefined, { weekday: "long", month: "long", day: "numeric" })}</span>
          <NotificationDropdown bookings={normalizedAllBookings()} billing={resolvedBilling()} />
        </div>
      </div>

      {/* KPI Cards */}
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {normalizedKpis().map((kpi: any, index: number) => (
          <KpiCard kpi={kpi} index={index} />
        ))}
      </div>

      {/* SMS Usage */}
      {(() => {
        const usage = smsUsage.latest;
        if (!usage || usage.messageCount === 0) return null;
        return (
          <div class="surface-card p-5 border-l-4 border-accent">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-4">
                <div class="w-10 h-10 rounded-full bg-accent-subtle flex items-center justify-center text-accent">
                  <MailIcon />
                </div>
                <div>
                  <p class="font-semibold text-ink">SMS {i18n.t("dashboard.billing.planUsage")}</p>
                  <p class="text-sm text-ink-muted">{usage.messageCount} messages — {(usage.totalCostCents / 100).toFixed(2)} Kc</p>
                </div>
              </div>
              <button onClick={() => changeSection("settings")} class="text-sm font-medium text-accent hover:text-accent-hover transition-colors">
                {i18n.t("dashboard.settings")}
              </button>
            </div>
          </div>
        );
      })()}

      {/* Plan Limit Warning */}
      {(() => {
        const entitlements = resolvedBilling()?.entitlements;
        const limit = entitlements?.maxLocations ?? -1;
        const count = locationData() ?? 0;
        const isNear = limit > 0 && count >= limit * 0.8;
        const isAt = limit > 0 && count >= limit;
        if (!isNear && !isAt) return null;
        return (
          <div class={`p-4 rounded-xl border ${isAt ? "bg-canvas-subtle border-ink/10" : "bg-accent/5 border-accent/20"}`}>
            <div class="flex items-center gap-3">
              <div class={`w-10 h-10 rounded-full flex items-center justify-center ${isAt ? "bg-canvas-muted" : "bg-accent/10"}`}>
                <SparklesIcon />
              </div>
              <div class="flex-1 min-w-0">
                <p class="font-medium text-ink">{isAt ? i18n.t("dashboard.locationLimitReached") : i18n.t("dashboard.nearingLocationLimit")}</p>
                <p class="text-sm text-ink-muted">{i18n.t("dashboard.locationsUsed")} {count}/{limit === -1 ? "∞" : limit}</p>
              </div>
              <button onClick={() => void openCheckout()} class="px-4 py-2 text-sm font-medium rounded-lg bg-accent text-canvas hover:bg-accent-hover transition-colors shrink-0">
                {i18n.t("dashboard.upgrade")}
              </button>
            </div>
          </div>
        );
      })()}

      {/* Revenue Chart + Calendar + Activity */}
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-6">
          <RevenueChart bookings={normalizedAllBookings()} />
          <CalendarView bookings={normalizedUpcomingBookings()} locale={i18n.locale()} onBookingClick={openBookingDetail} />
        </div>
        <div class="space-y-6">
          <ActivityTimeline activities={normalizedRecentActivity()} />
        </div>
      </div>

      {/* Upcoming Bookings */}
      <div class="surface-card p-6 shadow-sm">
        <div class="flex items-center justify-between mb-5">
          <div>
            <h3 class="text-lg font-semibold text-ink">{i18n.t("dashboard.upcomingBookings")}</h3>
            <p class="text-sm text-ink-muted mt-0.5">{normalizedUpcomingBookings().length} total</p>
          </div>
          <button onClick={() => changeSection("bookings")} class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-accent hover:text-accent-hover hover:bg-accent-subtle rounded-xl transition-all">
            {i18n.t("dashboard.viewAll")} <ChevronRightIcon />
          </button>
        </div>
        <div class="space-y-3">
          {normalizedUpcomingBookings().slice(0, 5).map((booking: any) => (
            <button
              onClick={() => openBookingDetail(booking)}
              class="w-full text-left flex items-center gap-4 p-4 rounded-xl border border-border/60 hover:border-accent/30 hover:bg-accent-subtle/20 transition-all group"
            >
              <div class="w-11 h-11 rounded-full bg-accent-subtle flex items-center justify-center text-sm font-bold text-accent shrink-0">
                {getInitials(booking.customerName)}
              </div>
              <div class="flex-1 min-w-0">
                <p class="font-medium text-ink group-hover:text-accent transition-colors">{booking.customerName}</p>
                <p class="text-sm text-ink-muted">{booking.service} • {booking.duration}</p>
              </div>
              <div class="text-right shrink-0">
                <p class="text-sm font-medium text-ink">{new Date(booking.startsAt).toLocaleDateString(undefined, { month: "short", day: "numeric" })}</p>
                <span class={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
                  booking.status === "confirmed" ? "bg-accent/10 text-accent"
                  : booking.status === "pending" ? "bg-canvas-muted text-ink-muted"
                  : "bg-canvas-subtle text-ink-subtle"
                }`}>
                  {i18n.t(`dashboard.${booking.status}`)}
                </span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );

  // ==========================================
  // BOOKINGS PAGE
  // ==========================================
  const BookingsPage = () => {
    const [filterStatus, setFilterStatus] = createSignal<"all" | "confirmed" | "pending" | "cancelled" | "completed">("all");
    const [filterDateRange, setFilterDateRange] = createSignal<"all" | "today" | "week" | "month">("all");
    const [searchQuery, setSearchQuery] = createSignal("");
    const [showNewBooking, setShowNewBooking] = createSignal(false);
    const [creatingBooking, setCreatingBooking] = createSignal(false);

    const [newBookingCustomer, setNewBookingCustomer] = createSignal("");
    const [newBookingEmail, setNewBookingEmail] = createSignal("");
    const [newBookingService, setNewBookingService] = createSignal("");
    const [newBookingDate, setNewBookingDate] = createSignal("");
    const [newBookingTime, setNewBookingTime] = createSignal("");
    const [newBookingNotes, setNewBookingNotes] = createSignal("");

    const resolvedAllBookings = () => (summary.latest as any)?.allBookings ?? demoData().summary.allBookings ?? [];

    const filteredBookings = createMemo(() => {
      let bookings = resolvedAllBookings();
      if (filterStatus() !== "all") bookings = bookings.filter((b: any) => b.status === filterStatus());
      const now = new Date();
      if (filterDateRange() === "today") bookings = bookings.filter((b: any) => new Date(b.startsAt).toDateString() === now.toDateString());
      else if (filterDateRange() === "week") {
        const weekEnd = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
        bookings = bookings.filter((b: any) => { const d = new Date(b.startsAt); return d >= now && d <= weekEnd; });
      } else if (filterDateRange() === "month") {
        const monthEnd = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000);
        bookings = bookings.filter((b: any) => { const d = new Date(b.startsAt); return d >= now && d <= monthEnd; });
      }
      if (searchQuery().trim()) {
        const q = searchQuery().toLowerCase();
        bookings = bookings.filter((b: any) =>
          b.customerName?.toLowerCase().includes(q) ||
          b.service?.toLowerCase().includes(q) ||
          b.reference?.toLowerCase().includes(q)
        );
      }
      return bookings.sort((a: any, b: any) => new Date(b.startsAt).getTime() - new Date(a.startsAt).getTime());
    });

    const bookingStats = createMemo(() => {
      const bookings = resolvedAllBookings();
      return {
        total: bookings.length,
        confirmed: bookings.filter((b: any) => b.status === "confirmed").length,
        pending: bookings.filter((b: any) => b.status === "pending").length,
        cancelled: bookings.filter((b: any) => b.status === "cancelled").length,
        completed: bookings.filter((b: any) => b.status === "completed").length,
      };
    });

    const handleCreateBooking = async () => {
      const bearer = token();
      if (!bearer || bearer.startsWith("demo.")) {
        setDemoNotice(i18n.locale() === "cs" ? "V demo rezimu nelze vytvaret rezervace." : "Cannot create bookings in demo mode.");
        setShowNewBooking(false); return;
      }
      setCreatingBooking(true);
      try {
        await (apiClient as any).POST("/v1/catalog/bookings", {
          headers: { Authorization: `Bearer ${bearer}` },
          body: {
            customerName: newBookingCustomer(), customerEmail: newBookingEmail(), service: newBookingService(),
            startsAt: new Date(`${newBookingDate()}T${newBookingTime()}`).toISOString(), notes: newBookingNotes()
          }
        });
        setNewBookingCustomer(""); setNewBookingEmail(""); setNewBookingService(""); setNewBookingDate(""); setNewBookingTime(""); setNewBookingNotes("");
        setShowNewBooking(false);
      } catch { setDemoNotice(i18n.locale() === "cs" ? "Vytvoreni rezervace selhalo." : "Failed to create booking."); }
      finally { setCreatingBooking(false); }
    };

    const statusLabels: Record<string, string> = {
      confirmed: i18n.t("dashboard.confirmed"), pending: i18n.t("dashboard.pending"),
      cancelled: i18n.t("dashboard.cancelled"), completed: i18n.t("dashboard.completed")
    };

    return (
      <div class={`space-y-6 transition-opacity duration-200 ${isPageTransitioning() ? "opacity-0" : "opacity-100"}`}>
        <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">{i18n.t("dashboard.bookingManagement")}</h1>
            <p class="text-ink-muted mt-1">{bookingStats().total} {i18n.t("dashboard.totalBookings")}</p>
          </div>
          <button onClick={() => setShowNewBooking(true)} class="btn-primary text-sm shrink-0">
            <PlusIcon /> {i18n.t("dashboard.newBooking")}
          </button>
        </div>

        {/* Stats */}
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
          {[
            { key: "confirmed", label: i18n.t("dashboard.confirmed"), value: bookingStats().confirmed },
            { key: "pending", label: i18n.t("dashboard.pending"), value: bookingStats().pending },
            { key: "cancelled", label: i18n.t("dashboard.cancelled"), value: bookingStats().cancelled },
            { key: "completed", label: i18n.t("dashboard.completed"), value: bookingStats().completed },
          ].map((s) => (
            <button onClick={() => setFilterStatus(s.key as any)} class={`surface-card p-4 text-left transition-all hover:shadow-md ${filterStatus() === s.key ? "ring-2 ring-accent" : ""}`}>
              <p class="text-xs text-ink-muted uppercase tracking-wider">{s.label}</p>
              <p class="text-2xl font-bold text-ink mt-1 font-display">{s.value}</p>
            </button>
          ))}
        </div>

        {/* Filters */}
        <div class="flex flex-col sm:flex-row gap-3">
          <div class="flex-1">
            <Input type="text" placeholder={i18n.t("dashboard.search.bookings")} value={searchQuery()} onInput={(e) => setSearchQuery(e.currentTarget.value)} />
          </div>
          <div class="flex gap-2">
            <Select value={filterStatus()} onChange={(v) => setFilterStatus(v as any)} options={[
              { value: "all", label: i18n.t("dashboard.filter.all") },
              { value: "confirmed", label: i18n.t("dashboard.confirmed") },
              { value: "pending", label: i18n.t("dashboard.pending") },
              { value: "cancelled", label: i18n.t("dashboard.cancelled") },
              { value: "completed", label: i18n.t("dashboard.completed") },
            ]} />
            <Select value={filterDateRange()} onChange={(v) => setFilterDateRange(v as any)} options={[
              { value: "all", label: i18n.t("dashboard.filter.all") },
              { value: "today", label: i18n.t("dashboard.filter.today") },
              { value: "week", label: i18n.t("dashboard.filter.week") },
              { value: "month", label: i18n.t("dashboard.filter.month") },
            ]} />
          </div>
        </div>

        {/* Bookings List */}
        <div class="surface-card overflow-hidden">
          <Show when={filteredBookings().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">
                <CalendarDaysIcon />
              </div>
              <p class="text-ink-muted font-medium">{i18n.t("dashboard.empty.title")}</p>
              <p class="text-sm text-ink-subtle mt-1">{i18n.t("dashboard.empty.bookingsDesc")}</p>
            </div>
          }>
            <div class="divide-y divide-border/60">
              {filteredBookings().map((booking: any) => (
                <div class="flex items-center gap-4 p-4 hover:bg-canvas-subtle/30 transition-colors group">
                  <div class={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold shrink-0 ${
                    booking.status === "confirmed" ? "bg-accent text-canvas" : "bg-canvas-muted text-ink-muted"
                  }`}>
                    {getInitials(booking.customerName)}
                  </div>
                  <div class="flex-1 min-w-0">
                    <p class="font-medium text-ink">{booking.customerName}</p>
                    <p class="text-sm text-ink-muted">{booking.service} • {new Date(booking.startsAt).toLocaleDateString()} {new Date(booking.startsAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}</p>
                  </div>
                  <div class="flex items-center gap-2 shrink-0">
                    <span class={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${
                      booking.status === "confirmed" ? "bg-accent/10 text-accent"
                      : booking.status === "pending" ? "bg-canvas-muted text-ink-muted"
                      : "bg-canvas-subtle text-ink-subtle"
                    }`}>
                      {statusLabels[booking.status]}
                    </span>
                    <button onClick={() => openBookingDetail(booking)} class="p-2 text-ink-muted hover:text-accent hover:bg-accent-subtle rounded-lg transition-colors" title={i18n.t("dashboard.details")}>
                      <EyeIcon />
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </Show>
        </div>

        {/* New Booking Modal */}
        <Show when={showNewBooking()}>
          <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={() => setShowNewBooking(false)} />
            <div class="relative bg-canvas rounded-2xl shadow-2xl w-full max-w-lg animate-scale-in">
              <div class="p-6 border-b border-border flex items-center justify-between">
                <h3 class="text-xl font-bold text-ink">{i18n.t("dashboard.newBooking")}</h3>
                <button onClick={() => setShowNewBooking(false)} class="p-2 hover:bg-canvas-subtle rounded-lg transition-colors"><XIcon /></button>
              </div>
              <div class="p-6 space-y-4">
                <Input type="text" label={i18n.t("booking.customer.name")} value={newBookingCustomer()} onInput={(e) => setNewBookingCustomer(e.currentTarget.value)} />
                <Input type="email" label={i18n.t("booking.customer.email")} value={newBookingEmail()} onInput={(e) => setNewBookingEmail(e.currentTarget.value)} />
                <Input type="text" label={i18n.t("dashboard.bookingModal.service")} value={newBookingService()} onInput={(e) => setNewBookingService(e.currentTarget.value)} />
                <div class="grid grid-cols-2 gap-4">
                  <Input type="date" label={i18n.t("dashboard.bookingModal.dateTime")} value={newBookingDate()} onInput={(e) => setNewBookingDate(e.currentTarget.value)} />
                  <Input type="time" label={i18n.t("dashboard.bookingModal.duration")} value={newBookingTime()} onInput={(e) => setNewBookingTime(e.currentTarget.value)} />
                </div>
                <Textarea label={i18n.t("booking.customer.notes")} value={newBookingNotes()} onInput={(e) => setNewBookingNotes(e.currentTarget.value)} rows={3} resize="none" />
              </div>
              <div class="p-6 border-t border-border flex gap-3">
                <button onClick={() => setShowNewBooking(false)} class="flex-1 px-4 py-2.5 border border-border rounded-xl text-ink hover:bg-canvas-subtle transition-colors">{i18n.t("common.cancel")}</button>
                <button onClick={handleCreateBooking} disabled={creatingBooking() || !newBookingCustomer() || !newBookingEmail() || !newBookingDate() || !newBookingTime()} class="flex-1 px-4 py-2.5 bg-accent text-canvas rounded-xl hover:bg-accent-hover transition-colors disabled:opacity-50 flex items-center justify-center gap-2">
                  <Show when={creatingBooking()}><span class="inline-block w-4 h-4 border-2 border-canvas/30 border-t-canvas rounded-full animate-spin" /></Show>
                  {creatingBooking() ? i18n.t("dashboard.creating") : i18n.t("dashboard.createBooking")}
                </button>
              </div>
            </div>
          </div>
        </Show>
      </div>
    );
  };


  // ==========================================
  // CUSTOMERS PAGE
  // ==========================================
  const CustomersPage = () => {
    const [searchQuery, setSearchQuery] = createSignal("");
    const [selectedCustomer, setSelectedCustomer] = createSignal<any>(null);
    const [showCustomerDetail, setShowCustomerDetail] = createSignal(false);

    const demoCustomers = [
      { id: "1", name: "Martina Novakova", email: "martina@example.com", phone: "+420 123 456 789", bookingsCount: 5, lastBookingAt: new Date(Date.now() - 86400000).toISOString(), status: "active", notes: "Alergie na silne vune" },
      { id: "2", name: "David Svoboda", email: "david@example.com", phone: "+420 987 654 321", bookingsCount: 3, lastBookingAt: new Date(Date.now() - 172800000).toISOString(), status: "active", notes: "" },
      { id: "3", name: "Jana KovarovA", email: "jana@example.com", phone: "+420 555 666 777", bookingsCount: 8, lastBookingAt: new Date(Date.now() - 259200000).toISOString(), status: "vip", notes: "Uprednostnuje ranni terminy" },
      { id: "4", name: "Alice Johnson", email: "alice@example.com", phone: "+420 111 222 333", bookingsCount: 1, lastBookingAt: new Date(Date.now() - 604800000).toISOString(), status: "inactive", notes: "" },
      { id: "5", name: "Bob Smith", email: "bob@example.com", phone: "+420 444 555 666", bookingsCount: 12, lastBookingAt: new Date(Date.now() - 432000000).toISOString(), status: "vip", notes: "Loyal customer" },
    ];

    const resolvedCustomers = () => demoCustomers;
    const resolvedBookings = () => normalizedAllBookings();

    const filteredCustomers = createMemo(() => {
      let result = resolvedCustomers();
      if (searchQuery().trim()) {
        const q = searchQuery().toLowerCase();
        result = result.filter((c: any) => c.name?.toLowerCase().includes(q) || c.email?.toLowerCase().includes(q) || c.phone?.toLowerCase().includes(q));
      }
      return result.sort((a: any, b: any) => new Date(b.lastBookingAt || 0).getTime() - new Date(a.lastBookingAt || 0).getTime());
    });

    const getCustomerBookings = (email: string) => {
      return resolvedBookings().filter((b: any) => b.customerEmail?.toLowerCase() === email?.toLowerCase()).sort((a: any, b: any) => new Date(b.startsAt).getTime() - new Date(a.startsAt).getTime());
    };

    const statusBadge = (status: string) => {
      switch (status) {
        case "active": return <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-accent/10 text-accent">{i18n.t("dashboard.filter.all")}</span>;
        case "vip": return <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-ink/10 text-ink">VIP</span>;
        default: return <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-canvas-subtle text-ink-subtle">{i18n.t("dashboard.customer.status")}</span>;
      }
    };

    return (
      <div class={`space-y-6 transition-opacity duration-200 ${isPageTransitioning() ? "opacity-0" : "opacity-100"}`}>
        <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">{i18n.t("dashboard.customers")}</h1>
            <p class="text-ink-muted mt-1">{filteredCustomers().length} {i18n.locale() === "cs" ? "zakazniku" : "customers"}</p>
          </div>
        </div>
        <div class="surface-card p-4">
          <Input type="text" placeholder={i18n.t("dashboard.search.customers")} value={searchQuery()} onInput={(e) => setSearchQuery(e.currentTarget.value)} />
        </div>
        <div class="surface-card overflow-hidden">
          <Show when={filteredCustomers().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"><UsersIcon /></div>
              <p class="text-ink-muted font-medium">{i18n.t("dashboard.empty.title")}</p>
              <p class="text-sm text-ink-subtle mt-1">{i18n.t("dashboard.empty.customersDesc")}</p>
            </div>
          }>
            <div class="divide-y divide-border/60">
              {filteredCustomers().map((customer: any) => (
                <button onClick={() => { setSelectedCustomer(customer); setShowCustomerDetail(true); }} class="w-full text-left flex items-center gap-4 p-4 hover:bg-canvas-subtle/30 transition-colors">
                  <div class="w-10 h-10 rounded-full bg-accent-subtle flex items-center justify-center text-sm font-bold text-accent shrink-0">{getInitials(customer.name)}</div>
                  <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2">
                      <p class="font-medium text-ink">{customer.name}</p>
                      {statusBadge(customer.status)}
                    </div>
                    <p class="text-sm text-ink-muted">{customer.email}</p>
                  </div>
                  <div class="text-right shrink-0 hidden sm:block">
                    <p class="text-sm font-medium text-ink">{customer.bookingsCount}</p>
                    <p class="text-xs text-ink-muted">{i18n.t("dashboard.customer.totalBookings")}</p>
                  </div>
                </button>
              ))}
            </div>
          </Show>
        </div>

        {/* Customer Detail Modal */}
        <Show when={showCustomerDetail() && selectedCustomer()}>
          <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={() => setShowCustomerDetail(false)} />
            <div class="relative bg-canvas rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto animate-scale-in">
              <div class="p-6 border-b border-border flex items-center justify-between">
                <h3 class="text-xl font-bold text-ink">{i18n.t("dashboard.customerDetails")}</h3>
                <button onClick={() => setShowCustomerDetail(false)} class="p-2 hover:bg-canvas-subtle rounded-lg transition-colors"><XIcon /></button>
              </div>
              <div class="p-6 space-y-5">
                <div class="flex items-center gap-4 p-4 bg-canvas-subtle rounded-xl">
                  <div class="w-14 h-14 rounded-full bg-accent-subtle flex items-center justify-center text-lg font-bold text-accent">{getInitials(selectedCustomer().name)}</div>
                  <div>
                    <p class="font-semibold text-ink text-lg">{selectedCustomer().name}</p>
                    <p class="text-ink-muted">{selectedCustomer().email}</p>
                  </div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                  <div class="p-4 bg-canvas-subtle rounded-xl"><p class="text-xs text-ink-muted uppercase tracking-wider mb-1">{i18n.t("dashboard.customer.phone")}</p><p class="font-medium text-ink">{selectedCustomer().phone}</p></div>
                  <div class="p-4 bg-canvas-subtle rounded-xl"><p class="text-xs text-ink-muted uppercase tracking-wider mb-1">{i18n.t("dashboard.customer.totalBookings")}</p><p class="font-medium text-ink">{selectedCustomer().bookingsCount}</p></div>
                </div>
                <Show when={selectedCustomer().notes}>
                  <div class="p-4 bg-canvas-subtle rounded-xl"><p class="text-xs text-ink-muted uppercase tracking-wider mb-1">{i18n.t("dashboard.customer.notes")}</p><p class="text-ink text-sm">{selectedCustomer().notes}</p></div>
                </Show>
                <div>
                  <p class="text-sm font-semibold text-ink mb-3">{i18n.t("dashboard.customer.bookings")}</p>
                  <div class="space-y-2">
                    {getCustomerBookings(selectedCustomer().email).slice(0, 5).map((b: any) => (
                      <div class="flex items-center gap-3 p-3 rounded-xl border border-border/60">
                        <div class="flex-1 min-w-0">
                          <p class="text-sm font-medium text-ink">{b.service}</p>
                          <p class="text-xs text-ink-muted">{new Date(b.startsAt).toLocaleDateString()}</p>
                        </div>
                        <span class={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${b.status === "confirmed" ? "bg-accent/10 text-accent" : "bg-canvas-muted text-ink-muted"}`}>{i18n.t(`dashboard.${b.status}`)}</span>
                      </div>
                    ))}
                    <Show when={getCustomerBookings(selectedCustomer().email).length === 0}>
                      <p class="text-sm text-ink-muted">{i18n.t("dashboard.customer.noBookings")}</p>
                    </Show>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Show>
      </div>
    );
  };

  // ==========================================
  // ZONES PAGE
  // ==========================================
  const ZonesPage = () => {
    const [activeTab, setActiveTab] = createSignal<"zones" | "blocked" | "hours">("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 resolvedLocations = () => [
      { id: "z1", name: "Main Hall", type: "hall", capacity: 20, bookingsToday: 5 },
      { id: "z2", name: "Private Room A", type: "private", capacity: 4, bookingsToday: 2 },
      { id: "z3", name: "Treatment Room", type: "room", capacity: 2, bookingsToday: 8 },
    ];

    const locationLimit = () => resolvedBilling()?.entitlements?.maxLocations ?? 3;
    const canAddLocation = () => resolvedLocations().length < locationLimit();

    const handleAddZone = () => {
      if (!canAddLocation()) { setShowUpgradePrompt(true); setShowAddZone(false); return; }
      setNewZoneName(""); setNewZoneType("room"); setNewZoneCapacity(10); setShowAddZone(false);
    };

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

    return (
      <div class={`space-y-6 transition-opacity duration-200 ${isPageTransitioning() ? "opacity-0" : "opacity-100"}`}>
        <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">{i18n.t("dashboard.zones")}</h1>
            <p class="text-ink-muted mt-1">{resolvedLocations().length} {i18n.locale() === "cs" ? "zon" : "zones"}</p>
          </div>
        </div>

        <div class="flex gap-2 p-1 bg-canvas-subtle rounded-xl w-fit">
          {[
            { id: "zones", label: i18n.t("dashboard.zones"), icon: MapPinIcon },
            { id: "blocked", label: i18n.t("dashboard.zone.blockedDays"), icon: BanIcon },
            { id: "hours", label: i18n.t("dashboard.zone.workingHours"), icon: ClockIcon },
          ].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="space-y-6">
            <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">{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>
                    {i18n.t("dashboard.zone.limitReached")}
                  </button>
                }>
                  <button onClick={() => setShowAddZone(true)} class="btn-primary text-sm"><PlusIcon /> {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">{i18n.t("dashboard.zone.add")}</h4>
                  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <Input type="text" label={i18n.t("dashboard.zone.name")} value={newZoneName()} onInput={(e) => setNewZoneName(e.currentTarget.value)} placeholder={i18n.locale() === "cs" ? "napr. Hlavni sal" : "e.g. Main Hall"} />
                    <Select label={i18n.t("dashboard.zone.type")} value={newZoneType()} onChange={(v) => setNewZoneType(v)} options={[{ value: "room", label: i18n.t("dashboard.zone.rooms") }, { value: "private", label: i18n.t("dashboard.zone.private") }, { value: "hall", label: i18n.t("dashboard.zone.hall") }]} />
                    <Input type="number" label={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={handleAddZone} class="btn-primary text-sm">{i18n.t("dashboard.settings.save")}</button>
                    <button onClick={() => setShowAddZone(false)} class="btn-secondary text-sm">{i18n.t("common.cancel")}</button>
                  </div>
                </div>
              </Show>
              <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)} • {i18n.t("dashboard.zone.capacity")}: {zone.capacity}</p>
                      </div>
                    </div>
                    <div class="text-right">
                      <p class="text-sm font-medium text-ink">{zone.bookingsToday}</p>
                      <p class="text-xs text-ink-muted">{i18n.locale() === "cs" ? "rezervaci dnes" : "today"}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {activeTab() === "blocked" && (
          <div class="surface-card 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">{i18n.t("dashboard.empty.title")}</p>
            <p class="text-sm text-ink-subtle mt-1">{i18n.locale() === "cs" ? "Zatim nemate zadne blokovane dny." : "No blocked days yet."}</p>
          </div>
        )}

        {activeTab() === "hours" && (
          <div class="surface-card p-12 text-center">
            <div class="w-16 h-16 rounded-full bg-canvas-subtle flex items-center justify-center mx-auto mb-4"><ClockIcon /></div>
            <p class="text-ink-muted font-medium">{i18n.t("dashboard.empty.title")}</p>
            <p class="text-sm text-ink-subtle mt-1">{i18n.locale() === "cs" ? "Nastaveni pracovni doby bude dostupne brzy." : "Working hours settings coming soon."}</p>
          </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">{i18n.t("dashboard.locationLimitReached")}</h4>
                  <p class="text-sm text-ink-muted mb-4">{i18n.locale() === "cs" ? "Vas plan umoznuje pouze omezeny pocet lokaci. Pro vice lokaci upgradujte." : "Your plan allows a limited number of locations. Upgrade for more."}</p>
                  <div class="flex gap-3">
                    <button onClick={() => { setShowUpgradePrompt(false); void openCheckout(); }} class="px-4 py-2 bg-accent text-canvas text-sm font-medium rounded-lg hover:bg-accent-hover transition-colors">{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">{i18n.t("dashboard.close")}</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Show>
      </div>
    );
  };


  // ==========================================
  // BILLING PAGE
  // ==========================================
  const BillingPage = () => {
    const current = resolvedBilling();
    const entitlements = current?.entitlements;
    const isTrialing = current?.subscriptionStatus === "trialing";
    const isActive = current?.subscriptionStatus === "active";
    const planCode = current?.planCode ?? "starter";
    const planName = current?.planName ?? "Starter";
    const trialDays = current?.trialDaysRemaining ?? 0;

    const planFeatures = createMemo(() => {
      const cs = i18n.locale() === "cs";
      const base = [
        { label: i18n.t("dashboard.billing.locations"), value: entitlements?.maxLocations ?? 1, limit: entitlements?.maxLocations ?? 1 },
        { label: i18n.t("dashboard.billing.bookings"), value: entitlements?.maxBookings === -1 ? "∞" : (entitlements?.maxBookings ?? 50), limit: entitlements?.maxBookings ?? 50 },
        { label: i18n.t("dashboard.billing.staff"), value: entitlements?.maxStaff ?? 1, limit: entitlements?.maxStaff ?? 1 },
      ];
      if (planCode === "pro" || planCode === "business") {
        base.push({ label: cs ? "Emailove pripominky" : "Email reminders", value: "✓", limit: "✓" });
        base.push({ label: cs ? "Analytika" : "Analytics", value: "✓", limit: "✓" });
      }
      if (planCode === "business") {
        base.push({ label: cs ? "API pristup" : "API access", value: "✓", limit: "✓" });
      }
      return base;
    });

    return (
      <div class={`space-y-6 transition-opacity duration-200 ${isPageTransitioning() ? "opacity-0" : "opacity-100"}`}>
        <div>
          <h1 class="text-2xl sm:text-3xl font-bold text-ink font-display">{i18n.t("dashboard.billing")}</h1>
          <p class="text-ink-muted mt-1">{i18n.t("dashboard.billing.currentPlan")}: {planName}</p>
        </div>

        {/* Billing notice/error */}
        <Show when={billingNotice()}>
          <div class="p-4 rounded-xl bg-accent-subtle border border-accent/20 flex items-center justify-between animate-fade-in">
            <div class="flex items-center gap-3"><SparklesIcon /><p class="text-sm font-medium text-accent">{billingNotice()}</p></div>
            <button onClick={() => setBillingNotice(null)} class="p-1.5 hover:bg-accent/10 rounded-lg text-accent"><XIcon /></button>
          </div>
        </Show>
        <Show when={billingError()}>
          <div class="p-4 rounded-xl bg-canvas-subtle border border-ink/10 flex items-center justify-between animate-fade-in">
            <p class="text-sm font-medium text-ink">{billingError()}</p>
            <button onClick={() => setBillingError(null)} class="p-1.5 hover:bg-canvas-muted rounded-lg text-ink-muted"><XIcon /></button>
          </div>
        </Show>

        {/* Current Plan Card */}
        <div class="surface-card p-6">
          <div class="flex items-start justify-between gap-4 mb-6">
            <div>
              <div class="flex items-center gap-3 mb-2">
                <h3 class="text-xl font-bold text-ink font-display">{planName}</h3>
                {isTrialing && <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-accent/10 text-accent">{i18n.locale() === "cs" ? `Zkusebni doba (${trialDays} dnu)` : `Trial (${trialDays} days)`}</span>}
                {isActive && <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-accent/10 text-accent">{i18n.t("dashboard.confirmed")}</span>}
              </div>
              <p class="text-sm text-ink-muted">{i18n.t("dashboard.billing.period")}: {billingInterval() === "monthly" ? (i18n.locale() === "cs" ? "Mesicne" : "Monthly") : (i18n.locale() === "cs" ? "Rocne" : "Yearly")}</p>
            </div>
            <div class="flex gap-2 shrink-0">
              <button onClick={() => setBillingInterval("monthly")} class={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${billingInterval() === "monthly" ? "bg-accent text-canvas" : "bg-canvas-subtle text-ink-muted hover:text-ink"}`}>{i18n.locale() === "cs" ? "Mesicne" : "Monthly"}</button>
              <button onClick={() => setBillingInterval("yearly")} class={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${billingInterval() === "yearly" ? "bg-accent text-canvas" : "bg-canvas-subtle text-ink-muted hover:text-ink"}`}>{i18n.locale() === "cs" ? "Rocne" : "Yearly"}</button>
            </div>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {planFeatures().map((feature: any) => (
              <div class="p-4 bg-canvas-subtle rounded-xl">
                <p class="text-xs text-ink-muted uppercase tracking-wider mb-1">{feature.label}</p>
                <p class="text-lg font-semibold text-ink">{typeof feature.value === "number" ? `${feature.value} / ${feature.limit}` : feature.value}</p>
              </div>
            ))}
          </div>

          <div class="flex flex-wrap gap-3 mt-6">
            <button onClick={() => void openCheckout()} disabled={billingAction() === "checkout"} class="btn-primary disabled:opacity-50">
              {billingAction() === "checkout" ? (i18n.locale() === "cs" ? "Otevirani..." : "Opening...") : (isTrialing ? i18n.t("dashboard.upgrade") : i18n.t("dashboard.checkout"))}
            </button>
            <Show when={isActive || isTrialing}>
              <button onClick={() => void openPortal()} class="btn-secondary">{i18n.locale() === "cs" ? "Spravovat predplatne" : "Manage subscription"}</button>
            </Show>
            <button onClick={() => void refreshBilling()} disabled={billingAction() === "refresh"} class="btn-secondary disabled:opacity-50">
              {billingAction() === "refresh" ? (i18n.locale() === "cs" ? "Obnovovani..." : "Refreshing...") : i18n.t("dashboard.refreshBilling")}
            </button>
          </div>
        </div>
      </div>
    );
  };

  // ==========================================
  // SETTINGS PAGE
  // ==========================================
  const SettingsPage = () => {
    const [brandColor, setBrandColor] = createSignal(resolvedBootstrap()?.brand?.primaryColor ?? "#c25e3a");
    const [brandSaving, setBrandSaving] = createSignal(false);
    const [activeEmailType, setActiveEmailType] = createSignal("confirmation");
    const [emailSubject, setEmailSubject] = createSignal("");
    const [emailBody, setEmailBody] = createSignal("");

    const presetColors = [
      { name: i18n.locale() === "cs" ? "Hneda" : "Terracotta", color: "#c25e3a" },
      { name: i18n.locale() === "cs" ? "Zelena" : "Sage", color: "#5a7c5a" },
      { name: i18n.locale() === "cs" ? "Modra" : "Ocean", color: "#3a6a8a" },
      { name: i18n.locale() === "cs" ? "Fialova" : "Plum", color: "#6a4a7a" },
    ];

    const handleSaveBrand = async () => {
      const bearer = token();
      if (!bearer || bearer.startsWith("demo.")) { setDemoNotice(i18n.locale() === "cs" ? "V demo rezimu nelze ukladat." : "Cannot save in demo mode."); return; }
      setBrandSaving(true);
      try {
        await (apiClient as any).PUT("/v1/tenants/brand", { headers: { Authorization: `Bearer ${bearer}` }, body: { primaryColor: brandColor() } });
      } catch { /* ignore */ }
      finally { setBrandSaving(false); }
    };

    return (
      <div class={`space-y-6 transition-opacity duration-200 ${isPageTransitioning() ? "opacity-0" : "opacity-100"}`}>
        <div>
          <h1 class="text-2xl sm:text-3xl font-bold text-ink font-display">{i18n.t("dashboard.settings")}</h1>
          <p class="text-ink-muted mt-1">{i18n.locale() === "cs" ? "Spravujte svuj podnik, branding a predvolby." : "Manage your business, branding and preferences."}</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div class="surface-card p-6">
            <div class="flex items-center gap-3 mb-5">
              <div class="w-10 h-10 rounded-full bg-accent-subtle flex items-center justify-center text-accent"><PaletteIcon /></div>
              <h3 class="text-lg font-semibold text-ink">{i18n.t("dashboard.settings.branding")}</h3>
            </div>
            <div class="mb-6">
              <label class="block text-sm font-medium text-ink-muted mb-3">{i18n.t("dashboard.settings.branding")}</label>
              <div class="grid grid-cols-4 gap-2 mb-3">
                {presetColors.map((preset) => (
                  <button onClick={() => setBrandColor(preset.color)} class={`p-2 rounded-lg border-2 transition-all ${brandColor() === preset.color ? "border-ink" : "border-transparent hover:border-ink/20"}`}>
                    <div class="w-full h-8 rounded-md shadow-sm" style={{ background: preset.color }} />
                    <p class="text-xs text-ink-muted mt-1">{preset.name}</p>
                  </button>
                ))}
              </div>
              <div class="flex items-center gap-3">
                <input type="color" value={brandColor()} onInput={(e) => setBrandColor(e.currentTarget.value)} class="w-12 h-10 rounded-lg border border-border cursor-pointer" />
                <input type="text" value={brandColor()} onInput={(e) => setBrandColor(e.currentTarget.value)} class="flex-1 px-4 py-2.5 bg-canvas-subtle border border-border rounded-xl text-ink text-sm font-mono uppercase" />
              </div>
            </div>
            <div class="p-4 bg-canvas-subtle rounded-xl">
              <p class="text-sm text-ink-muted mb-3">{i18n.t("dashboard.preview")}</p>
              <div class="p-4 rounded-xl border border-border" style={{ "border-left": `4px solid ${brandColor()}` }}>
                <div class="flex items-center gap-3 mb-3">
                  <div class="w-10 h-10 rounded-full flex items-center justify-center text-canvas font-bold" style={{ background: brandColor() }}>B</div>
                  <div>
                    <p class="font-semibold text-ink">Bookra</p>
                    <p class="text-xs text-ink-muted">{i18n.locale() === "cs" ? "Rezervujte si termin" : "Book an appointment"}</p>
                  </div>
                </div>
                <button class="w-full py-2.5 rounded-lg text-canvas font-medium text-sm" style={{ background: brandColor() }}>{i18n.locale() === "cs" ? "Rezervovat" : "Book Now"}</button>
              </div>
            </div>
            <button onClick={handleSaveBrand} disabled={brandSaving()} class="mt-4 w-full py-2.5 bg-accent text-canvas rounded-xl hover:bg-accent-hover transition-colors font-medium disabled:opacity-60 flex items-center justify-center gap-2">
              <Show when={brandSaving()}><span class="inline-block w-4 h-4 border-2 border-canvas/30 border-t-canvas rounded-full animate-spin" /></Show>
              {brandSaving() ? i18n.t("dashboard.saving") : i18n.t("dashboard.settings.save")}
            </button>
          </div>

          <div class="surface-card p-6">
            <div class="flex items-center gap-3 mb-5">
              <div class="w-10 h-10 rounded-full bg-accent-subtle flex items-center justify-center text-accent"><MailIcon /></div>
              <div>
                <h3 class="text-lg font-semibold text-ink">{i18n.t("dashboard.settings.emailNotifications")}</h3>
                <p class="text-sm text-ink-muted">{i18n.locale() === "cs" ? "Upravte emaily posilane zakaznikum." : "Customize emails sent to customers."}</p>
              </div>
            </div>
            <div class="flex gap-2 mb-4 overflow-x-auto pb-2">
              {[
                { key: "confirmation", label: i18n.t("dashboard.confirmed"), icon: CheckCircleIcon },
                { key: "reminder", label: i18n.t("dashboard.notifications"), icon: BellIcon },
                { key: "cancellation", label: i18n.t("dashboard.cancelled"), icon: XCircleIcon },
                { key: "reschedule", label: i18n.t("dashboard.edit"), icon: CalendarDaysIcon },
              ].map((type) => (
                <button onClick={() => setActiveEmailType(type.key)} class={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all ${activeEmailType() === type.key ? "bg-accent text-canvas" : "bg-canvas-subtle text-ink-muted hover:text-ink"}`}>
                  <type.icon /> {type.label}
                </button>
              ))}
            </div>
            <div class="space-y-4">
              <Input type="text" label={i18n.t("dashboard.settings.emailSubject")} value={emailSubject()} onInput={(e) => setEmailSubject(e.currentTarget.value)} placeholder={activeEmailType() === "confirmation" ? (i18n.locale() === "cs" ? "Potvrzeni rezervace" : "Booking Confirmation") : ""} />
              <Textarea label={i18n.t("dashboard.settings.emailBody")} value={emailBody()} onInput={(e) => setEmailBody(e.currentTarget.value)} rows={6} resize="none" placeholder={i18n.locale() === "cs" ? "Obsah emailu..." : "Email body..."} />
            </div>
            <button class="mt-4 w-full py-2.5 bg-accent text-canvas rounded-xl hover:bg-accent-hover transition-colors font-medium">{i18n.t("dashboard.settings.save")}</button>
          </div>
        </div>

        <SMSSettings token={token} />
        <WidgetBuilder config={{
          tenantSlug: resolvedSummary()?.tenantSlug || "demo-studio",
          publicBookingUrl: resolvedSummary()?.publicBookingUrl || "https://bookra.eu/book/demo-studio",
          tenantName: resolvedSummary()?.tenantName || "Demo Studio",
          primaryColor: resolvedBootstrap()?.brand?.primaryColor,
        }} />
      </div>
    );
  };

  // ==========================================
  // ACTIVE PAGE SWITCHER
  // ==========================================
  const ActivePage = () => {
    switch (activeSection()) {
      case "overview": return <OverviewPage />;
      case "bookings": return <BookingsPage />;
      case "customers": return <CustomersPage />;
      case "zones": return <ZonesPage />;
      case "billing": return <BillingPage />;
      case "settings": return <SettingsPage />;
      default: return <OverviewPage />;
    }
  };

  // ==========================================
  // MAIN RETURN
  // ==========================================
  return (
    <div class="min-h-screen flex bg-canvas font-dashboard">
      <Sidebar />
      <div class="flex-1 flex flex-col min-h-screen">
        {/* Mobile Header */}
        <div class="lg:hidden bg-canvas/80 backdrop-blur-xl border-b border-border p-4 flex items-center justify-between sticky top-0 z-40">
          <img src="/bookra-logo.svg" alt="Bookra" class="h-8 w-auto dark:invert" />
          <div class="flex items-center gap-2">
            <NotificationDropdown bookings={normalizedAllBookings()} billing={resolvedBilling()} />
            <button onClick={() => setIsMobileMenuOpen(true)} aria-label={i18n.locale() === "cs" ? "Otevrit menu" : "Open menu"} class="p-2 hover:bg-canvas-subtle rounded-xl transition-all">
              <MenuIcon />
            </button>
          </div>
        </div>
        <MobileMenu />

        <main class="flex-1 p-4 lg:p-8 overflow-y-auto">
          <DemoBanner />

          {/* Demo Notice Toast */}
          <Show when={demoNotice()}>
            <div class="mb-6 p-4 rounded-xl bg-accent-subtle border border-accent/20 flex items-center justify-between animate-fade-in">
              <div class="flex items-center gap-3">
                <SparklesIcon />
                <p class="text-sm font-medium text-accent">{demoNotice()}</p>
              </div>
              <button onClick={() => setDemoNotice(null)} class="p-1.5 hover:bg-accent/10 rounded-lg text-accent"><XIcon /></button>
            </div>
          </Show>

          {/* Not logged in */}
          <Show when={!token.loading && !token()}>
            <div class="max-w-lg mx-auto py-12 lg:py-20 px-4 text-center">
              <div class="relative inline-block mb-6">
                <div class="absolute inset-0 bg-accent/20 rounded-full blur-3xl opacity-60" />
                <BookraCharacter pose="hello" size="xl" animate={true} />
              </div>
              <h2 class="text-3xl lg:text-4xl font-bold text-ink tracking-tight font-display">{i18n.locale() === "cs" ? "Vas rezervacni system ceka" : "Your booking system awaits"}</h2>
              <p class="text-ink-muted mt-3 text-lg max-w-md mx-auto">{i18n.t("dashboard.welcome.body")}</p>
              <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
                <button onClick={() => window.dispatchEvent(new CustomEvent("openAuthDialog", { detail: { mode: "sign-in" } }))} class="btn-primary w-full sm:w-auto">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" x2="3" y1="12" y2="12"/></svg>
                  {i18n.t("auth.signIn")}
                </button>
                <button onClick={async () => { await auth.signInAsDemo(); window.location.reload(); }} class="btn-secondary w-full sm:w-auto">
                  <SparklesIcon /> {i18n.t("dashboard.tryDemo")}
                </button>
              </div>
              <p class="mt-6 text-sm text-ink-muted">{i18n.locale() === "cs" ? "Jeste nemate ucet? " : "No account yet? "}
                <button onClick={() => window.dispatchEvent(new CustomEvent("openAuthDialog", { detail: { mode: "register" } }))} class="text-accent hover:text-accent-hover font-medium underline underline-offset-2">{i18n.t("auth.createAccount")}</button>
              </p>
            </div>
          </Show>

          {/* Loading */}
          <Show when={token() && (bootstrap.loading || summary.loading || billing.loading)}>
            <div class="flex flex-col items-center justify-center py-20">
              <BookraCharacter pose="walk" size="lg" animate={true} />
              <p class="mt-6 text-sm text-ink-muted animate-pulse font-medium">{i18n.locale() === "cs" ? "Nacitani dashboardu..." : "Loading your dashboard..."}</p>
            </div>
          </Show>

          {/* Dashboard Content */}
          <Show when={isDashboardReady()}>
            <div class="max-w-7xl mx-auto">
              <ActivePage />
            </div>
          </Show>
        </main>
      </div>

      {/* Integration Modal */}
      <IntegrationModal
        isOpen={showIntegrationModal()}
        onClose={() => setShowIntegrationModal(false)}
        tenantSlug={resolvedSummary()?.tenantSlug || "demo-studio"}
        publicBookingUrl={resolvedSummary()?.publicBookingUrl || "https://bookra.eu/book/demo-studio"}
        tenantName={resolvedSummary()?.tenantName || "Demo Studio"}
        primaryColor={resolvedBootstrap()?.brand?.primaryColor}
      />

      <BookingDetailModal />
    </div>
  );
}
