'use client';

import { useMemo, useState } from 'react';
import type { AppointmentColumnProvider, AppointmentRecord } from '@/types/appointment';
import { formatHourLabel } from '@/lib/appointmentTime';
import {
  computeAppointmentLaneLayouts,
  findOverlapCluster,
  lanePositionStyles,
} from '@/lib/appointmentOverlapLayout';
import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
import { AppointmentOverlapPopover } from '@/components/ui/appointments/AppointmentOverlapPopover';

const HOUR_PX = 40;
const HOURS = Array.from({ length: 24 }, (_, i) => i);

function layoutBlock(apt: AppointmentRecord, day: Date): { top: string; height: string } | null {
  const dayStart = new Date(day.getFullYear(), day.getMonth(), day.getDate(), 0, 0, 0, 0);
  const dayEnd = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1, 0, 0, 0, 0);
  const start = new Date(apt.startAt);
  const end = new Date(apt.endAt);
  const ms = dayEnd.getTime() - dayStart.getTime();
  const clipStart = Math.max(start.getTime(), dayStart.getTime());
  const clipEnd = Math.min(end.getTime(), dayEnd.getTime());
  if (clipEnd <= clipStart) {
    return null;
  }
  const top = ((clipStart - dayStart.getTime()) / ms) * 100;
  const height = ((clipEnd - clipStart) / ms) * 100;
  return { top: `${top}%`, height: `${height}%` };
}

function appointmentDurationMinutes(apt: AppointmentRecord): number {
  const start = new Date(apt.startAt).getTime();
  const end = new Date(apt.endAt).getTime();
  return Math.max(0, Math.round((end - start) / 60_000));
}

function appointmentBannerHeightPx(durationMin: number): number {
  return (durationMin / (24 * 60)) * HOURS.length * HOUR_PX;
}

function shortBannerNameClass(durationMin: number): string {
  const heightPx = appointmentBannerHeightPx(durationMin);
  if (heightPx < 18) {
    return 'text-[8px] leading-none';
  }
  if (durationMin < 60) {
    return 'text-[9px] leading-none';
  }
  return 'text-[11px] leading-tight';
}

type OverlapPopoverState = {
  appointments: AppointmentRecord[];
  anchorRect: DOMRect;
};

interface AppointmentScheduleGridProps {
  day: Date;
  providers: AppointmentColumnProvider[];
  appointments: AppointmentRecord[];
  canBook: boolean;
  onSlotClick: (hour: number, providerUserId: string, providerName: string) => void;
  onAppointmentClick?: (appointment: AppointmentRecord) => void;
}

