'use client';

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Calendar, Clock, Check, X } from 'lucide-react';

/** Créneaux horaires proposables (sans la pause déjeuner), comme la maquette. */
const TIMES = ['08:00', '09:00', '10:00', '11:00', '13:00', '14:00', '15:00', '16:00', '17:00'];

interface Slot {
  date: string;
  time: string;
}

interface Props {
  /** Nombre de véhicules du groupe en cours, pour le sous-titre. */
  vehicleCount: number;
  /** Soumission en cours : désactive le bouton « Confirmer » (anti double-clic). */
  submitting?: boolean;
  onConfirm: (datesIso: string[]) => void;
  onClose: () => void;
}

const isComplete = (slot: Slot): boolean => slot.date !== '' && slot.time !== '';

function formatSlot(slot: Slot, undefinedLabel: string): string {
  if (!isComplete(slot)) return undefinedLabel;
  const d = new Date(`${slot.date}T${slot.time}`);
  if (Number.isNaN(d.getTime())) return undefinedLabel;
  const day = d.toLocaleDateString('fr-FR', { weekday: 'short', day: '2-digit', month: 'short' });
  return `${day} · ${slot.time}`;
}

/**
 * Modal de sélection des 3 créneaux d'intervention pour un GROUPE de véhicules.
 * Un onglet par créneau (date + grille d'horaires) ; le bouton « Confirmer »
 * n'est actif qu'une fois les 3 créneaux renseignés. Retourne 3 dates ISO.
 */
export default function RequestGroupSlotModal({
  vehicleCount,
  submitting = false,
  onConfirm,
  onClose,
}: Props) {
  const { t } = useTranslation();
  const [slots, setSlots] = useState<Slot[]>([
    { date: '', time: '' },
    { date: '', time: '' },
    { date: '', time: '' },
  ]);
  const [active, setActive] = useState(0);

  // Premier créneau possible : demain (on ne propose pas le jour même).
  const minDate = (() => {
    const d = new Date();
    d.setDate(d.getDate() + 1);
    return d.toISOString().slice(0, 10);
  })();
  const doneCount = slots.filter(isComplete).length;

  /** Deux créneaux renseignés avec la même date ET le même horaire. */
  const hasDuplicate = slots.some(
    (s, i) =>
      isComplete(s) &&
      slots.some((o, j) => j !== i && isComplete(o) && o.date === s.date && o.time === s.time)
  );

  const canConfirm = doneCount === 3 && !hasDuplicate;

  /** Un onglet est accessible si tous les créneaux qui le précèdent sont validés. */
  const canSelect = (i: number) => slots.slice(0, i).every(isComplete);

  const updateActive = (patch: Partial<Slot>) => {
    setSlots((prev) => {
      const next = [...prev];
      next[active] = { ...next[active], ...patch };
      return next;
    });
  };

  const confirm = () => {
    if (!canConfirm || submitting) return;
    const iso = slots.map((s) => new Date(`${s.date}T${s.time}`).toISOString());
    onConfirm(iso);
  };

  const current = slots[active];

  return (
    <div className="fixed inset-0 z-[60] flex items-end sm:items-center justify-center">
      <div className="absolute inset-0 bg-black/50 animate-fade-in" onClick={onClose} />

      <div className="relative w-full sm:max-w-lg bg-background rounded-t-2xl sm:rounded-2xl shadow-2xl max-h-[92vh] flex flex-col overflow-hidden animate-slide-in">
        {/* Header */}
        <div className="flex-shrink-0 px-4 py-3 flex items-start justify-between gap-3 border-b border-border">
          <div className="min-w-0">
            <h3 className="text-base font-bold text-foreground">{t('requests.proposeSlotsTitle')}</h3>
            <p className="text-sm text-muted-foreground">
              {t('requests.groupSlotsLead', { count: vehicleCount })}
            </p>
          </div>
          <div className="flex items-center gap-2 shrink-0">
            <span className="text-sm font-medium text-muted-foreground">
              {t('requests.slotsCount', { done: doneCount })}
            </span>
            <button
              type="button"
              onClick={onClose}
              aria-label={t('requests.close')}
              className="w-8 h-8 rounded-full bg-muted hover:bg-muted/70 flex items-center justify-center text-muted-foreground transition-colors"
            >
              <X className="w-4 h-4" />
            </button>
          </div>
        </div>

        {/* Body */}
        <div className="flex-1 overflow-y-auto p-4 space-y-4">
          {/* Onglets des 3 créneaux */}
          <div className="grid grid-cols-3 gap-2">
            {[0, 1, 2].map((i) => {
              const slot = slots[i];
              const selectable = canSelect(i);
              const isActive = i === active;
              return (
                <button
                  key={i}
                  type="button"
                  onClick={() => selectable && setActive(i)}
                  disabled={!selectable}
                  className={`text-left rounded-lg border px-3 py-2.5 transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${
                    isActive
                      ? 'border-primary bg-primary/5'
                      : isComplete(slot)
                        ? 'border-emerald-200 bg-emerald-50'
                        : 'border-dashed border-border bg-white'
                  }`}
                >
                  <p className="text-[10px] font-bold uppercase tracking-wide text-muted-foreground">
                    {t('requests.slot', { n: i + 1 })}
                  </p>
                  <p
                    className={`text-sm mt-0.5 truncate ${
                      isComplete(slot) ? 'font-semibold text-foreground' : 'text-muted-foreground'
                    }`}
                  >
                    {formatSlot(slot, t('requests.slotUndefined'))}
                  </p>
                </button>
              );
            })}
          </div>

          {/* Date + horaires */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium text-foreground flex items-center gap-1.5 mb-1.5">
                <Calendar className="w-4 h-4 text-primary" />
                {t('requests.dateLabel')}
              </label>
              <input
                type="date"
                min={minDate}
                value={current.date}
                onChange={(e) => updateActive({ date: e.target.value })}
                className="w-full rounded-lg border border-border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30"
              />
            </div>
            <div>
              <label className="text-sm font-medium text-foreground flex items-center gap-1.5 mb-1.5">
                <Clock className="w-4 h-4 text-primary" />
                {t('requests.timeLabel')}
              </label>
              <div className="flex flex-wrap gap-1.5">
                {TIMES.map((time) => (
                  <button
                    key={time}
                    type="button"
                    onClick={() => updateActive({ time })}
                    className={`px-2.5 py-1.5 rounded-md text-xs font-medium border transition-colors ${
                      current.time === time
                        ? 'border-primary bg-primary text-white'
                        : 'border-border bg-white text-foreground hover:bg-muted'
                    }`}
                  >
                    {time}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Footer */}
        {hasDuplicate && (
          <div className="flex-shrink-0 px-4 pt-3">
            <p className="flex items-start gap-1.5 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs font-medium text-red-700">
              <X className="w-4 h-4 shrink-0" />
              {t('requests.slotDuplicate')}
            </p>
          </div>
        )}
        <div className="flex-shrink-0 border-t border-border p-4 flex items-center justify-end gap-3">
          <button
            type="button"
            onClick={onClose}
            className="inline-flex items-center justify-center rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors"
          >
            {t('requests.cancel')}
          </button>
          <button
            type="button"
            onClick={confirm}
            disabled={!canConfirm || submitting}
            className="btn-primary inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Check className="w-4 h-4" />
            {t('requests.confirmGroup')}
          </button>
        </div>
      </div>
    </div>
  );
}