import { STATUS_STYLES, avatarColor } from '../../../ui/tokens'

export function Panel({ title, subtitle, right, children, padded = true }) {
  return (
    <div className="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-[0_1px_0_rgba(15,23,42,0.04)]">
      {(title || right) && (
        <div className="flex items-center justify-between border-b border-slate-100 px-5 py-3">
          <div>
            {title && <div className="text-[13px] font-semibold text-slate-900">{title}</div>}
            {subtitle && <div className="text-[12px] text-slate-500">{subtitle}</div>}
          </div>
          {right}
        </div>
      )}
      <div className={padded ? 'p-5' : ''}>{children}</div>
    </div>
  )
}

export function DataTable({ children, className = '' }) {
  return (
    <div className={`overflow-auto ${className}`}>
      <table className="w-full border-separate border-spacing-0 text-[13px]">
        {children}
      </table>
    </div>
  )
}

export function THead({ children }) {
  return (
    <thead className="sticky top-0 z-10 bg-slate-50/95 backdrop-blur">
      <tr>{children}</tr>
    </thead>
  )
}

export function TH({ children, className = '', align = 'left' }) {
  return (
    <th className={`border-b border-slate-200 px-4 py-2.5 text-${align} text-[10px] font-semibold uppercase tracking-[0.08em] text-slate-500 ${className}`}>
      {children}
    </th>
  )
}

export function TR({ children, onClick, highlight, striped, className = '' }) {
  return (
    <tr
      onClick={onClick}
      className={`group ${striped ? 'odd:bg-white even:bg-slate-50/40' : 'bg-white'} ${
        onClick ? 'cursor-pointer' : ''
      } hover:bg-sky-50/40 transition-colors ${highlight ? 'bg-sky-50/30' : ''} ${className}`}
    >
      {children}
    </tr>
  )
}

export function TD({ children, className = '', mono, align = 'left', colSpan }) {
  return (
    <td
      colSpan={colSpan}
      className={`border-b border-slate-100 px-4 py-2.5 text-${align} text-slate-700 ${mono ? 'font-mono tabular-nums' : ''} ${className}`}
    >
      {children}
    </td>
  )
}

export function StatusBadge({ status, pulse }) {
  const s = STATUS_STYLES[status] || STATUS_STYLES.closed
  const label = status ? status.replace('_', ' ').replace('-', ' ') : 'unknown'
  return (
    <span className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-mono uppercase tracking-[0.08em] ring-1 ring-inset ${s.bg} ${s.text} ${s.ring}`}>
      <span className={`relative inline-block h-1.5 w-1.5 rounded-full ${s.dot}`}>
        {pulse && (status === 'active' || status === 'open') && (
          <span className={`absolute inset-0 rounded-full ${s.dot} animate-ping opacity-75`} />
        )}
      </span>
      {label}
    </span>
  )
}

export function WaiterAvatar({ name, id }) {
  const cls = avatarColor(id ?? name ?? '0')
  const initials = name
    ? name.split(' ').map(p => p[0]).slice(0, 2).join('').toUpperCase()
    : '?'
  return (
    <div className="flex items-center gap-2.5">
      <div className={`flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-semibold flex-shrink-0 ${cls}`}>
        {initials}
      </div>
      <span className="font-medium text-slate-900">{name || '—'}</span>
    </div>
  )
}

export function ChartTooltip({ active, payload, label, formatter, labelFormatter }) {
  if (!active || !payload?.length) return null
  return (
    <div className="rounded-md border border-slate-200 bg-white px-3 py-2 text-[12px] shadow-lg">
      {label != null && (
        <div className="mb-1 text-[11px] font-medium uppercase tracking-wider text-slate-500">
          {labelFormatter ? labelFormatter(label) : label}
        </div>
      )}
      {payload.map((p, i) => (
        <div key={i} className="flex items-center gap-2">
          <span className="h-2 w-2 rounded-sm flex-shrink-0" style={{ backgroundColor: p.color || p.fill }} />
          <span className="text-slate-600">{p.name}:</span>
          <span className="font-mono font-medium text-slate-900 tabular-nums">
            {formatter ? formatter(p.value, p.name) : p.value}
          </span>
        </div>
      ))}
    </div>
  )
}

export function ErrorState({ message, onRetry }) {
  return (
    <div className="flex min-h-[200px] flex-col items-center justify-center gap-3 px-6 py-10 text-center">
      <div className="text-[13px] text-slate-600">{message || 'Something went wrong'}</div>
      {onRetry && (
        <button
          onClick={onRetry}
          className="rounded-md border border-slate-200 bg-white px-3 py-1.5 text-[12px] font-medium text-slate-700 hover:bg-slate-50"
        >
          Retry
        </button>
      )}
    </div>
  )
}
