import type { Appearance } from "@clerk/types";

/**
 * Clerk appearance configuration matching Mawidi brand.
 *
 * Brand tokens (from tailwind.config.ts):
 *   brand.green      #0F9972  — primary CTA (WCAG AA 4.5:1)
 *   brand.greenHover #0D8761  — hover state
 *   brand.cream      #FDF8F3  — page background
 *   Slate 900        #0f172a  — heading text
 *   Slate 500        #64748b  — muted text
 *   Slate 300        #cbd5e1  — borders
 *
 * Fonts (from globals.css):
 *   LTR: var(--font-en), Inter, system-ui, sans-serif
 *   RTL: var(--font-ar), Cairo, system-ui, sans-serif
 */

const BASE_VARIABLES: Appearance["variables"] = {
  colorPrimary: "#0F9972",
  colorBackground: "#ffffff",
  colorText: "#0f172a",
  colorTextSecondary: "#64748b",
  colorInputBackground: "#ffffff",
  colorInputText: "#0f172a",
  colorDanger: "#ef4444",
  colorSuccess: "#0F9972",
  colorBorder: "#e2e8f0", // slate-200
  borderRadius: "0.5rem",
  fontFamily: "var(--font-en, Inter), system-ui, sans-serif",
  fontSize: "0.875rem",
  spacingUnit: "1rem",
};

/**
 * Tailwind className overrides for Clerk UI elements.
 *
 * Clerk's `elements` type is a complex distributive union that TypeScript
 * cannot directly validate in object-literal form.  The cast below is safe
 * because all values are plain className strings, exactly as Clerk expects.
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const BASE_ELEMENTS: Appearance["elements"] = {
  // Root card — white, rounded-xl, border border-slate-200 (matches login page)
  card: "bg-white rounded-xl shadow-sm border border-slate-200",

  // Header
  headerTitle: "text-2xl font-bold text-slate-900",
  headerSubtitle: "text-slate-500 text-sm",

  // Social OAuth button — match Google button style
  socialButtonsBlockButton:
    "border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors",
  socialButtonsBlockButtonText: "text-slate-700 font-medium",

  // Divider
  dividerLine: "bg-slate-200",
  dividerText: "text-slate-500 text-xs bg-white px-3",

  // Form fields — match login page inputs
  formFieldLabel: "text-sm font-medium text-slate-700",
  formFieldInput:
    "border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-[#0F9972] focus:border-[#0F9972] w-full px-4 py-3",
  formFieldInputShowPasswordButton: "text-slate-400 hover:text-slate-600",

  // Primary action button — brand-green
  formButtonPrimary:
    "bg-[#0F9972] text-white py-3 px-4 rounded-lg font-medium text-sm hover:bg-[#0D8761] transition-colors disabled:opacity-50",

  // Secondary / ghost button
  formButtonReset: "text-[#0F9972] hover:underline text-sm",

  // Footer links
  footerActionLink: "text-[#0F9972] font-medium hover:underline",
  footerActionText: "text-slate-600 text-sm",

  // Alerts
  formFieldErrorText: "text-red-700 text-sm",
  alert__danger: "bg-red-50 border border-red-200 rounded-lg text-red-700",
  alert__warning:
    "bg-amber-50 border border-amber-200 rounded-lg text-amber-700",

  // Internal nav (user-button profile menu)
  navbar: "bg-white border-b border-slate-200",
  navbarButton__active: "text-[#0F9972] font-medium",
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
} as any;

/**
 * Default (LTR / English) Clerk appearance.
 */
export const clerkAppearance: Appearance = {
  variables: BASE_VARIABLES,
  elements: BASE_ELEMENTS,
};

/**
 * RTL (Arabic) variant.  Pass this when lang === 'ar'.
 * Overrides fontFamily to Cairo and sets layout direction.
 */
export const clerkAppearanceRTL: Appearance = {
  variables: {
    ...BASE_VARIABLES,
    fontFamily: "var(--font-ar, Cairo), system-ui, sans-serif",
  },
  elements: {
    ...BASE_ELEMENTS,
    // Force RTL text alignment on key elements.
    // Clerk renders in an isolated container, so we override via class injection.
    card: "bg-white rounded-xl shadow-sm border border-slate-200 [direction:rtl]",
    headerTitle: "text-2xl font-bold text-slate-900 text-right",
    headerSubtitle: "text-slate-500 text-sm text-right",
    formFieldLabel: "text-sm font-medium text-slate-700 text-right",
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  } as any,
};

/**
 * Helper: pick the correct appearance based on the lang param.
 *
 * Usage in ClerkProvider:
 *   import { getClerkAppearance } from '@/lib/clerk-theme';
 *   <ClerkProvider appearance={getClerkAppearance(lang)}>
 *
 * Usage in individual components:
 *   <SignIn appearance={getClerkAppearance(lang)} />
 */
export function getClerkAppearance(lang: string): Appearance {
  return lang === "ar" ? clerkAppearanceRTL : clerkAppearance;
}
