'use client';

import { useTranslations } from 'next-intl';
import { MessageSquare } from 'lucide-react';
import { Badge } from '@/components/ui/shared/Badge';
import { LabCaseDueDateBadge } from '@/components/lab/LabCaseDueDateBadge';
import { LabCaseOriginBadge } from '@/components/ui/lab/LabCaseOriginBadge';
import type { CaseTaskGroup } from '@/components/lab/taskListGrouping';
import { countCaseTaskProgress } from '@/components/lab/taskListGrouping';
import { formatAppDate, APP_DATE } from '@/lib/i18n/format';

function formatPatientName(patient: { firstName: string; lastName: string }) {
  return `${patient.firstName} ${patient.lastName}`.trim();
}

interface TaskCaseGroupHeaderProps {
  caseGroup: CaseTaskGroup;
  locale: string;
  showCommentsButton?: boolean;
  commentsOpen?: boolean;
  onToggleComments?: () => void;
}

export function TaskCaseGroupHeader({
  caseGroup,
  locale,
  showCommentsButton = false,
  commentsOpen = false,
  onToggleComments,
}: TaskCaseGroupHeaderProps) {
  const t = useTranslations('tasks');
  const progress = countCaseTaskProgress(caseGroup);

  const sentLabel = caseGroup.caseSentAt
    ? formatAppDate(caseGroup.caseSentAt, locale, APP_DATE.short)
    : null;

  return (
    <div className="sticky top-0 z-10 flex flex-wrap items-center justify-between gap-2 border-b border-border/80 bg-background-secondary/95 px-3 py-2.5 backdrop-blur-sm supports-[backdrop-filter]:bg-background-secondary/80">
      <div className="min-w-0 space-y-0.5 flex-1">
        <div className="flex flex-wrap items-center gap-1.5">
          <p className="text-sm font-semibold text-text-primary truncate">
            {t('fromClinic', { name: caseGroup.clinic.name })} ·{' '}
            {formatPatientName(caseGroup.patient)}
          </p>
          <LabCaseDueDateBadge
            dueDate={caseGroup.caseDueDate}
            locale={locale}
            className="text-[10px]"
          />
          {caseGroup.isImportant ? (
            <Badge variant="warning" fixedWidth={false} className="text-[10px]">
              {t('importantBadge')}
            </Badge>
          ) : null}
          <LabCaseOriginBadge origin={caseGroup.origin} className="text-[10px]" />
        </div>
        {sentLabel ? (
          <p className="text-[11px] text-text-muted">
            {t('caseReceivedAt', { date: sentLabel })}
          </p>
        ) : null}
      </div>
      <div className="flex items-center gap-2 shrink-0">
        {showCommentsButton && onToggleComments ? (
          <button
            type="button"
            onClick={onToggleComments}
            className={`inline-flex h-9 w-9 items-center justify-center rounded-md border ${
              commentsOpen
                ? 'border-primary bg-primary/10 text-primary'
                : 'border-border text-text-muted hover:border-primary/40'
            }`}
            title={t('commentsButton')}
            aria-label={t('commentsButton')}
          >
            <MessageSquare className="h-4 w-4" />
          </button>
        ) : null}
        <p className="text-xs text-text-muted tabular-nums">
          {t('caseTaskProgress', { completed: progress.completed, total: progress.total })}
        </p>
      </div>
    </div>
  );
}
