/**
 * project.theme.ts — HOST-OWNED config for THIS project / organisation (FHC).
 *
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │  Lives in app-config/, OUTSIDE the user-management module. The module     │
 * │  never imports this file — the host passes it in via                      │
 * │  <UserManagementApp config={projectTheme} /> (see ../src/main.tsx).       │
 * │  At submodule-split time, this whole folder moves to the host repo.       │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * Every field is optional — remove lines you don't need to override.
 *
 * Flow:
 *   project.theme.ts  →  design.config.ts (module engine)  →  CSS vars + Mantine theme
 *   TenantConfig.ts   →  overrides --primary at runtime per hostname
 *
 * The TenantConfig layer runs AFTER this, so per-hostname primary-color overrides
 * still work on top of whatever you set here.
 */

import type { DesignConfig } from "@/config/design.config";
import { fhcMantineTheme } from "./fhc.theme";

export const projectTheme: DesignConfig = {
  // ─────────────────────────────────────────────────────────────────────────
  //  BRANDING
  //  Replace with your organisation's assets.
  // ─────────────────────────────────────────────────────────────────────────
  brand: {
    appName: "Federal Housing Corporation", // FHC — shown in the browser tab
    // Drop the FHC logo at this path in /public to show it in the sidebar brand
    // and as the favicon. Until then the sidebar falls back to a building icon.
    // logoUrl: "/assets/logo/fhc.png",
    // faviconUrl: "/favicon.ico",          // optional — defaults to logoUrl
  },

  // ─────────────────────────────────────────────────────────────────────────
  //  COLORS
  //  Change `primary` to your brand hex and everything cascades automatically.
  //  Shades primary-50 → primary-950 are computed via CSS color-mix in index.css.
  //  TenantConfig overrides this per-hostname, so localhost vs edrsc.com can
  //  still have different colors.
  // ─────────────────────────────────────────────────────────────────────────
  colors: {
    primary: "#357ABD",                    // FHC blue (fhcBlue-6) — buttons, links, active states
    //                                     // "#5D2E1F" brick (FHC chrome) is used by the sidebar/modal skin below
    //                                     // "#2563eb" blue  |  "#7c3aed" purple
    //                                     // "#16a34a" green |  "#dc2626" red
    //                                     // "#f59e0b" amber |  "#0284c7" sky

    // primaryForeground: "#ffffff",        // text on primary-colored bg — rarely needs changing

    // secondary: "#f1f5f9",               // TODO: subtle secondary UI color
    // background: "#ffffff",              // TODO: page background
    // foreground: "#0f172a",              // TODO: main text color
    // border: "#e2e8f0",                  // TODO: input / card borders
    // muted: "#f8fafc",                   // TODO: disabled input / tag backgrounds
    // mutedForeground: "#94a3b8",         // TODO: placeholder / helper text
    // card: "#ffffff",                    // TODO: card background (if different from page)
    // sidebar: "#f8fafc",                 // TODO: sidebar background
    // danger: "#dc2626",                  // TODO: error / destructive color
  },

  // ─────────────────────────────────────────────────────────────────────────
  //  TYPOGRAPHY
  //  Load the font FIRST in index.html (Google Fonts link or @font-face) then
  //  set fontFamily here. The fallback chain is used if the custom font fails.
  // ─────────────────────────────────────────────────────────────────────────
  typography: {
    fontFamily: "Plus Jakarta Sans, Inter, ui-sans-serif, system-ui, sans-serif",
    //                                     // TODO: "Poppins, Inter, sans-serif"
    //                                     // TODO: "Cairo, Inter, sans-serif"          (Arabic)
    //                                     // TODO: "Noto Serif Ethiopic, serif"         (Amharic)

    // headingFontFamily: undefined,       // TODO: separate heading font if desired
    // baseFontSize: "16px",               // TODO: "14px" for compact dashboards
  },

  // ─────────────────────────────────────────────────────────────────────────
  //  SHAPE
  // ─────────────────────────────────────────────────────────────────────────
  shape: {
    radius: "0.625rem",                    // TODO: "0" sharp  |  "0.5rem" subtle  |  "1rem" very rounded
  },

  // ─────────────────────────────────────────────────────────────────────────
  //  SHADOWS
  //  Leave commented to use Mantine/Tailwind defaults.
  // ─────────────────────────────────────────────────────────────────────────
  // shadows: {
  //   card:     "0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06)",
  //   dropdown: "0 8px 30px rgba(0,0,0,0.12)",
  //   modal:    "0 20px 60px rgba(0,0,0,0.16)",
  // },

  // ─────────────────────────────────────────────────────────────────────────
  //  MANTINE COMPONENT DEFAULTS
  //  These become the <MantineProvider theme> defaults for every component.
  // ─────────────────────────────────────────────────────────────────────────
  components: {
    buttonDefaultVariant: "filled",        // TODO: "light" | "outline" | "subtle"
    inputDefaultSize: "sm",                // TODO: "xs" | "md" | "lg"
    inputRadius: "md",                     // TODO: "xs" | "lg" | "xl"
    modalRadius: "lg",                     // TODO: "md" | "xl"
    tableHighlightOnHover: true,
    tableStriped: false,                   // TODO: "odd" | "even" | true
  },

  // ─────────────────────────────────────────────────────────────────────────
  //  USER-MANAGEMENT LAYOUT / NAVIGATION
  //  Pick the navigation chrome and style the side menu — all from here.
  //    "classic" → app-wide SIDE MENU, no top tabs
  //    "legacy"  → top TAB bar, no side menu
  //  Each value is also exposed as a --um-* CSS var, so tweaks apply instantly.
  // ─────────────────────────────────────────────────────────────────────────
  layout: {
    userManagementView: "classic",          // TODO: "legacy" for the top-tab UI
    // showTopBar: false,                    // TODO: overrides VITE_SHOW_TOP_BAR

    // ── Dimensions ──────────────────────────────────────────────────────────
    sidebarWidth: "288px",                   // TODO: expanded side-menu width
    sidebarCollapsedWidth: "80px",           // TODO: icon-only width
    headerHeight: "64px",                    // TODO: top bar height
    // contentMaxWidth: "1440px",            // TODO: cap the content column

    // ── Side-menu skin (defaults follow the FHC brick theme) ───────────────
    sidebarBackground: "linear-gradient(180deg, #5D2E1F 0%, #3D1E14 100%)",
    sidebarColor: "rgba(255,255,255,0.76)",
    sidebarMutedColor: "rgba(255,255,255,0.42)",
    sidebarActiveBackground: "rgba(255,255,255,0.15)",
    sidebarActiveColor: "#FFFFFF",
    sidebarHoverBackground: "rgba(255,255,255,0.08)",
    sidebarBorder: "rgba(255,255,255,0.10)",
    sidebarRail: "linear-gradient(180deg, #FFD700 0%, #4A90E2 100%)",
    sidebarBrandLabel: "User Management",
    sidebarBrandSublabel: "Federal Housing",

    // ── THE MENU (data, shared by the side menu AND the top tabs) ──────────
    //  Edit/add/remove freely. `icon` is a name from the registry in
    //  navConfig.tsx (users, dashboard, content, position, settings, excel,
    //  archive, units, activity, organizations, …). `label` is an i18n key
    //  under "organization.<label>" (raw string shown if no translation).
    //  Remove this array entirely to fall back to the built-in defaults.
    //
    //  SHOW / HIDE A MENU: set `enabled: false` on any item to stop it
    //  rendering in BOTH the side menu and the top tabs — without deleting it.
    //  Omitting `enabled` (or `true`) keeps it visible. Toggle these per project.
    navItems: [
      // The menu is ROLE-FILTERED (see navConfig.tsx): each role sees only its own
      // block. Every href below has a matching route in the embedded router
      // (src/App.tsx), which is now a superset of org-admin + super-admin routes.

      // ── Org-admin / unit-admin surface ──
      { label: "dashboard", href: "/user-management/user_management-dashboard", icon: "dashboard", roles: ["admin", "unit_admin"], isPrimary: true, enabled: true },
      { label: "userManagement", href: "/user-management/user_management", icon: "users", roles: ["admin", "unit_admin"], isPrimary: true, enabled: true },
      { label: "contentManagement", displayLabel: "contentManagement", href: "/user-management/content-management", icon: "content", roles: ["admin", "unit_admin"], isPrimary: true, enabled: true },
      { label: "Position", displayLabel: "positionTypes", href: "/user-management/position-management", icon: "position", roles: ["admin", "unit_admin", "super_admin"], isPrimary: true, enabled: true },
      { label: "settings", displayLabel: "settings", href: "/user-management/organization-settings", icon: "settings", roles: ["admin", "unit_admin"], isPrimary: true, enabled: true },
      { label: "Bulk", displayLabel: "bulkUpload", href: "/user-management/bulk-upload", icon: "excel", roles: ["admin", "unit_admin"], isPrimary: true, enabled: true },
      { label: "Archive Users", displayLabel: "Archive Users", href: "/user-management/archives", icon: "archive", roles: ["admin", "unit_admin"], isPrimary: true, enabled: true },
      { label: "Archived Units & Positions", displayLabel: "Archived Units & Positions", href: "/user-management/archived", icon: "units", roles: ["admin", "unit_admin"], isPrimary: true, enabled: true },

      // ── Super-admin surface (routes now wired in App.tsx) ──
      { label: "dashboard", href: "/user-management/dashboard", icon: "dashboard", roles: ["super_admin"], isPrimary: true, enabled: true },
      { label: "organizations", href: "/user-management/organizations", icon: "organizations", roles: ["super_admin"], isPrimary: true, enabled: true },
      { label: "organizationAdmins", href: "/user-management/organization_admins", icon: "admins", roles: ["super_admin"], isPrimary: true, enabled: true },
      { label: "externalUsers", href: "/user-management/external_users", icon: "admins", roles: ["super_admin"], isPrimary: true, enabled: true },
      { label: "Migrated Records", displayLabel: "migratedRecords", href: "/user-management/migrated-records-management", icon: "file", roles: ["super_admin"], isPrimary: true, enabled: true },
      { label: "Archive Users", displayLabel: "Archive Users", href: "/user-management/archive-users", icon: "archive", roles: ["super_admin"], isPrimary: true, enabled: true },
      { label: "Archived Organizations", displayLabel: "Archived Organizations", href: "/user-management/archived-organizations", icon: "archive", roles: ["super_admin"], isPrimary: true, enabled: true },
      { label: "activityLog", href: "/user-management/activity_log", icon: "activity", roles: ["super_admin"], isPrimary: false, enabled: true },
      { label: "setting", href: "/user-management/settings", icon: "settings", roles: ["super_admin"], isPrimary: false, enabled: true },
      { label: "Letter Template", href: "/user-management/templates", icon: "file", roles: ["super_admin"], isPrimary: false, enabled: true },
    ],

    // ── Top tab bar skin (legacy view) ─────────────────────────────────────
    menuBackground: "#ffffff",               // TODO: tab bar background
    menuColor: "#334155",                    // inactive tab text
    menuActiveColor: "#357ABD",              // active tab text (FHC blue)
    menuActiveBorderColor: "#357ABD",        // active tab underline
    menuHoverColor: "#357ABD",               // tab hover text

    // ── Create / edit modal skin (shared BackofficeModal) ──────────────────
    modalAccentColor: "#5D2E1F",             // brick top strip
    modalHeaderBackground: "#F6ECE8",        // header bg (view)
    modalHeaderEditBackground: "#EACFC4",    // header bg (edit)
    modalIconBackground: "#EACFC4",          // header icon chip bg
    modalIconColor: "#5D2E1F",               // header icon chip color
    modalTitleColor: "#1F2937",              // modal title text
    modalFocusColor: "#357ABD",              // input focus ring inside modals
    modalSurface: "#ffffff",                 // modal body surface
  },

  // ─────────────────────────────────────────────────────────────────────────
  //  EXTRA CSS VARS
  //  Inject any CSS custom property that isn't covered above.
  //  Keys are variable names WITHOUT the leading "--".
  // ─────────────────────────────────────────────────────────────────────────
  // cssVars: {
  //   "sidebar-width":     "260px",
  //   "header-height":     "64px",
  //   "content-max-width": "1440px",
  //   "custom-gradient":   "linear-gradient(135deg, #18aa9d 0%, #0f7a70 100%)",
  // },

  // ─────────────────────────────────────────────────────────────────────────
  //  MANTINE THEME ESCAPE HATCH
  //  Any Mantine theme key — merged on top of everything above.
  //  Full list: https://mantine.dev/theming/theme-object/
  // ─────────────────────────────────────────────────────────────────────────
  // The FHC look & feel preset — provides the fhcBlue/fhcBrick/fhcGold/fhcGray
  // palettes and the `other.fhcLayout` / `other.fhcLayoutDark` tokens that the
  // "classic" user-management view renders with. Lives alongside this file in
  // app-config/ so the whole host config moves together at submodule-split time.
  mantineTheme: fhcMantineTheme,
};