import React, { useState } from 'react';
import { ArrowLeft, ChevronLeft, ChevronRight, UserCheck, AlertTriangle, Calendar, Plus, Clock } from 'lucide-react';
import { Presence, User } from '../types';
import { getTodayDateString } from '../mockData';

interface PresencesViewProps {
  presences: Presence[];
  users: User[];
  onBack: () => void;
  onAddPresence: (presence: Omit<Presence, 'id'>) => void;
  activeUser: User | null;
}

export const PresencesView: React.FC<PresencesViewProps> = ({
  presences,
  users,
  onBack,
  onAddPresence,
  activeUser,
}) => {
  const [dayOffset, setDayOffset] = useState(0);
  const [showQuickAdd, setShowQuickAdd] = useState(false);
  const [selectedUserId, setSelectedUserId] = useState<number>(
    activeUser?.id || (users.find((u) => u.role === 'membre')?.id ?? 1)
  );
  const [slotStart, setSlotStart] = useState('10:00');
  const [slotEnd, setSlotEnd] = useState('18:00');

  const currentDateStr = getTodayDateString(dayOffset);
  const currentDateObj = new Date(currentDateStr + 'T12:00:00');

  // Format label for the day
  let dayLabel = '';
  if (dayOffset === -1) dayLabel = 'Hier';
  else if (dayOffset === 0) dayLabel = "Aujourd'hui";
  else if (dayOffset === 1) dayLabel = 'Demain';
  else if (dayOffset === 2) dayLabel = 'Après-demain';
  else {
    const raw = currentDateObj.toLocaleDateString('fr-FR', {
      weekday: 'long',
      day: 'numeric',
      month: 'long',
    });
    dayLabel = raw.charAt(0).toUpperCase() + raw.slice(1);
  }

  const fullDateDisplay = currentDateObj.toLocaleDateString('fr-FR', {
    weekday: 'long',
    day: 'numeric',
    month: 'long',
  });

  const dayPresences = presences
    .filter((p) => p.date === currentDateStr)
    .sort((a, b) => a.heure_debut.localeCompare(b.heure_debut));

  const isGap = dayPresences.length === 0;

  const handleQuickAdd = () => {
    const user = users.find((u) => u.id === Number(selectedUserId));
    if (!user) return;
    onAddPresence({
      utilisateur_id: user.id,
      utilisateur_nom: user.nom,
      date: currentDateStr,
      heure_debut: slotStart,
      heure_fin: slotEnd,
    });
    setShowQuickAdd(false);
  };

  return (
    <div className="flex flex-col gap-3">
      {/* Header */}
      <div className="flex items-center gap-3">
        <button
          onClick={onBack}
          className="w-11 h-11 rounded-xl bg-[var(--surface)] border border-[var(--border)] flex items-center justify-center text-[var(--ink)] hover:bg-[var(--surface-alt)] transition-colors cursor-pointer"
        >
          <ArrowLeft className="w-5 h-5" />
        </button>
        <div>
          <h1 className="text-xl sm:text-2xl font-bold text-[var(--ink)] m-0 leading-tight">
            Planning de présence
          </h1>
          <p className="text-xs text-[var(--ink-soft)] m-0">
            Tournante de la fratrie pour accompagner Papa et Maman
          </p>
        </div>
      </div>

      {/* Navigation Horizontale Jour par Jour */}
      <div className="flex items-center justify-between p-2 rounded-2xl bg-[var(--surface)] border border-[var(--border)]">
        <button
          onClick={() => setDayOffset((prev) => prev - 1)}
          className="w-11 h-11 rounded-xl bg-[var(--surface-alt)] text-[var(--ink)] flex items-center justify-center hover:bg-[var(--border)] transition-colors cursor-pointer"
          title="Jour précédent"
        >
          <ChevronLeft className="w-6 h-6" />
        </button>

        <div className="text-center">
          <p className="text-lg sm:text-xl font-bold text-[var(--ink)] m-0 leading-tight">
            {dayLabel}
          </p>
          <p className="text-xs text-[var(--ink-soft)] m-0 capitalize">
            {fullDateDisplay}
          </p>
        </div>

        <button
          onClick={() => setDayOffset((prev) => prev + 1)}
          className="w-11 h-11 rounded-xl bg-[var(--surface-alt)] text-[var(--ink)] flex items-center justify-center hover:bg-[var(--border)] transition-colors cursor-pointer"
          title="Jour suivant"
        >
          <ChevronRight className="w-6 h-6" />
        </button>
      </div>

      {/* Alerte si Trou de Planning sur ce jour */}
      {isGap && (
        <div className="rounded-2xl p-4 sm:p-5 bg-red-950/70 border-2 border-red-700/80 text-red-200 flex flex-col gap-2.5">
          <div className="flex items-center gap-3">
            <AlertTriangle className="w-6 h-6 text-red-400 shrink-0" />
            <div>
              <h2 className="text-base font-bold text-red-100 m-0">
                Trou de planning détecté !
              </h2>
              <p className="text-xs text-red-300 m-0 mt-0.5">
                Aucun membre de la fratrie n'est encore assigné pour ce jour.
              </p>
            </div>
          </div>
          <button
            onClick={() => setShowQuickAdd(true)}
            className="w-full py-2.5 px-4 rounded-xl bg-red-800 hover:bg-red-700 text-white font-semibold text-sm transition-colors flex items-center justify-center gap-2 cursor-pointer"
          >
            <Plus className="w-4 h-4" />
            <span>Prendre la garde pour ce jour</span>
          </button>
        </div>
      )}

      {/* Liste des créneaux pour le jour sélectionné */}
      <div className="flex flex-col gap-2.5 mt-1">
        {dayPresences.map((presence) => (
          <div
            key={presence.id}
            className="rounded-2xl p-4 bg-[var(--surface)] border border-[var(--border)] flex items-center justify-between gap-3 shadow-sm"
          >
            <div className="flex items-center gap-3.5">
              <div className="w-11 h-11 rounded-full bg-sky-900/40 border border-sky-700 text-sky-200 flex items-center justify-center font-bold text-base">
                {presence.utilisateur_nom.charAt(0)}
              </div>
              <div>
                <h2 className="text-lg font-bold text-[var(--ink)] m-0 leading-tight">
                  {presence.utilisateur_nom}
                </h2>
                <div className="flex items-center gap-1.5 text-xs text-[var(--ink-soft)] mt-1">
                  <Clock className="w-3.5 h-3.5" />
                  <span>
                    De {presence.heure_debut.replace(':', 'h')} à{' '}
                    {presence.heure_fin.replace(':', 'h')}
                  </span>
                </div>
              </div>
            </div>

            <span className="px-3 py-1 rounded-full text-xs font-semibold bg-emerald-950/60 text-emerald-300 border border-emerald-800/60 flex items-center gap-1">
              <UserCheck className="w-3.5 h-3.5" />
              <span>Confirmé</span>
            </span>
          </div>
        ))}
      </div>

      {/* Formulaire ajout rapide de présence */}
      {showQuickAdd ? (
        <div className="rounded-2xl p-4 bg-[var(--surface)] border border-[var(--border)] flex flex-col gap-3 mt-2">
          <div className="flex items-center justify-between">
            <span className="text-sm font-bold text-[var(--ink)]">
              Assigner un créneau pour {dayLabel}
            </span>
            <button
              onClick={() => setShowQuickAdd(false)}
              className="text-xs text-[var(--ink-soft)] hover:text-[var(--ink)]"
            >
              Fermer
            </button>
          </div>

          <div className="flex flex-col gap-2">
            <label className="text-xs font-medium text-[var(--ink-soft)]">
              Membre de la fratrie :
            </label>
            <select
              value={selectedUserId}
              onChange={(e) => setSelectedUserId(Number(e.target.value))}
              className="w-full p-2.5 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--ink)] text-sm"
            >
              {users
                .filter((u) => u.role === 'membre')
                .map((u) => (
                  <option key={u.id} value={u.id}>
                    {u.nom}
                  </option>
                ))}
            </select>
          </div>

          <div className="grid grid-cols-2 gap-2">
            <div>
              <label className="text-xs font-medium text-[var(--ink-soft)]">
                Heure début :
              </label>
              <input
                type="time"
                value={slotStart}
                onChange={(e) => setSlotStart(e.target.value)}
                className="w-full p-2 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--ink)] text-sm"
              />
            </div>
            <div>
              <label className="text-xs font-medium text-[var(--ink-soft)]">
                Heure fin :
              </label>
              <input
                type="time"
                value={slotEnd}
                onChange={(e) => setSlotEnd(e.target.value)}
                className="w-full p-2 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--ink)] text-sm"
              />
            </div>
          </div>

          <div className="flex gap-2 mt-1">
            <button
              onClick={() => setShowQuickAdd(false)}
              className="flex-1 py-2 px-3 rounded-xl border border-[var(--border)] text-xs font-semibold text-[var(--ink-soft)] hover:bg-[var(--surface-alt)]"
            >
              Annuler
            </button>
            <button
              onClick={handleQuickAdd}
              className="flex-1 py-2 px-3 rounded-xl bg-[var(--accent)] text-white text-xs font-semibold hover:opacity-90"
            >
              Enregistrer
            </button>
          </div>
        </div>
      ) : (
        <button
          onClick={() => setShowQuickAdd(true)}
          className="py-3 px-4 rounded-xl border border-dashed border-[var(--border)] text-[var(--ink-soft)] hover:text-[var(--ink)] hover:border-[var(--ink-soft)] text-sm font-medium flex items-center justify-center gap-2 transition-colors cursor-pointer mt-2"
        >
          <Plus className="w-4 h-4" />
          <span>Ajouter un autre créneau pour ce jour</span>
        </button>
      )}
    </div>
  );
};