import React, { useState, useEffect } from 'react';
import { Sparkles, Heart, Calendar, UserCheck, Hand } from 'lucide-react';
import { Appointment } from '../types';

interface RotationViewProps {
  onDismiss: () => void;
  carouselMessages: string[];
  dutyInfo: {
    dutyName: string;
    hoursRange: string;
  };
  appointments: Appointment[];
}

export const RotationView: React.FC<RotationViewProps> = ({
  onDismiss,
  carouselMessages,
  dutyInfo,
  appointments,
}) => {
  const [slideIdx, setSlideIdx] = useState(0);

  // Slides are created from care tips, next appointments, and on-duty sibling
  const slides = [
    {
      type: 'tip',
      icon: Heart,
      title: 'Rappel d’attention & bienveillance',
      content: carouselMessages[0] || 'Penser à faire boire régulièrement papa',
      badge: 'Soin confort',
    },
    {
      type: 'duty',
      icon: UserCheck,
      title: 'Présence auprès des parents',
      content: `${dutyInfo.dutyName} est de garde (${dutyInfo.hoursRange})`,
      badge: 'Tournante familiale',
    },
    {
      type: 'rdv',
      icon: Calendar,
      title: 'Prochain rendez-vous médical',
      content: appointments[0]
        ? `${appointments[0].titre} (${appointments[0].moment || appointments[0].date_debut})`
        : 'Aucun rendez-vous aujourd’hui',
      badge: 'Soignants',
    },
    ...(carouselMessages.length > 1
      ? [
          {
            type: 'tip',
            icon: Sparkles,
            title: 'Note familiale',
            content: carouselMessages[1],
            badge: 'Information',
          },
        ]
      : []),
  ];

  useEffect(() => {
    const timer = setInterval(() => {
      setSlideIdx((prev) => (prev + 1) % slides.length);
    }, 6000);
    return () => clearInterval(timer);
  }, [slides.length]);

  const currentSlide = slides[slideIdx];
  const Icon = currentSlide.icon;

  return (
    <div
      onClick={onDismiss}
      className="fixed inset-0 z-50 bg-[#0c0f0d]/95 backdrop-blur-md flex flex-col justify-between p-6 sm:p-12 text-white cursor-pointer select-none animate-in fade-in duration-500"
    >
      {/* Top ambient bar */}
      <div className="flex items-center justify-between opacity-70 text-xs sm:text-sm tracking-wider uppercase">
        <div className="flex items-center gap-2">
          <Sparkles className="w-4 h-4 text-emerald-400" />
          <span>Kiosk Soins • Mode Veille</span>
        </div>
        <span>Touchez pour réveiller l'écran</span>
      </div>

      {/* Main Slide Card */}
      <div className="max-w-xl mx-auto w-full text-center flex flex-col items-center gap-5 my-auto">
        <div className="w-16 h-16 sm:w-20 sm:h-20 rounded-3xl bg-white/5 border border-white/15 flex items-center justify-center shadow-2xl">
          <Icon className="w-8 h-8 sm:w-10 sm:h-10 text-emerald-300 animate-pulse" />
        </div>

        <span className="px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-widest bg-emerald-950/80 border border-emerald-700/80 text-emerald-300">
          {currentSlide.badge}
        </span>

        <h2 className="text-xl sm:text-2xl font-bold text-white/90 m-0">
          {currentSlide.title}
        </h2>

        <p className="text-2xl sm:text-3xl font-semibold text-white tracking-tight leading-relaxed max-w-lg m-0">
          "{currentSlide.content}"
        </p>

        {/* Indicators */}
        <div className="flex items-center gap-2 mt-4">
          {slides.map((_, i) => (
            <div
              key={i}
              className={`h-1.5 rounded-full transition-all duration-300 ${
                i === slideIdx ? 'w-8 bg-emerald-400' : 'w-2 bg-white/20'
              }`}
            />
          ))}
        </div>
      </div>

      {/* Bottom hint */}
      <div className="flex items-center justify-center gap-2 text-center text-xs sm:text-sm text-white/60">
        <Hand className="w-4 h-4 text-emerald-400 animate-bounce" />
        <span>Touchez l'écran n'importe où pour accéder aux tâches ou vous identifier</span>
      </div>
    </div>
  );
};