'use client';

import { HeartPulse, Syringe, Users as UsersIcon } from 'lucide-react';
import type { PatientEmrRecord } from '@/lib/api-types';

interface EmrHighlightsProps {
  record: PatientEmrRecord;
}

/**
 * Compact list of secondary EMR signals that complement the dedicated
 * Allergy / Medications strips above. We intentionally keep this shallow —
 * the doctor can drill into the full EMR via the patient detail page.
 */
export function EmrHighlights({ record }: EmrHighlightsProps) {
  const hasConditions = record.conditions.length > 0;
  const hasImms = record.immunizations.length > 0;
  const hasFam = record.familyHistory.length > 0;

  if (!hasConditions && !hasImms && !hasFam) return null;

  return (
    <div className="space-y-2">
      {hasConditions ? (
        <Block icon={<HeartPulse className="h-3.5 w-3.5 text-brand-500" />} label="Conditions">
          <ul className="space-y-1 text-xs text-ink-1">
            {record.conditions.slice(0, 6).map((c) => (
              <li key={c.id} className="flex flex-wrap items-baseline gap-x-1.5">
                <span className="font-semibold">{c.conditionName}</span>
                {c.icdCode ? (
                  <span className="font-mono text-[10px] text-ink-3">
                    ({c.icdCode})
                  </span>
                ) : null}
                <span className="rounded bg-brand-50 px-1.5 py-0 text-[10px] font-semibold uppercase text-brand-700">
                  {c.status}
                </span>
              </li>
            ))}
            {record.conditions.length > 6 ? (
              <li className="text-[11px] italic text-ink-3">
                +{record.conditions.length - 6} more
              </li>
            ) : null}
          </ul>
        </Block>
      ) : null}

      {hasImms ? (
        <Block
          icon={<Syringe className="h-3.5 w-3.5 text-brand-500" />}
          label="Immunizations"
        >
          <ul className="flex flex-wrap gap-1">
            {record.immunizations.slice(0, 8).map((i) => (
              <li
                key={i.id}
                className="rounded border border-denseSurface-border bg-white px-1.5 py-0.5 text-[11px] text-ink-1"
              >
                {i.vaccineName}
                {i.doseNumber ? (
                  <span className="ml-1 font-mono text-[10px] text-ink-3">
                    #{i.doseNumber}
                  </span>
                ) : null}
              </li>
            ))}
          </ul>
        </Block>
      ) : null}

      {hasFam ? (
        <Block
          icon={<UsersIcon className="h-3.5 w-3.5 text-brand-500" />}
          label="Family history"
        >
          <ul className="space-y-0.5 text-xs text-ink-1">
            {record.familyHistory.slice(0, 5).map((f) => (
              <li key={f.id}>
                <span className="font-semibold capitalize">
                  {f.relation.replace(/_/g, ' ')}
                </span>
                : {f.conditionName}
                {f.ageAtDiagnosis ? (
                  <span className="text-[11px] text-ink-3">
                    {' '}
                    (dx age {f.ageAtDiagnosis})
                  </span>
                ) : null}
              </li>
            ))}
          </ul>
        </Block>
      ) : null}
    </div>
  );
}

function Block({
  icon,
  label,
  children,
}: {
  icon: React.ReactNode;
  label: string;
  children: React.ReactNode;
}) {
  return (
    <div className="rounded-md border border-denseSurface-border bg-white p-2.5">
      <p className="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-ink-2">
        {icon}
        {label}
      </p>
      {children}
    </div>
  );
}