import React, { useState } from 'react';
import { User, X, Check, Users } from 'lucide-react';
import { User as UserType } from '../types';

interface IdentificationModalProps {
  isOpen: boolean;
  onClose: () => void;
  presumedName: string;
  familyMembers: UserType[];
  onConfirmUser: (user: UserType) => void;
  actionDescription?: string;
}

export const IdentificationModal: React.FC<IdentificationModalProps> = ({
  isOpen,
  onClose,
  presumedName,
  familyMembers,
  onConfirmUser,
  actionDescription,
}) => {
  const [showOtherMembers, setShowOtherMembers] = useState(false);

  if (!isOpen) return null;

  // Sibling members (role: 'membre')
  const siblings = familyMembers.filter((m) => m.role === 'membre');
  const presumedUser = siblings.find((s) => s.nom.toLowerCase() === presumedName.toLowerCase()) || siblings[0];

  const handleConfirmPresumed = () => {
    if (presumedUser) {
      onConfirmUser(presumedUser);
    }
  };

  const handleSelectMember = (member: UserType) => {
    onConfirmUser(member);
    setShowOtherMembers(false);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-xs">
      <div className="w-full max-w-md bg-[var(--surface)] border border-[var(--border)] rounded-[22px] p-5 sm:p-6 shadow-2xl flex flex-col gap-4 animate-in fade-in zoom-in-95 duration-200">
        {/* Top Header */}
        <div className="flex items-start justify-between">
          <div>
            <span className="text-[11px] font-bold uppercase tracking-wider text-sky-400">
              Identification Kiosk
            </span>
            <h2 className="text-xl sm:text-2xl font-bold text-[var(--ink)] m-0 mt-0.5 leading-tight">
              {!showOtherMembers
                ? `Bonjour ${presumedName}, es-tu de garde ?`
                : 'Qui valide cette action ?'}
            </h2>
          </div>
          <button
            onClick={onClose}
            className="w-9 h-9 rounded-xl bg-[var(--surface-alt)] flex items-center justify-center text-[var(--ink-soft)] hover:text-[var(--ink)] transition-colors cursor-pointer"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {actionDescription && (
          <div className="p-3 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] text-xs text-[var(--ink-soft)]">
            Action à valider : <strong className="text-[var(--ink)]">{actionDescription}</strong>
          </div>
        )}

        {!showOtherMembers ? (
          /* Choix principal : Oui, c'est moi / Non, autre membre */
          <div className="flex flex-col gap-2.5 mt-1">
            <button
              onClick={handleConfirmPresumed}
              className="w-full py-4 px-5 rounded-xl bg-[var(--accent)] hover:opacity-95 text-white font-bold text-base flex items-center justify-center gap-2.5 shadow-md active:scale-[0.99] transition-transform cursor-pointer"
            >
              <Check className="w-5 h-5 text-emerald-400" />
              <span>Oui, c'est moi ({presumedName})</span>
            </button>

            <button
              onClick={() => setShowOtherMembers(true)}
              className="w-full py-3.5 px-5 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] hover:bg-[var(--border)] text-[var(--ink)] font-semibold text-sm flex items-center justify-center gap-2 active:scale-[0.99] transition-colors cursor-pointer"
            >
              <Users className="w-4 h-4 text-[var(--ink-soft)]" />
              <span>Non, c'est un autre membre de la fratrie</span>
            </button>

            <p className="text-center text-[11px] text-[var(--ink-soft)] m-0 mt-1">
              Une fois identifié(e), votre session restera active pendant 60 secondes pour faciliter les actions suivantes.
            </p>
          </div>
        ) : (
          /* Grille des membres de la fratrie */
          <div className="flex flex-col gap-3">
            <p className="text-xs text-[var(--ink-soft)] m-0">
              Sélectionnez votre prénom parmi les 7 enfants :
            </p>

            <div className="grid grid-cols-2 gap-2.5">
              {siblings.map((member) => (
                <button
                  key={member.id}
                  onClick={() => handleSelectMember(member)}
                  className="p-3.5 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] hover:border-[var(--ink-soft)] text-[var(--ink)] font-bold text-sm text-left flex items-center gap-2.5 transition-all hover:scale-[1.02] active:scale-95 cursor-pointer"
                >
                  <div className="w-8 h-8 rounded-full bg-[var(--accent)] text-white flex items-center justify-center text-xs font-bold shrink-0">
                    {member.nom.charAt(0)}
                  </div>
                  <span className="truncate">{member.nom}</span>
                </button>
              ))}
            </div>

            <button
              onClick={() => setShowOtherMembers(false)}
              className="py-2.5 text-xs text-[var(--ink-soft)] hover:text-[var(--ink)] text-center transition-colors cursor-pointer"
            >
              ← Revenir à {presumedName}
            </button>
          </div>
        )}
      </div>
    </div>
  );
};