'use client';

import { AlertTriangle, ShieldCheck } from 'lucide-react';
import type { PatientEmrAllergy } from '@/lib/api-types';

interface AllergyStripProps {
  allergies: PatientEmrAllergy[];
}

const SEVERITY_STYLE: Record<PatientEmrAllergy['severity'], string> = {
  mild: 'bg-warning-500/10 text-warning-500 border-warning-500/30',
  moderate: 'bg-coral-500/10 text-coral-700 border-coral-300/40',
  severe: 'bg-danger-500/10 text-danger-500 border-danger-500/40',
};

const SEVERITY_ORDER: Record<PatientEmrAllergy['severity'], number> = {
  severe: 0,
  moderate: 1,
  mild: 2,
};

/**
 * High-contrast band of allergy pills surfaced at the very top of the EMR
 * pane. Severe allergies push the strip to a red callout so they cannot be
 * missed during a live consult.
 */
export function AllergyStrip({ allergies }: AllergyStripProps) {
  if (allergies.length === 0) {
    return (
      <div className="flex items-center gap-2 rounded-md border border-success-500/20 bg-success-500/5 px-3 py-2 text-xs text-success-500">
        <ShieldCheck className="h-4 w-4 flex-shrink-0" />
        <span className="font-semibold">No known allergies on file</span>
      </div>
    );
  }

  const hasSevere = allergies.some((a) => a.severity === 'severe');
  const sorted = [...allergies].sort(
    (a, b) => SEVERITY_ORDER[a.severity] - SEVERITY_ORDER[b.severity],
  );

  return (
    <div
      className={[
        'rounded-md border p-3',
        hasSevere
          ? 'border-danger-500/40 bg-danger-500/5'
          : 'border-warning-500/30 bg-warning-500/5',
      ].join(' ')}
    >
      <div
        className={[
          'mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide',
          hasSevere ? 'text-danger-500' : 'text-warning-500',
        ].join(' ')}
      >
        <AlertTriangle className="h-3.5 w-3.5" />
        Allergies
        <span className="text-ink-3">({allergies.length})</span>
      </div>
      <ul className="flex flex-wrap gap-1.5">
        {sorted.map((a) => (
          <li
            key={a.id}
            className={[
              'inline-flex items-center gap-1.5 rounded border px-2 py-1 text-xs font-semibold',
              SEVERITY_STYLE[a.severity],
            ].join(' ')}
            title={a.reaction ?? undefined}
          >
            <span className="rounded-sm bg-white/60 px-1 py-0 text-[9px] font-bold uppercase tracking-wide">
              {a.severity}
            </span>
            <span>{a.allergen}</span>
            {a.reaction ? (
              <span className="text-[10px] font-normal opacity-80">
                — {a.reaction}
              </span>
            ) : null}
          </li>
        ))}
      </ul>
    </div>
  );
}