'use client';

import { useEffect, useRef } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
import {
  purposeBannerStyle,
  purposeLabel,
} from '@/components/appointments/appointmentPurposeStyles';
import type { AppointmentRecord } from '@/types/appointment';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
import { formatAppTimeRange } from '@/lib/i18n/format';

type AppointmentOverlapPopoverProps = {
  appointments: AppointmentRecord[];
  treatmentCatalog: TreatmentCatalogEntry[];
  anchorRect: DOMRect;
  onSelect: (appointment: AppointmentRecord) => void;
  onClose: () => void;
};

function formatTimeRange(apt: AppointmentRecord, locale: string): string {
  return formatAppTimeRange(apt.startAt, apt.endAt, locale);
}

export function AppointmentOverlapPopover({
  appointments,
  treatmentCatalog,
  anchorRect,
  onSelect,
  onClose,
}: AppointmentOverlapPopoverProps) {
  const locale = useLocale();
  const t = useTranslations('appointments');
  const panelRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function onPointerDown(event: MouseEvent) {
      if (!panelRef.current?.contains(event.target as Node)) {
        onClose();
      }
    }
    function onKeyDown(event: KeyboardEvent) {
      if (event.key === 'Escape') {
        onClose();
      }
    }
    document.addEventListener('mousedown', onPointerDown);
    document.addEventListener('keydown', onKeyDown);
    return () => {
      document.removeEventListener('mousedown', onPointerDown);
      document.removeEventListener('keydown', onKeyDown);
    };
  }, [onClose]);

  const sorted = [...appointments].sort(
    (a, b) => new Date(a.startAt).getTime() - new Date(b.startAt).getTime(),
  );

  const viewportPadding = 12;
  const panelWidth = Math.min(320, window.innerWidth - viewportPadding * 2);
  let top = anchorRect.bottom + 8;
  let left = anchorRect.left + anchorRect.width / 2 - panelWidth / 2;
  left = Math.max(viewportPadding, Math.min(left, window.innerWidth - panelWidth - viewportPadding));
  const estimatedHeight = 56 + sorted.length * 52;
  if (top + estimatedHeight > window.innerHeight - viewportPadding) {
    top = Math.max(viewportPadding, anchorRect.top - estimatedHeight - 8);
  }

  return (
    <div className="fixed inset-0 z-[65] pointer-events-none" aria-hidden>
      <div
        ref={panelRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby="overlap-popover-title"
        className="pointer-events-auto fixed rounded-[var(--radius-md)] border border-border bg-background-secondary p-3 shadow-xl"
        style={{ top, left, width: panelWidth }}
      >
        <div className="flex items-start justify-between gap-2 mb-2">
          <h3 id="overlap-popover-title" className="text-sm font-semibold text-text-primary pr-2">
            {t('overlappingTitle', { count: sorted.length })}
          </h3>
          <DialogCloseButton onClick={onClose} />
        </div>
        <ul className="space-y-1.5 max-h-[min(16rem,50vh)] overflow-y-auto">
          {sorted.map((apt) => (
            <li key={apt.id}>
              <button
                type="button"
                onClick={() => {
                  onSelect(apt);
                  onClose();
                }}
                className="w-full rounded-[var(--radius-sm)] border px-2.5 py-2 text-left transition-colors hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
                style={purposeBannerStyle(apt.purpose, treatmentCatalog)}
              >
                <p className="text-xs font-medium truncate">
                  {apt.patient.firstName} {apt.patient.lastName}
                </p>
                <p className="text-[11px] opacity-90 tabular-nums">{formatTimeRange(apt, locale)}</p>
                <p className="text-[10px] opacity-80 truncate">
                  {purposeLabel(apt.purpose, treatmentCatalog)}
                </p>
              </button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}
