import React from 'react';
import { inject } from '../lib/inject';

const css = `
.nbl-status{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;border-radius:var(--radius-pill);padding:4px 10px;letter-spacing:var(--tracking-caps);text-transform:uppercase;}
.nbl-status__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.nbl-status--new{background:var(--status-new-bg);color:var(--status-new-fg);}
.nbl-status--progress{background:var(--status-progress-bg);color:var(--status-progress-fg);}
.nbl-status--waiting{background:var(--status-waiting-bg);color:var(--status-waiting-fg);}
.nbl-status--ready{background:var(--status-ready-bg);color:var(--status-ready-fg);}
.nbl-status--overdue{background:var(--status-overdue-bg);color:var(--status-overdue-fg);}
.nbl-status--closed{background:var(--status-closed-bg);color:var(--status-closed-fg);}
`;

inject('nbl-status-css', css);

export type WorkOrderStatus =
  | 'new'
  | 'draft'
  | 'progress'
  | 'in_progress'
  | 'waiting'
  | 'waiting_on_parts'
  | 'ready'
  | 'overdue'
  | 'closed'
  | 'paid';

type CanonicalStatus = 'new' | 'progress' | 'waiting' | 'ready' | 'overdue' | 'closed';

const LABEL_MAP: Record<CanonicalStatus, string> = {
  new: 'New',
  progress: 'In Progress',
  waiting: 'Waiting on Parts',
  ready: 'Ready',
  overdue: 'Overdue',
  closed: 'Closed',
};

function normalize(status: WorkOrderStatus): CanonicalStatus {
  switch (status) {
    case 'draft':
      return 'new';
    case 'in_progress':
      return 'progress';
    case 'waiting_on_parts':
      return 'waiting';
    case 'paid':
      return 'closed';
    default:
      return status as CanonicalStatus;
  }
}

export interface StatusPillProps {
  status: WorkOrderStatus;
  showDot?: boolean;
  className?: string;
}

export function StatusPill({ status, showDot = true, className = '' }: StatusPillProps) {
  inject('nbl-status-css', css);
  const canonical = normalize(status);
  const cls = ['nbl-status', `nbl-status--${canonical}`, className].filter(Boolean).join(' ');

  return (
    <span className={cls}>
      {showDot && <span className="nbl-status__dot" />}
      {LABEL_MAP[canonical]}
    </span>
  );
}