export function AppointmentScheduleGrid({
  day,
  providers,
  appointments,
  canBook,
  onSlotClick,
  onAppointmentClick,
}: AppointmentScheduleGridProps) {
  const gridHeight = HOURS.length * HOUR_PX;
  const [overlapPopover, setOverlapPopover] = useState<OverlapPopoverState | null>(null);

  const laneLayoutsByProvider = useMemo(() => {
    const map = new Map<string, ReturnType<typeof computeAppointmentLaneLayouts>>();
    for (const provider of providers) {
      const providerApts = appointments.filter((a) => a.providerUserId === provider.userId);
      map.set(provider.userId, computeAppointmentLaneLayouts(providerApts));
    }
    return map;
  }, [appointments, providers]);

  function handleAppointmentBannerClick(
    apt: AppointmentRecord,
    providerAppointments: AppointmentRecord[],
    anchor: HTMLElement,
  ) {
    const cluster = findOverlapCluster(apt.id, providerAppointments);
    if (cluster.length > 1) {
      setOverlapPopover({
        appointments: cluster,
        anchorRect: anchor.getBoundingClientRect(),
      });
      return;
    }
    onAppointmentClick?.(apt);
  }

  if (providers.length === 0) {
    return (
      <div className="surface-card p-6 text-sm text-text-muted">
        No providers available. Add staff with treatment edit access to see columns here.
      </div>
    );
  }

  return (
    <>
      <div className="surface-card overflow-x-auto">
        <div className="min-w-[640px]">
          <div className="flex border-b border-border">
            <div className="w-14 flex-shrink-0" />
            {providers.map((p) => (
              <div
                key={p.userId}
                className="flex-1 min-w-[130px] text-center text-sm font-medium text-text-primary py-2.5 px-1 border-l border-border"
              >
                {p.name}
              </div>
            ))}
          </div>

          <div className="flex">
            <div className="w-14 flex-shrink-0 border-r border-border bg-background-secondary/40">
              {HOURS.map((h) => (
                <div
                  key={h}
                  className="text-[11px] text-text-muted flex items-start justify-end pr-1.5 pt-0.5 border-b border-border/50"
                  style={{ height: HOUR_PX }}
                >
                  {formatHourLabel(h)}
                </div>
              ))}
            </div>

            <div className="flex-1 flex min-w-0">
              {providers.map((p) => {
                const providerAppointments = appointments.filter(
                  (a) => a.providerUserId === p.userId,
                );
                const laneLayouts = laneLayoutsByProvider.get(p.userId) ?? new Map();

                return (
                  <div
                    key={p.userId}
                    className="flex-1 min-w-[130px] border-l border-border relative"
                    style={{ height: gridHeight }}
                  >
                    {HOURS.map((h) => {
                      const slotDisabled = !canBook;
                      return (
                        <button
                          key={h}
                          type="button"
                          disabled={slotDisabled}
                          title={
                            slotDisabled
                              ? 'You cannot create appointments'
                              : `Book ${formatHourLabel(h)}`
                          }
                          className={`absolute left-0 right-0 border-b border-border/50 transition-colors ${
                            slotDisabled
                              ? 'cursor-not-allowed opacity-50'
                              : 'hover:bg-primary/8 cursor-pointer'
                          }`}
                          style={{ top: h * HOUR_PX, height: HOUR_PX }}
                          onClick={() => onSlotClick(h, p.userId, p.name)}
                        />
                      );
                    })}

                    {providerAppointments.map((apt) => {
                      const pos = layoutBlock(apt, day);
                      if (!pos) {
                        return null;
                      }
                      const lane = laneLayouts.get(apt.id) ?? { lane: 0, laneCount: 1 };
                      const lanePos = lanePositionStyles(lane.lane, lane.laneCount);
                      const durationMin = appointmentDurationMinutes(apt);
                      const clusterSize = findOverlapCluster(apt.id, providerAppointments).length;
                      const isUnderOneHour = durationMin < 60;
                      const patientName = `${apt.patient.firstName} ${apt.patient.lastName}`;
                      const bannerTitle = [
                        patientName,
                        clusterSize > 1 ? `${clusterSize} overlapping — click to choose` : null,
                        !isUnderOneHour && apt.patient.phone ? apt.patient.phone : null,
                      ]
                        .filter(Boolean)
                        .join(' · ');

                      return (
                        <button
                          type="button"
                          key={apt.id}
                          onClick={(e) =>
                            handleAppointmentBannerClick(apt, providerAppointments, e.currentTarget)
                          }
                          className={`absolute min-h-0 overflow-hidden rounded-[var(--radius-sm)] border pointer-events-auto z-10 flex text-left ${purposeStyle(apt.purpose)} focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 ${
                            isUnderOneHour
                              ? 'items-center justify-center px-0.5 py-0'
                              : 'flex-col justify-start gap-0.5 px-1 py-0.5'
                          }`}
                          style={{
                            top: pos.top,
                            height: pos.height,
                            left: lanePos.left,
                            width: lanePos.width,
                          }}
                          title={bannerTitle}
                        >
                          <span
                            className={`block w-full truncate pointer-events-none font-medium ${shortBannerNameClass(durationMin)}`}
                          >
                            {patientName}
                          </span>
                          {!isUnderOneHour &&
                            apt.patient.phone &&
                            lane.laneCount === 1 && (
                              <span className="block w-full truncate pointer-events-none text-[10px] leading-tight opacity-90">
                                {apt.patient.phone}
                              </span>
                            )}
                          {!isUnderOneHour && clusterSize > 1 && (
                            <span className="block w-full truncate pointer-events-none text-[9px] leading-tight opacity-75">
                              {clusterSize} overlapping
                            </span>
                          )}
                        </button>
                      );
                    })}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      {overlapPopover && (
        <AppointmentOverlapPopover
          appointments={overlapPopover.appointments}
          anchorRect={overlapPopover.anchorRect}
          onSelect={(apt) => onAppointmentClick?.(apt)}
          onClose={() => setOverlapPopover(null)}
        />
      )}
    </>
  );
}