/**
 * MediConnect Design Tokens
 * Sistema centralizado de cores, tipografia e espaçamentos
 * @version 1.0
 */

// ============================================================================
// STATUS DE CONSULTA - Cores Semânticas
// ============================================================================

export const STATUS_COLORS = {
  requested: {
    bg: "bg-blue-50 dark:bg-blue-950",
    text: "text-blue-700 dark:text-blue-300",
    border: "border-blue-200 dark:border-blue-800",
    ring: "ring-blue-500",
    badge: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200",
  },
  confirmed: {
    bg: "bg-green-50 dark:bg-green-950",
    text: "text-green-700 dark:text-green-300",
    border: "border-green-200 dark:border-green-800",
    ring: "ring-green-500",
    badge: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200",
  },
  completed: {
    bg: "bg-gray-50 dark:bg-gray-900",
    text: "text-gray-700 dark:text-gray-300",
    border: "border-gray-200 dark:border-gray-700",
    ring: "ring-gray-500",
    badge: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200",
  },
  cancelled: {
    bg: "bg-red-50 dark:bg-red-950",
    text: "text-red-700 dark:text-red-300",
    border: "border-red-200 dark:border-red-800",
    ring: "ring-red-500",
    badge: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200",
  },
  no_show: {
    bg: "bg-orange-50 dark:bg-orange-950",
    text: "text-orange-700 dark:text-orange-300",
    border: "border-orange-200 dark:border-orange-800",
    ring: "ring-orange-500",
    badge:
      "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-200",
  },
  checked_in: {
    bg: "bg-purple-50 dark:bg-purple-950",
    text: "text-purple-700 dark:text-purple-300",
    border: "border-purple-200 dark:border-purple-800",
    ring: "ring-purple-500",
    badge:
      "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-200",
  },
  in_progress: {
    bg: "bg-indigo-50 dark:bg-indigo-950",
    text: "text-indigo-700 dark:text-indigo-300",
    border: "border-indigo-200 dark:border-indigo-800",
    ring: "ring-indigo-500",
    badge:
      "bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200",
  },
} as const;

// ============================================================================
// CORES DE TEMA
// ============================================================================

export const THEME_COLORS = {
  primary: {
    50: "#eff6ff",
    100: "#dbeafe",
    200: "#bfdbfe",
    300: "#93c5fd",
    400: "#60a5fa",
    500: "#3b82f6",
    600: "#2563eb",
    700: "#1d4ed8",
    800: "#1e40af",
    900: "#1e3a8a",
    950: "#172554",
  },
  secondary: {
    50: "#f8fafc",
    100: "#f1f5f9",
    200: "#e2e8f0",
    300: "#cbd5e1",
    400: "#94a3b8",
    500: "#64748b",
    600: "#475569",
    700: "#334155",
    800: "#1e293b",
    900: "#0f172a",
    950: "#020617",
  },
  success: {
    bg: "bg-green-50 dark:bg-green-950",
    text: "text-green-700 dark:text-green-300",
    border: "border-green-500 dark:border-green-600",
    solid: "bg-green-600 text-white hover:bg-green-700",
  },
  warning: {
    bg: "bg-yellow-50 dark:bg-yellow-950",
    text: "text-yellow-700 dark:text-yellow-300",
    border: "border-yellow-500 dark:border-yellow-600",
    solid: "bg-yellow-600 text-white hover:bg-yellow-700",
  },
  error: {
    bg: "bg-red-50 dark:bg-red-950",
    text: "text-red-700 dark:text-red-300",
    border: "border-red-500 dark:border-red-600",
    solid: "bg-red-600 text-white hover:bg-red-700",
  },
  info: {
    bg: "bg-blue-50 dark:bg-blue-950",
    text: "text-blue-700 dark:text-blue-300",
    border: "border-blue-500 dark:border-blue-600",
    solid: "bg-blue-600 text-white hover:bg-blue-700",
  },
} as const;

// ============================================================================
// ESCALA DE TIPOGRAFIA (Modular Scale)
// ============================================================================

export const TYPOGRAPHY = {
  xs: "text-xs", // 12px
  sm: "text-sm", // 14px
  base: "text-base", // 16px
  lg: "text-lg", // 18px
  xl: "text-xl", // 20px
  "2xl": "text-2xl", // 24px
  "3xl": "text-3xl", // 30px
  "4xl": "text-4xl", // 36px
  "5xl": "text-5xl", // 48px
} as const;

