// Global design tokens — single source of truth for the manager dashboard UI
// Reports subsystem and all other pages import from here.

export const COLORS = {
  // Primary accent
  sky500: '#0ea5e9',
  sky400: '#38bdf8',
  sky600: '#0284c7',
  sky50:  '#f0f9ff',

  // Neutrals
  slate900: '#0f172a',
  slate800: '#1e293b',
  slate700: '#334155',
  slate600: '#475569',
  slate500: '#64748b',
  slate400: '#94a3b8',
  slate300: '#cbd5e1',
  slate200: '#e2e8f0',
  slate100: '#f1f5f9',
  slate50:  '#f8fafc',
  white:    '#ffffff',

  // Semantic
  emerald600: '#059669',
  emerald700: '#047857',
  emerald50:  '#ecfdf5',
  emerald200: '#a7f3d0',

  rose600: '#e11d48',
  rose700: '#be123c',
  rose50:  '#fff1f2',
  rose200: '#fecdd3',

  amber500: '#f59e0b',
  amber50:  '#fffbeb',
  amber200: '#fde68a',

  violet500: '#8b5cf6',
  teal500:   '#14b8a6',
}

export const CHART_PALETTE = [
  '#60a5fa',
  '#7fa67f',
  '#dc6a3d',
  '#c08aa8',
  '#6b8fb5',
  '#f59e0b',
  '#14b8a6',
  '#a78bfa',
]

export const STATUS_STYLES = {
  completed:      { bg: 'bg-emerald-50', text: 'text-emerald-700', ring: 'ring-emerald-200', dot: 'bg-emerald-500' },
  active:         { bg: 'bg-sky-50',     text: 'text-sky-700',     ring: 'ring-sky-200',     dot: 'bg-sky-500' },
  'force-closed': { bg: 'bg-amber-50',   text: 'text-amber-800',   ring: 'ring-amber-200',   dot: 'bg-amber-500' },
  closed:         { bg: 'bg-slate-100',  text: 'text-slate-600',   ring: 'ring-slate-200',   dot: 'bg-slate-400' },
  paid:           { bg: 'bg-emerald-50', text: 'text-emerald-700', ring: 'ring-emerald-200', dot: 'bg-emerald-500' },
  open:           { bg: 'bg-sky-50',     text: 'text-sky-700',     ring: 'ring-sky-200',     dot: 'bg-sky-500' },
  partially_paid: { bg: 'bg-amber-50',   text: 'text-amber-800',   ring: 'ring-amber-200',   dot: 'bg-amber-500' },
  cancelled:      { bg: 'bg-rose-50',    text: 'text-rose-700',    ring: 'ring-rose-200',    dot: 'bg-rose-500' },
  closed_item:    { bg: 'bg-amber-50',   text: 'text-amber-800',   ring: 'ring-amber-200',   dot: 'bg-amber-500' },
  failed:         { bg: 'bg-rose-50',    text: 'text-rose-700',    ring: 'ring-rose-200',    dot: 'bg-rose-500' },
  success:        { bg: 'bg-emerald-50', text: 'text-emerald-700', ring: 'ring-emerald-200', dot: 'bg-emerald-500' },
  free:           { bg: 'bg-slate-100',  text: 'text-slate-600',   ring: 'ring-slate-200',   dot: 'bg-slate-400' },
}

export const AVATAR_PALETTE = [
  'bg-sky-100 text-sky-700',
  'bg-emerald-100 text-emerald-700',
  'bg-amber-100 text-amber-800',
  'bg-violet-100 text-violet-700',
  'bg-rose-100 text-rose-700',
  'bg-teal-100 text-teal-700',
]

export function avatarColor(id) {
  const key = String(id)
  let h = 0
  for (let i = 0; i < key.length; i++) h = (h * 31 + key.charCodeAt(i)) >>> 0
  return AVATAR_PALETTE[h % AVATAR_PALETTE.length]
}

