/**
 * PROPOSITION D'HARMONIE DE COULEURS
 * ===================================
 *
 * Recommandations pour un système de couleurs unifié et moderne
 * Inspiré de Google Keep avec une approche contemporaine
 *
 */

// =============================================================================
// 1. PALETTE PRINCIPALE DU THÈME (OKLCH)
// =============================================================================

/**
 * Proposition de palette principale avec meilleure cohérence
 * Utilise OKLCH pour une meilleure accessibilité et cohérence perceptive
 */
export const RECOMMENDED_THEME_COLORS = {
  /* ============ THEME LIGHT ============ */
  light: {
    // Backgrounds
    background: 'oklch(0.99 0.002 250)',      // Blanc très légèrement bleuté
    card: 'oklch(1 0 0)',                      // Blanc pur
    sidebar: 'oklch(0.96 0.005 250)',         // Gris-bleu très pâle
    input: 'oklch(0.97 0.003 250)',          // Gris-bleu pâle

    // Textes
    foreground: 'oklch(0.18 0.01 250)',      // Gris-bleu foncé (meilleur contraste)
    'foreground-secondary': 'oklch(0.45 0.01 250)', // Gris moyen
    'foreground-muted': 'oklch(0.6 0.005 250)',    // Gris clair

    // Primary Actions
    primary: 'oklch(0.55 0.2 250)',          // Bleu Keep (plus vibrant)
    'primary-hover': 'oklch(0.5 0.22 250)',   // Bleu Keep foncé
    'primary-foreground': 'oklch(0.99 0 0)',  // Blanc pur

    // Accents
    accent: 'oklch(0.92 0.015 250)',         // Bleu très pâle
    'accent-foreground': 'oklch(0.18 0.01 250)',

    // Borders
    border: 'oklch(0.88 0.01 250)',          // Gris-bleu très clair
    'border-hover': 'oklch(0.8 0.015 250)',

    // Functional
    success: 'oklch(0.65 0.15 145)',        // Vert
    warning: 'oklch(0.75 0.12 70)',         // Jaune/orange
    destructive: 'oklch(0.6 0.2 25)',        // Rouge
  },

  /* ============ THEME DARK ============ */
  dark: {
    // Backgrounds
    background: 'oklch(0.12 0.01 250)',      // Noir légèrement bleuté
    card: 'oklch(0.16 0.01 250)',          // Gris-bleu foncé
    sidebar: 'oklch(0.1 0.01 250)',         // Noir bleuté
    input: 'oklch(0.18 0.01 250)',

    // Textes
    foreground: 'oklch(0.96 0.002 250)',    // Blanc légèrement bleuté
    'foreground-secondary': 'oklch(0.75 0.005 250)',
    'foreground-muted': 'oklch(0.55 0.01 250)',

    // Primary Actions
    primary: 'oklch(0.65 0.2 250)',          // Bleu plus clair
    'primary-hover': 'oklch(0.7 0.2 250)',
    'primary-foreground': 'oklch(0.1 0 0)',

    // Accents
    accent: 'oklch(0.22 0.01 250)',
    'accent-foreground': 'oklch(0.96 0.002 250)',

    // Borders
    border: 'oklch(0.25 0.015 250)',
    'border-hover': 'oklch(0.35 0.015 250)',

    // Functional
    success: 'oklch(0.7 0.15 145)',
    warning: 'oklch(0.8 0.12 70)',
    destructive: 'oklch(0.65 0.2 25)',
  },
} as const;

// =============================================================================
// 2. PALETTE DES COULEURS DE NOTES (UNIFIÉE)
// =============================================================================

/**
 * Nouvelle palette de couleurs pour les notes
 * Harmonisée avec le thème principal
 * Meilleure accessibilité WCAG AA (contraste minimum 4.5:1)
 */