export const FONT_WEIGHT = {
  normal: "font-normal", // 400
  medium: "font-medium", // 500
  semibold: "font-semibold", // 600
  bold: "font-bold", // 700
} as const;

// ============================================================================
// ESCALA DE ESPAÇAMENTO
// ============================================================================

export const SPACING = {
  xs: "4px", // 0.25rem
  sm: "8px", // 0.5rem
  md: "16px", // 1rem
  lg: "24px", // 1.5rem
  xl: "32px", // 2rem
  "2xl": "48px", // 3rem
  "3xl": "64px", // 4rem
  "4xl": "96px", // 6rem
} as const;

export const SPACING_CLASSES = {
  xs: "p-1", // 4px
  sm: "p-2", // 8px
  md: "p-4", // 16px
  lg: "p-6", // 24px
  xl: "p-8", // 32px
  "2xl": "p-12", // 48px
} as const;

// ============================================================================
// BREAKPOINTS RESPONSIVOS
// ============================================================================

export const BREAKPOINTS = {
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
  "2xl": "1536px",
} as const;

// ============================================================================
// BORDER RADIUS
// ============================================================================

export const RADIUS = {
  none: "rounded-none",
  sm: "rounded-sm",
  base: "rounded",
  md: "rounded-md",
  lg: "rounded-lg",
  xl: "rounded-xl",
  "2xl": "rounded-2xl",
  full: "rounded-full",
} as const;

// ============================================================================
// SHADOWS
// ============================================================================

export const SHADOWS = {
  sm: "shadow-sm",
  base: "shadow",
  md: "shadow-md",
  lg: "shadow-lg",
  xl: "shadow-xl",
  "2xl": "shadow-2xl",
  inner: "shadow-inner",
  none: "shadow-none",
} as const;

// ============================================================================
// FOCUS RINGS (Acessibilidade)
// ============================================================================

export const FOCUS_RING = {
  default:
    "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-900",
  error:
    "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-red-400 dark:focus:ring-offset-gray-900",
  success:
    "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-green-400 dark:focus:ring-offset-gray-900",
} as const;

// ============================================================================
// TRANSITIONS
// ============================================================================

export const TRANSITIONS = {
  fast: "transition-all duration-150 ease-in-out",
  base: "transition-all duration-200 ease-in-out",
  slow: "transition-all duration-300 ease-in-out",
} as const;

// ============================================================================
// HELPERS - Funções Utilitárias
// ============================================================================

/**
 * Retorna classes de cores para o status da consulta
 * @param status - Status da consulta
 * @param variant - Variante de cor (bg, text, border, badge)
 */
export function getStatusColor(
  status: keyof typeof STATUS_COLORS,
  variant: "bg" | "text" | "border" | "ring" | "badge" = "badge"
): string {
  return STATUS_COLORS[status]?.[variant] || STATUS_COLORS.requested[variant];
}

/**
 * Retorna label amigável para status
 */
export function getStatusLabel(status: keyof typeof STATUS_COLORS): string {
  const labels: Record<keyof typeof STATUS_COLORS, string> = {
    requested: "Solicitada",
    confirmed: "Confirmada",
    completed: "Concluída",
    cancelled: "Cancelada",
    no_show: "Não Compareceu",
    checked_in: "Check-in",
    in_progress: "Em Andamento",
  };
  return labels[status] || status;
}

/**
 * Gera classes de card padrão
 */
export function getCardClasses(): string {
  return `bg-white dark:bg-gray-800 ${RADIUS.lg} ${SHADOWS.md} ${SPACING_CLASSES.md} border border-gray-200 dark:border-gray-700 ${TRANSITIONS.base}`;
}

/**
 * Gera classes de botão primário
 */
export function getPrimaryButtonClasses(): string {
  return `${THEME_COLORS.primary[600]} hover:${THEME_COLORS.primary[700]} text-white font-semibold py-2 px-4 ${RADIUS.md} ${FOCUS_RING.default} ${TRANSITIONS.base}`;
}

/**
 * Gera classes de input
 */
export function getInputClasses(): string {
  return `w-full px-3 py-2 ${RADIUS.md} border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${FOCUS_RING.default} ${TRANSITIONS.base}`;
}

// ============================================================================
// TYPE EXPORTS
// ============================================================================

export type StatusType = keyof typeof STATUS_COLORS;
export type ThemeColor = keyof typeof THEME_COLORS;
export type TypographySize = keyof typeof TYPOGRAPHY;
export type SpacingSize = keyof typeof SPACING;
export type RadiusSize = keyof typeof RADIUS;
export type ShadowSize = keyof typeof SHADOWS;
