triqura-ecd/app/epd/patients/[id]/components/client-header.tsx

'use client';

/**
 * Client Header Component
 * E2.S3: Context-aware header showing client name, status, last modified en acties
 */

import { Mic } from 'lucide-react';
import { useRouter, usePathname } from 'next/navigation';
import type { FHIRPatient } from '@/lib/fhir';
import { Button } from '@/components/ui/button';

interface ClientHeaderProps {
  patient: FHIRPatient;
  focusElementId?: string;
}

// Status badge component
function StatusBadge({ status }: { status?: string }) {
  const badges = {
    planned: { label: 'Screening', className: 'bg-amber-100 text-amber-800 border-amber-200' },
    active: { label: 'Actief', className: 'bg-emerald-100 text-emerald-800 border-emerald-200' },
    finished: { label: 'Afgerond', className: 'bg-slate-100 text-slate-800 border-slate-200' },
    cancelled: { label: 'Afgemeld', className: 'bg-red-100 text-red-800 border-red-200' },
  };

  const badge = status && status in badges ? badges[status as keyof typeof badges] : null;

  if (!badge) {
    return <span className="text-sm text-slate-400">-</span>;
  }

  return (
    <span
      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${badge.className}`}
    >
      {badge.label}
    </span>
  );
}

export function ClientHeader({ patient, focusElementId = 'rapportage-composer' }: ClientHeaderProps) {
  const router = useRouter();
  const pathname = usePathname();

  const handleNewReportClick = (patientId?: string) => {
    if (!patientId) return;
    const rapportagePath = `/epd/patients/${patientId}/rapportage`;
    const onRapportagePage = pathname?.startsWith(rapportagePath);

    if (onRapportagePage) {
      handleScrollToComposer(focusElementId);
      return;
    }

    const hash = focusElementId ? `#${focusElementId}` : '';
    router.push(`${rapportagePath}${hash}`);
  };
  // Extract name
  const name = patient.name?.[0];
  const fullName = [
    ...(name?.prefix || []),
    ...(name?.given || []),
    name?.family,
  ]
    .filter(Boolean)
    .join(' ');

  // Extract status from extension
  const statusExtension = (patient as any).extension?.find(
    (ext: any) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/episode-status'
  );
  const status = statusExtension?.valueCode;

  // Extract last modified
  const lastModified = patient.meta?.lastUpdated
    ? new Date(patient.meta.lastUpdated).toLocaleString('nl-NL', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
      })
    : null;

  // Check if John Doe
  const isJohnDoe = (patient as any).extension?.find(
    (ext: any) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/john-doe'
  )?.valueBoolean;

  return (
    <div className="bg-white border-b border-slate-200 px-6 py-4">
      <div className="flex items-start justify-between">
        <div className="flex-1">
          {/* Name and John Doe indicator */}
          <div className="flex items-center gap-3 mb-2">
            <h1 className="text-2xl font-bold text-slate-900">{fullName}</h1>
            {isJohnDoe && (
              <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-orange-100 text-orange-800 border border-orange-200">
                John Doe
              </span>
            )}
          </div>

          {/* Status and Last Modified */}
          <div className="flex items-center gap-4 text-sm">
            <div className="flex items-center gap-2">
              <span className="text-slate-500">Status:</span>
              <StatusBadge status={status} />
            </div>
            {lastModified && (
              <div className="flex items-center gap-2 text-slate-500">
                <span>Laatst gewijzigd:</span>
                <span className="font-medium text-slate-700">{lastModified}</span>
              </div>
            )}
          </div>
        </div>

        <div className="flex items-center gap-3">
          <div className="text-xs text-slate-400">
            ID: {patient.id}
          </div>
          <Button type="button" size="sm" onClick={() => handleNewReportClick(patient.id)}>
            <Mic className="mr-2 h-4 w-4" /> Nieuwe rapportage
          </Button>
        </div>
      </div>
    </div>
  );
}

function handleScrollToComposer(targetId?: string) {
  if (!targetId) return;
  const element = document.getElementById(targetId);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    (element as HTMLElement).focus?.();
  }
}