dyolink/frontend/src/components/ui/appointments/AppointmentBookingModal.tsx

'use client';

import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/shared/Button';
import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
import { Dropdown } from '@/components/ui/shared/Dropdown';
import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';
import { APPOINTMENT_PURPOSE_LABEL } from '@/components/ui/appointments/appointmentPurposeStyles';
import type { Patient } from '@/types/patient';
import {
  combineLocalDateAndTime,
  compareLocalDayStart,
  formatTimeForInput,
  isSameLocalCalendarDay,
} from '@/components/appointments/appointmentTime';

interface AppointmentBookingModalProps {
  open: boolean;
  scheduleDate: Date;
  patient: Patient | undefined;
  providerUserId: string | null;
  providerName: string;
  initialHour: number;
  onClose: () => void;
  onSubmit: (payload: {
    patientId: string;
    providerUserId: string;
    startAt: string;
    endAt: string;
    purpose: AppointmentPurpose;
  }) => Promise<void>;
  editingAppointment?: AppointmentRecord | null;
  loading?: boolean;
  canDelete?: boolean;
  onDelete?: () => void | Promise<void>;
  deleting?: boolean;
}

export function AppointmentBookingModal({
  open,
  scheduleDate,
  patient,
  providerUserId,
  providerName,
  initialHour,
  onClose,
  onSubmit,
  editingAppointment = null,
  loading = false,
  canDelete = false,
  onDelete,
  deleting = false,
}: AppointmentBookingModalProps) {
  const [startTime, setStartTime] = useState('09:00');
  const [endTime, setEndTime] = useState('10:00');
  const [purpose, setPurpose] = useState<AppointmentPurpose>('consultation');
  const [error, setError] = useState('');
  const purposeTextColor =
    purpose === 'consultation'
      ? '#ddd6fe'
      : purpose === 'filling'
        ? '#fed7aa'
        : purpose === 'endo'
          ? '#fecaca'
          : purpose === 'visit'
            ? '#bae6fd'
            : '#d9f99d';

  useEffect(() => {
    if (!open) {
      return;
    }
    if (editingAppointment) {
      const start = new Date(editingAppointment.startAt);
      const end = new Date(editingAppointment.endAt);
      setStartTime(formatTimeForInput(start));
      setEndTime(formatTimeForInput(end));
      setPurpose((editingAppointment.purpose as AppointmentPurpose) ?? 'consultation');
    } else {
      const start = new Date(
        scheduleDate.getFullYear(),
        scheduleDate.getMonth(),
        scheduleDate.getDate(),
        initialHour,
        0,
        0,
        0,
      );
      const end = new Date(
        scheduleDate.getFullYear(),
        scheduleDate.getMonth(),
        scheduleDate.getDate(),
        initialHour < 23 ? initialHour + 1 : 23,
        initialHour < 23 ? 0 : 59,
        0,
        0,
      );
      setStartTime(formatTimeForInput(start));
      setEndTime(formatTimeForInput(end));
      setPurpose('consultation');
    }
    setError('');
  }, [open, scheduleDate, initialHour, editingAppointment]);

  if (!open || !providerUserId) {
    return null;
  }

  const inputClass =
    'w-full rounded-[var(--radius-md)] border border-border bg-background-secondary/90 text-text-primary px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/35';

  async function handleSubmit() {
    setError('');
    if (!providerUserId) {
      return;
    }
    if (!editingAppointment && !patient) {
      setError('Select a patient first.');
      return;
    }

    const startAt = combineLocalDateAndTime(scheduleDate, startTime);
    const endAt = combineLocalDateAndTime(scheduleDate, endTime);

    if (endAt <= startAt) {
      setError('End time must be after start time.');
      return;
    }

    const now = new Date();
    if (isSameLocalCalendarDay(scheduleDate, now) && startAt.getTime() < now.getTime()) {
      setError('Cannot schedule in the past.');
      return;
    }

    const today = new Date();
    if (compareLocalDayStart(scheduleDate, today) < 0) {
      setError('Past appointments are view-only.');
      return;
    }

    const effectivePatientId = editingAppointment?.patientId ?? patient?.id;
    const effectiveProviderId = editingAppointment?.providerUserId ?? providerUserId;
    if (!effectivePatientId || !effectiveProviderId) {
      setError('Missing appointment details.');
      return;
    }

    await onSubmit({
      patientId: effectivePatientId,
      providerUserId: effectiveProviderId,
      startAt: startAt.toISOString(),
      endAt: endAt.toISOString(),
      purpose,
    });
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/55">
      <div
        className="surface-card w-full max-w-md p-5 space-y-4 shadow-xl"
        role="dialog"
        aria-modal="true"
        aria-labelledby="appointment-modal-title"
      >
        <div className="flex items-start justify-between gap-2">
          <h2 id="appointment-modal-title" className="text-lg font-semibold text-text-primary pr-2">
            {editingAppointment ? 'Edit appointment' : 'New appointment'}
          </h2>
          <DialogCloseButton onClick={onClose} />
        </div>

        <p className="text-sm text-text-secondary">
          Provider: <span className="text-text-primary font-medium">{providerName}</span>
        </p>

        <div>
          <label className="block text-sm font-medium text-text-secondary mb-1">Patient</label>
          <p className="text-sm text-text-primary rounded-[var(--radius-md)] border border-border bg-background-secondary/60 px-3 py-2">
            {editingAppointment
              ? `${editingAppointment.patient.firstName} ${editingAppointment.patient.lastName}`
              : patient
                ? `${patient.firstName} ${patient.lastName}`
                : '—'}
          </p>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className="block text-sm font-medium text-text-secondary mb-1">Start</label>
            <input
              type="time"
              step={60}
              className={inputClass}
              value={startTime}
              onChange={(e) => setStartTime(e.target.value)}
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-text-secondary mb-1">End</label>
            <input
              type="time"
              step={60}
              className={inputClass}
              value={endTime}
              onChange={(e) => setEndTime(e.target.value)}
            />
          </div>
        </div>

        <Dropdown
          label="Purpose"
          value={purpose}
          onChange={(e) => setPurpose(e.target.value as AppointmentPurpose)}
          style={{ color: purposeTextColor }}
        >
          <option value="consultation" style={{ color: '#ddd6fe', backgroundColor: '#14253d' }}>
            {APPOINTMENT_PURPOSE_LABEL.consultation}
          </option>
          <option value="filling" style={{ color: '#fed7aa', backgroundColor: '#14253d' }}>
            {APPOINTMENT_PURPOSE_LABEL.filling}
          </option>
          <option value="endo" style={{ color: '#fecaca', backgroundColor: '#14253d' }}>
            {APPOINTMENT_PURPOSE_LABEL.endo}
          </option>
          <option value="visit" style={{ color: '#bae6fd', backgroundColor: '#14253d' }}>
            {APPOINTMENT_PURPOSE_LABEL.visit}
          </option>
          <option value="hygiene" style={{ color: '#d9f99d', backgroundColor: '#14253d' }}>
            {APPOINTMENT_PURPOSE_LABEL.hygiene}
          </option>
        </Dropdown>

        {error && <p className="text-sm text-red-400">{error}</p>}

        <div className="flex flex-wrap items-center gap-2 justify-between">
          {editingAppointment && canDelete && onDelete ? (
            <Button
              type="button"
              variant="danger"
              onClick={() => void onDelete()}
              disabled={loading || deleting}
              isLoading={deleting}
            >
              Delete
            </Button>
          ) : (
            <span />
          )}
          <div className="flex gap-2 ml-auto">
            <Button type="button" variant="ghost" onClick={onClose} disabled={loading || deleting}>
              Cancel
            </Button>
            <Button
              type="button"
              variant="primary"
              onClick={() => void handleSubmit()}
              isLoading={loading}
              disabled={deleting}
            >
              Save
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}