import React, { Suspense, lazy, useEffect, useMemo, useState } from "react";
import Shell from "./layout/Shell";

const DashboardScreen = lazy(() => import("./screens/DashboardScreen"));
const BookingsScreen = lazy(() => import("./screens/BookingsScreen"));
const BookingEditScreen = lazy(() => import("./screens/BookingEditScreen"));
const FormFieldsScreen = lazy(() => import("./screens/FormFieldsScreen"));
const ServicesScreen = lazy(() => import("./screens/ServicesScreen"));
const ServicesEditScreen = lazy(() => import("./screens/ServicesEditScreen"));
const CategoriesScreen = lazy(() => import("./screens/CategoriesScreen"));
const CategoriesEditScreen = lazy(() => import("./screens/CategoriesEditScreen"));
const ExtrasScreen = lazy(() => import("./screens/ExtrasScreen"));
const ExtrasEditScreen = lazy(() => import("./screens/ExtrasEditScreen"));
const PromoCodesScreen = lazy(() => import("./screens/PromoCodesScreen"));
const CalendarScreen = lazy(() => import("./screens/CalendarScreen"));
const ScheduleScreen = lazy(() => import("./screens/ScheduleScreen"));
const HolidaysScreen = lazy(() => import("./screens/HolidaysScreen"));
const LocationsScreen = lazy(() => import("./screens/LocationsScreen"));
const LocationsEditScreen = lazy(() => import("./screens/LocationsEditScreen"));
const LocationCategoryEditScreen = lazy(() => import("./screens/LocationCategoryEditScreen"));
const CustomersScreen = lazy(() => import("./screens/CustomersScreen"));
const CustomersEditScreen = lazy(() => import("./screens/CustomersEditScreen"));
const AgentsScreen = lazy(() => import("./screens/AgentsScreen"));
const AgentsEditScreen = lazy(() => import("./screens/AgentsEditScreen"));
const SettingsScreen = lazy(() => import("./screens/SettingsScreen"));
const AuditScreen = lazy(() => import("./screens/AuditScreen"));
const ToolsScreen = lazy(() => import("./screens/ToolsScreen"));
const NotificationsScreen = lazy(() => import("./screens/NotificationsScreen"));
const BookingFormDesignerScreen = lazy(() => import("./screens/BookingFormDesignerScreen"));
const HowToUseScreen = lazy(() => import("./screens/HowToUseScreen"));
const ProScreen = lazy(() => import("./screens/ProScreen"));

const SCREEN_COMPONENTS = {
  dashboard: DashboardScreen,
  bookings: BookingsScreen,
  "bookings-edit": BookingEditScreen,
  "form-fields": FormFieldsScreen,
  services: ServicesScreen,
  "services-edit": ServicesEditScreen,
  categories: CategoriesScreen,
  "categories-edit": CategoriesEditScreen,
  extras: ExtrasScreen,
  "extras-edit": ExtrasEditScreen,
  promo: PromoCodesScreen,
  calendar: CalendarScreen,
  schedule: ScheduleScreen,
  holidays: HolidaysScreen,
  locations: LocationsScreen,
  "locations-edit": LocationsEditScreen,
  "location-categories-edit": LocationCategoryEditScreen,
  customers: CustomersScreen,
  "customers-edit": CustomersEditScreen,
  agents: AgentsScreen,
  "agents-edit": AgentsEditScreen,
  settings: SettingsScreen,
  audit: AuditScreen,
  tools: ToolsScreen,
  notifications: NotificationsScreen,
  "design-form": BookingFormDesignerScreen,
  "how-to": HowToUseScreen,
  pro: ProScreen,
};

const SCREEN_LOADING_LABELS = {
  dashboard: "dashboard",
  bookings: "bookings",
  "bookings-edit": "booking editor",
  "form-fields": "form fields",
  services: "services",
  "services-edit": "service editor",
  categories: "categories",
  "categories-edit": "category editor",
  extras: "extras",
  "extras-edit": "extra editor",
  promo: "promo codes",
  calendar: "calendar",
  schedule: "schedule",
  holidays: "holidays",
  locations: "locations",
  "locations-edit": "location editor",
  "location-categories-edit": "location categories",
  customers: "customers",
  "customers-edit": "customer editor",
  agents: "agents",
  "agents-edit": "agent editor",
  settings: "settings",
  audit: "audit log",
  tools: "tools",
  notifications: "notifications",
  "design-form": "booking form designer",
  "how-to": "how-to guides",
  pro: "pro center",
};

