"use client";

import { useDeliverySlots } from "@/hooks/useApi";
import { TEXT } from "@/branding";
import { cn, formatSlotTime } from "@/lib/utils";
import type { DeliverySlot } from "@/types";

const LOW_CAPACITY_THRESHOLD = 3;

/** Capacity actually bookable by this customer: their normal pool, plus the priority pool if they have access to it */
function effectiveCapacity(slot: DeliverySlot): number {
  return slot.remaining_capacity + (slot.is_priority_member ? slot.member_remaining_capacity : 0);
}

interface DeliverySlotPickerProps {
  deliveryType: number; // 0=ASAP 1=Scheduled
  onDeliveryTypeChange: (type: number) => void;
  scheduledDate: string; // Y-m-d
  onDateChange: (date: string) => void;
  selectedSlotId: number | null;
  onSlotSelect: (slotId: number) => void;
}

export default function DeliverySlotPicker({
  deliveryType,
  onDeliveryTypeChange,
  scheduledDate,
  onDateChange,
  selectedSlotId,
  onSlotSelect,
}: DeliverySlotPickerProps) {
  const { data, isLoading, error } = useDeliverySlots(deliveryType === 1 ? scheduledDate : "");
  const slots: DeliverySlot[] = data?.result ?? [];
  const today = new Date().toISOString().slice(0, 10);

  const toggleBtn = (active: boolean) =>
    cn(
      "flex-1 py-2 rounded-lg text-xs font-bold border-2 transition-colors focus:outline-none focus:ring-2",
      active
        ? "border-primary-600 bg-primary-50 text-primary-700 dark:bg-dm-surface2"
        : "border-gray-200 dark:border-dm-border text-gray-700 dark:text-dm-text hover:border-primary-400",
    );

  return (
    <div className="border border-gray-100 dark:border-dm-border rounded-xl overflow-hidden">
      <div className="flex gap-2 p-3">
        <button type="button" onClick={() => onDeliveryTypeChange(0)} className={toggleBtn(deliveryType === 0)}>
          {TEXT.deliverySlot.asap}
        </button>
        <button type="button" onClick={() => onDeliveryTypeChange(1)} className={toggleBtn(deliveryType === 1)}>
          {TEXT.deliverySlot.scheduled}
        </button>
      </div>

      {deliveryType === 1 && (
        <div className="px-3 pb-3 space-y-2.5 border-t border-gray-100 dark:border-dm-border pt-3">
          <input
            type="date"
            min={today}
            value={scheduledDate}
            onChange={(e) => onDateChange(e.target.value)}
            className="w-full border border-gray-200 dark:border-dm-border rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-primary-300 focus:ring-2 dark:bg-dm-surface2 dark:text-dm-text"
          />

          {!scheduledDate ? (
            <p className="text-xs text-gray-400">{TEXT.deliverySlot.selectDateFirst}</p>
          ) : isLoading ? (
            <div className="grid grid-cols-2 gap-2">
              {[1, 2].map((i) => (
                <div key={i} className="h-16 bg-gray-100 dark:bg-dm-surface2 rounded-xl animate-pulse" />
              ))}
            </div>
          ) : error ? (
            <p className="text-xs text-red-500">{TEXT.common.error}</p>
          ) : slots.length === 0 ? (
            <p className="text-xs text-gray-400">{TEXT.deliverySlot.noSlotsAvailable}</p>
          ) : (
            <div className="grid grid-cols-2 gap-2">
              {slots.map((slot) => {
                const capacity = effectiveCapacity(slot);
                const isFull = capacity <= 0;
                const isLow = !isFull && capacity <= LOW_CAPACITY_THRESHOLD;
                const selected = selectedSlotId === slot.id;

                return (
                  <button
                    key={slot.id}
                    type="button"
                    disabled={isFull}
                    onClick={() => onSlotSelect(slot.id)}
                    className={cn(
                      "flex flex-col items-start gap-1 rounded-xl border-2 px-3 py-2.5 text-left transition-colors focus:outline-none focus:ring-2 disabled:opacity-40 disabled:cursor-not-allowed",
                      selected
                        ? "border-primary-600 bg-primary-50 dark:bg-dm-surface2"
                        : "border-gray-200 dark:border-dm-border hover:border-primary-400",
                    )}
                  >
                    <span className="text-xs font-bold text-gray-900 dark:text-dm-text">
                      {slot.label || TEXT.deliverySlot.slotFallback(slot.id)}
                    </span>
                    <span className="text-[11px] text-gray-500 dark:text-dm-muted">
                      {formatSlotTime(slot.start_time)} - {formatSlotTime(slot.end_time)}
                    </span>
                    <span
                      className={cn(
                        "text-[10px] font-semibold",
                        isFull ? "text-red-500" : isLow ? "text-secondary-600" : "text-primary-600",
                      )}
                    >
                      {isFull ? TEXT.deliverySlot.fullyBooked : TEXT.deliverySlot.slotsLeft(capacity)}
                    </span>
                    {slot.is_priority_member === 1 && (
                      <span className="text-[9px] font-bold uppercase tracking-wide text-secondary-600">
                        {TEXT.deliverySlot.priorityAccess}
                      </span>
                    )}
                  </button>
                );
              })}
            </div>
          )}
        </div>
      )}
    </div>
  );
}