// Formatters
export const fmtEUR = (n) => {
  if (n == null) return '—'
  return '€' + Number(n).toLocaleString('en-EU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}
export const fmtNum = (n) => (n == null ? '—' : Number(n).toLocaleString('en-EU'))
export const fmtTime = (iso) => {
  if (!iso) return '—'
  return new Date(iso).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
}
export const fmtDate = (iso) => {
  if (!iso) return '—'
  const d = new Date(iso)
  if (isNaN(d)) return String(iso)
  return d.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' })
}

// Format a raw YYYY-MM-DD string (from a date picker) as DD/MM/YYYY without any timezone conversion
export const fmtDateStr = (yyyymmdd) => {
  if (!yyyymmdd) return '—'
  const [y, m, d] = String(yyyymmdd).split('-')
  if (!y || !m || !d) return yyyymmdd
  return `${d}/${m}/${y}`
}
export const fmtDateTime = (iso) => {
  if (!iso) return '—'
  return fmtDate(iso) + ' · ' + fmtTime(iso)
}
export const fmtDuration = (startIso, endIso) => {
  if (!startIso) return '—'
  const start = new Date(startIso)
  const end = endIso ? new Date(endIso) : new Date()
  const minutes = Math.floor((end - start) / 60000)
  if (minutes < 0) return '—'
  const h = Math.floor(minutes / 60)
  const m = minutes % 60
  return `${h}h ${String(m).padStart(2, '0')}m`
}
export const fmtMinutes = (mins) => {
  if (mins == null) return '—'
  const h = Math.floor(mins / 60)
  const m = Math.round(mins % 60)
  return h > 0 ? `${h}h ${String(m).padStart(2, '0')}m` : `${m}m`
}

// Common Tailwind class strings
export const PANEL_CLASS = 'overflow-hidden rounded-lg border border-slate-200 bg-white shadow-[0_1px_0_rgba(15,23,42,0.04)]'
export const STAT_CARD_CLASS = 'relative overflow-hidden rounded-lg border border-slate-200 bg-white p-5 shadow-[0_1px_0_rgba(15,23,42,0.04)]'
export const INPUT_CLASS = 'flex items-center gap-2 rounded-md border border-slate-200 bg-white px-2.5 py-1.5 text-[13px] text-slate-700 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition hover:border-slate-300 focus-within:border-sky-400 focus-within:ring-2 focus-within:ring-sky-100'

// Button variant class strings
export const BUTTON_VARIANTS = {
  primary:   'inline-flex items-center justify-center gap-2 rounded-md bg-sky-500 px-3.5 py-2 text-[13px] font-medium text-white shadow-[0_1px_0_rgba(15,23,42,0.08)] transition hover:bg-sky-600 active:bg-sky-700 disabled:opacity-50 disabled:pointer-events-none',
  secondary: 'inline-flex items-center justify-center gap-2 rounded-md border border-slate-200 bg-white px-3.5 py-2 text-[13px] font-medium text-slate-700 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition hover:bg-slate-50 hover:border-slate-300 active:bg-slate-100 disabled:opacity-50 disabled:pointer-events-none',
  ghost:     'inline-flex items-center justify-center gap-2 rounded-md px-3.5 py-2 text-[13px] font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 active:bg-slate-200 disabled:opacity-50 disabled:pointer-events-none',
  danger:    'inline-flex items-center justify-center gap-2 rounded-md bg-rose-500 px-3.5 py-2 text-[13px] font-medium text-white shadow-[0_1px_0_rgba(15,23,42,0.08)] transition hover:bg-rose-600 active:bg-rose-700 disabled:opacity-50 disabled:pointer-events-none',
}

export const BUTTON_SIZES = {
  sm: 'px-2.5 py-1.5 text-[12px]',
  md: 'px-3.5 py-2 text-[13px]',
}

// Modal overlay
export const MODAL_OVERLAY_CLASS = 'fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4'

// Sidebar nav item
export const NAV_ITEM_BASE = 'flex items-center gap-3 rounded-md px-3 py-2 text-[13px] font-medium transition'
export const NAV_ITEM_ACTIVE = 'bg-sky-50 text-sky-700'
export const NAV_ITEM_INACTIVE = 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
