'use client';

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Calendar, Clock, Send } 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 {
  submitting: boolean;
  onSubmit: (datesIso: string[]) => 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}`;
}

/**
 * Sélecteur des 3 créneaux d'intervention : un onglet par créneau, une date et
 * une grille d'horaires. Un créneau est validé dès qu'il a une date et un
 * horaire ; on ne peut passer au créneau suivant qu'une fois le précédent
 * validé, et « Envoyer au client » n'est actif qu'une fois les 3 renseignés.
 */
export default function RequestSlotPicker({ submitting, onSubmit }: Props) {
  const { t } = useTranslation();
  const [slots, setSlots] = useState<Slot[]>([
    { date: '', time: '' },
    { date: '', time: '' },
    { date: '', time: '' },
  ]);
  const [active, setActive] = useState(0);

  const today = new Date().toISOString().slice(0, 10);
  const doneCount = slots.filter(isComplete).length;
  const canSend = doneCount === 3;

  /** 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 send = () => {
    if (!canSend) return;
    const iso = slots.map((s) => new Date(`${s.date}T${s.time}`).toISOString());
    onSubmit(iso);
  };

  const current = slots[active];

  return (
    <div className="space-y-4">
      <div className="flex items-start justify-between gap-3">
        <div>
          <h3 className="text-base font-bold text-foreground">{t('requests.proposeSlotsTitle')}</h3>
          <p className="text-sm text-muted-foreground">{t('requests.proposeSlotsHint')}</p>
        </div>
        <span className="text-sm font-medium text-muted-foreground shrink-0">
          {t('requests.slotsCount', { done: doneCount })}
        </span>
      </div>

      {/* 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={today}
            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>

      {/* Actions */}
      <div className="flex items-center justify-end gap-3 pt-1">
        <button
          type="button"
          onClick={send}
          disabled={!canSend || submitting}
          className="btn-primary inline-flex items-center justify-center gap-2 disabled:opacity-50"
        >
          {t('requests.sendToClient')}
          <Send className="w-4 h-4" />
        </button>
      </div>
    </div>
  );
}