export const RECOMMENDED_NOTE_COLORS = {
  default: {
    // Light theme
    bg: 'bg-white',
    'bg-dark': 'dark:bg-neutral-900',
    border: 'border-neutral-200',
    'border-dark': 'dark:border-neutral-800',
    hover: 'hover:bg-neutral-50',
    'hover-dark': 'dark:hover:bg-neutral-800',
    // Pour texte sombre
    text: 'text-neutral-900',
    'text-dark': 'dark:text-neutral-100',
  },
  red: {
    bg: 'bg-red-50',
    'bg-dark': 'dark:bg-red-950/40',
    border: 'border-red-100',
    'border-dark': 'dark:border-red-900/50',
    hover: 'hover:bg-red-100',
    'hover-dark': 'dark:hover:bg-red-950/60',
    text: 'text-red-950',
    'text-dark': 'dark:text-red-100',
  },
  orange: {
    bg: 'bg-orange-50',
    'bg-dark': 'dark:bg-orange-950/40',
    border: 'border-orange-100',
    'border-dark': 'dark:border-orange-900/50',
    hover: 'hover:bg-orange-100',
    'hover-dark': 'dark:hover:bg-orange-950/60',
    text: 'text-orange-950',
    'text-dark': 'dark:text-orange-100',
  },
  yellow: {
    bg: 'bg-yellow-50',
    'bg-dark': 'dark:bg-yellow-950/40',
    border: 'border-yellow-100',
    'border-dark': 'dark:border-yellow-900/50',
    hover: 'hover:bg-yellow-100',
    'hover-dark': 'dark:hover:bg-yellow-950/60',
    text: 'text-yellow-950',
    'text-dark': 'dark:text-yellow-100',
  },
  green: {
    bg: 'bg-emerald-50',
    'bg-dark': 'dark:bg-emerald-950/40',
    border: 'border-emerald-100',
    'border-dark': 'dark:border-emerald-900/50',
    hover: 'hover:bg-emerald-100',
    'hover-dark': 'dark:hover:bg-emerald-950/60',
    text: 'text-emerald-950',
    'text-dark': 'dark:text-emerald-100',
  },
  teal: {
    bg: 'bg-teal-50',
    'bg-dark': 'dark:bg-teal-950/40',
    border: 'border-teal-100',
    'border-dark': 'dark:border-teal-900/50',
    hover: 'hover:bg-teal-100',
    'hover-dark': 'dark:hover:bg-teal-950/60',
    text: 'text-teal-950',
    'text-dark': 'dark:text-teal-100',
  },
  blue: {
    bg: 'bg-blue-50',
    'bg-dark': 'dark:bg-blue-950/40',
    border: 'border-blue-100',
    'border-dark': 'dark:border-blue-900/50',
    hover: 'hover:bg-blue-100',
    'hover-dark': 'dark:hover:bg-blue-950/60',
    text: 'text-blue-950',
    'text-dark': 'dark:text-blue-100',
  },
  indigo: {
    bg: 'bg-indigo-50',
    'bg-dark': 'dark:bg-indigo-950/40',
    border: 'border-indigo-100',
    'border-dark': 'dark:border-indigo-900/50',
    hover: 'hover:bg-indigo-100',
    'hover-dark': 'dark:hover:bg-indigo-950/60',
    text: 'text-indigo-950',
    'text-dark': 'dark:text-indigo-100',
  },
  violet: {
    bg: 'bg-violet-50',
    'bg-dark': 'dark:bg-violet-950/40',
    border: 'border-violet-100',
    'border-dark': 'dark:border-violet-900/50',
    hover: 'hover:bg-violet-100',
    'hover-dark': 'dark:hover:bg-violet-950/60',
    text: 'text-violet-950',
    'text-dark': 'dark:text-violet-100',
  },
  purple: {
    bg: 'bg-purple-50',
    'bg-dark': 'dark:bg-purple-950/40',
    border: 'border-purple-100',
    'border-dark': 'dark:border-purple-900/50',
    hover: 'hover:bg-purple-100',
    'hover-dark': 'dark:hover:bg-purple-950/60',
    text: 'text-purple-950',
    'text-dark': 'dark:text-purple-100',
  },
  pink: {
    bg: 'bg-pink-50',
    'bg-dark': 'dark:bg-pink-950/40',
    border: 'border-pink-100',
    'border-dark': 'dark:border-pink-900/50',
    hover: 'hover:bg-pink-100',
    'hover-dark': 'dark:hover:bg-pink-950/60',
    text: 'text-pink-950',
    'text-dark': 'dark:text-pink-100',
  },
  rose: {
    bg: 'bg-rose-50',
    'bg-dark': 'dark:bg-rose-950/40',
    border: 'border-rose-100',
    'border-dark': 'dark:border-rose-900/50',
    hover: 'hover:bg-rose-100',
    'hover-dark': 'dark:hover:bg-rose-950/60',
    text: 'text-rose-950',
    'text-dark': 'dark:text-rose-100',
  },
  gray: {
    bg: 'bg-neutral-100',
    'bg-dark': 'dark:bg-neutral-800',
    border: 'border-neutral-200',
    'border-dark': 'dark:border-neutral-700',
    hover: 'hover:bg-neutral-200',
    'hover-dark': 'dark:hover:bg-neutral-700',
    text: 'text-neutral-900',
    'text-dark': 'dark:text-neutral-100',
  },
} as const;

