'use client';

import { MapPin, Phone, Droplet, Activity, Scale, Ruler } from 'lucide-react';
import { Avatar, DenseCard } from '@sehat/ui';
import type { PatientEmrRecord } from '@/lib/api-types';
import { computeBmi } from '@/lib/date-utils';

interface PatientSummaryCardProps {
  record: PatientEmrRecord;
  /** Fallback display name when EMR demographics are missing. */
  fallbackName?: string | null;
  /** Visible reason captured at booking time. */
  symptoms?: string | null;
}

/**
 * Compact patient identity + vital-signs strip shown above the EMR detail
 * sections. Designed so the doctor can see name, age/sex, BMI and BP without
 * scrolling once a call goes live.
 */
export function PatientSummaryCard({
  record,
  fallbackName,
  symptoms,
}: PatientSummaryCardProps) {
  const dems = record.demographics;
  const ls = record.lifestyle;

  const fullName = dems
    ? `${dems.firstName} ${dems.lastName}`.trim()
    : fallbackName || 'Unknown patient';

  const bmi =
    ls?.heightCm && ls?.weightKg
      ? computeBmi(parseFloat(ls.heightCm), parseFloat(ls.weightKg))
      : null;
  const bp =
    ls?.bloodPressureSystolic && ls?.bloodPressureDiastolic
      ? `${ls.bloodPressureSystolic}/${ls.bloodPressureDiastolic}`
      : null;

  const tiles: Array<{ label: string; value: string; icon: React.ReactNode }> = [];
  if (bp) {
    tiles.push({
      label: 'BP',
      value: bp,
      icon: <Activity className="h-3.5 w-3.5" />,
    });
  }
  if (bmi != null) {
    tiles.push({
      label: 'BMI',
      value: bmi.toFixed(1),
      icon: <Scale className="h-3.5 w-3.5" />,
    });
  }
  if (ls?.heightCm) {
    tiles.push({
      label: 'Ht',
      value: `${ls.heightCm} cm`,
      icon: <Ruler className="h-3.5 w-3.5" />,
    });
  }
  if (dems?.bloodGroup) {
    tiles.push({
      label: 'Blood',
      value: dems.bloodGroup,
      icon: <Droplet className="h-3.5 w-3.5" />,
    });
  }

  return (
    <DenseCard padding="md">
      <div className="flex items-start gap-3">
        <Avatar name={fullName} size="lg" tone="brand" />
        <div className="min-w-0 flex-1">
          <p className="truncate font-display text-base font-bold text-ink-1">
            {fullName}
          </p>
          <p className="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-ink-2">
            {dems?.city ? (
              <span className="inline-flex items-center gap-1">
                <MapPin className="h-3 w-3 text-ink-3" />
                {dems.city}
                {dems.country ? `, ${dems.country}` : ''}
              </span>
            ) : null}
            {dems?.phone ? (
              <span className="inline-flex items-center gap-1">
                <Phone className="h-3 w-3 text-ink-3" />
                <span className="font-mono">{dems.phone}</span>
              </span>
            ) : null}
          </p>
        </div>
      </div>

      {tiles.length > 0 ? (
        <div className="mt-3 grid grid-cols-2 gap-1.5 sm:grid-cols-4">
          {tiles.map((t) => (
            <div
              key={t.label}
              className="rounded-md border border-denseSurface-border bg-denseSurface-bg px-2 py-1.5"
            >
              <p className="flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wide text-ink-3">
                {t.icon}
                {t.label}
              </p>
              <p className="mt-0.5 font-mono text-sm font-bold text-ink-1">
                {t.value}
              </p>
            </div>
          ))}
        </div>
      ) : null}

      {symptoms ? (
        <div className="mt-3 rounded-md border border-denseSurface-border bg-denseSurface-bg px-3 py-2">
          <p className="text-[10px] font-semibold uppercase tracking-wide text-ink-3">
            Reason for visit
          </p>
          <p className="mt-0.5 text-sm leading-relaxed text-ink-1">{symptoms}</p>
        </div>
      ) : null}
    </DenseCard>
  );
}