function resolveScreen(page) {
  switch(page){
    case "pointlybooking_dashboard": return "dashboard";
    case "bp-bookings": return "bookings";
    case "pointlybooking_bookings": return "bookings";
    case "pointlybooking_bookings_edit": return "bookings-edit";
    case "bp-calendar": return "calendar";
    case "pointlybooking_calendar": return "calendar";
    case "bp-schedule": return "schedule";
    case "pointlybooking_schedule": return "schedule";
    case "bp-holidays": return "holidays";
    case "pointlybooking_holidays": return "holidays";

    case "bp-services": return "services";
    case "pointlybooking_services": return "services";
    case "pointlybooking_services_edit": return "services-edit";
    case "bp-categories": return "categories";
    case "pointlybooking_categories": return "categories";
    case "pointlybooking_categories_edit": return "categories-edit";
    case "bp-extras": return "extras";
    case "pointlybooking_extras": return "extras";
    case "pointlybooking_extras_edit": return "extras-edit";
    case "bp-locations": return "locations";
    case "pointlybooking_locations": return "locations";
    case "bp-locations-edit": return "locations-edit";
    case "pointlybooking_locations_edit": return "locations-edit";
    case "bp-location-categories-edit": return "location-categories-edit";
    case "pointlybooking_location_categories_edit": return "location-categories-edit";
    case "bp-promo-codes": return "promo";
    case "pointlybooking_promo_codes": return "promo";
    case "bp-form-fields": return "form-fields";
    case "pointlybooking_form_fields": return "form-fields";
    case "bp-customers": return "customers";
    case "pointlybooking_customers": return "customers";
    case "pointlybooking_customers_edit": return "customers-edit";
    case "bp-agents": return "agents";
    case "pointlybooking_agents": return "agents";
    case "pointlybooking_agents_edit": return "agents-edit";

    case "bp-settings": return "settings";
    case "pointlybooking_settings": return "settings";
    case "bp-notifications": return "notifications";
    case "pointlybooking_notifications": return "notifications";
    case "bp-audit-log": return "audit";
    case "pointlybooking_audit": return "audit";
    case "bp-tools": return "tools";
    case "pointlybooking_tools": return "tools";
    case "pointlybooking_design_form": return "design-form";
    case "pointlybooking_how_to_use": return "how-to";
    case "pointlybooking_pro": return "pro";

    default: return "dashboard";
  }
}

export default function AdminApp() {
  const page = window.pointlybooking_ADMIN?.page || "pointlybooking_dashboard";
  const screen = useMemo(() => resolveScreen(page), [page]);
  const ScreenComponent = SCREEN_COMPONENTS[screen] || DashboardScreen;

  const [theme, setTheme] = useState("light");

  useEffect(() => {
    setTheme("light");
    document.documentElement.classList.remove("bp-dark");
    localStorage.setItem("pointlybooking_theme", "light");
  }, []);

  function toggleTheme() {
    return;
  }

  return (
    <Shell
      theme={theme}
      onToggleTheme={toggleTheme}
      active={screen}
    >
      <Suspense fallback={<ScreenLoadingState screen={screen} />}>
        <ScreenComponent />
      </Suspense>
    </Shell>
  );
}

function ScreenLoadingState({ screen }) {
  const label = SCREEN_LOADING_LABELS[screen] || "workspace";
  return <div className="bp-state-card">Loading {label}...</div>;
}

function ComingSoon({ title }) {
  return (
    <div className="bp-card">
      <div className="bp-card-label">Page</div>
      <div className="bp-card-value" style={{fontSize:18, marginTop:6}}>
        {title} (UI shell active)
      </div>
      <div className="bp-muted" style={{marginTop:8}}>
        Next: we design and connect this page with Horizon UI layout.
      </div>
    </div>
  );
}