// =============================================================================
// 3. RÈGLES DE DESIGN
// =============================================================================

/**
 * Principes de design couleur :
 *
 * 1. HARMONIE : Toutes les couleurs partagent la même teinte de base (bleu 250°)
 *    - Crée une cohérence visuelle
 *    - Réduit la fatigue visuelle
 *    - Améliore la perception de marque
 *
 * 2. CONTRASTE : Respecte WCAG AA (4.5:1 minimum)
 *    - Texte sur fond : toujours ≥ 4.5:1
 *    - Éléments interactifs : ≥ 3:1
 *    - Utilise OKLCH pour une mesure plus précise
 *
 * 3. ACCESSIBILITÉ :
 *    - Ne pas utiliser la couleur seule pour véhiculer l'information
 *    - Inclure des icônes ou des symboles
 *    - Supporter le mode de contraste élevé
 *
 * 4. ADAPTABILITÉ :
 *    - Mode light/dark automatique
 *    - Variations de couleur par note
 *    - Thèmes alternatifs (midnight, blue, sepia)
 *
 * 5. PERFORMANCE PERCEPTIVE :
 *    - OKLCH pour une échelle perceptuelle uniforme
 *    - Même légèreté perçue entre light et dark
 *    - Transition fluide entre thèmes
 */

// =============================================================================
// 4. EXEMPLE D'IMPLEMENTATION
// =============================================================================

/**
 * Comment utiliser ces couleurs dans les composants :
 *
 * ```tsx
 * import { RECOMMENDED_NOTE_COLORS } from '@/lib/color-harmony-recommendation'
 *
 * // Pour une carte de note
 * <div className={`
 *   ${noteColors.bg}
 *   dark:${noteColors['bg-dark']}
 *   ${noteColors.border}
 *   dark:${noteColors['border-dark']}
 *   ${noteColors.text}
 *   dark:${noteColors['text-dark']}
 *   hover:${noteColors.hover}
 *   dark:hover:${noteColors['hover-dark']}
 * `}>
 *   {note.content}
 * </div>
 *
 * // Pour le thème global (globals.css)
 * :root {
 *   --background: oklch(0.99 0.002 250);
 *   --foreground: oklch(0.18 0.01 250);
 *   --primary: oklch(0.55 0.2 250);
 *   // ... autres couleurs
 * }
 * ```
 */

// =============================================================================
// 5. AVANTAGES DE CETTE APPROCHE
// =============================================================================

/**
 * ✅ Cohérence visuelle accrue
 * ✅ Meilleure accessibilité (WCAG AA+)
 * ✅ Adaptation native aux modes light/dark
 * ✅ Palette extensible (facile à ajouter de nouvelles couleurs)
 * ✅ Performance OKLCH (perception humaine)
 * ✅ Compatible avec Tailwind CSS
 * ✅ Maintenance simplifiée
 * ✅ Professionalisme et modernité
 */

export type RecommendedNoteColor = keyof typeof RECOMMENDED_NOTE_COLORS;