import React, { useState, useEffect } from 'react';
import {
  UserCheck,
  AlertTriangle,
  Pill,
  Trash2,
  Calendar,
  Stethoscope,
  ClipboardList,
  CheckCircle2,
  ChevronRight,
  HeartHandshake,
} from 'lucide-react';
import { AlertItem, Appointment, TaskInstance, ActiveScreen } from '../types';

interface DashboardViewProps {
  dutyInfo: {
    dutyName: string;
    hoursRange: string;
    hasDuty: boolean;
  };
  alerts: AlertItem[];
  appointments: Appointment[];
  taskInstances: TaskInstance[];
  carouselMessages: string[];
  onNavigate: (screen: ActiveScreen) => void;
  onSelectAlert: (alert: AlertItem) => void;
}

export const DashboardView: React.FC<DashboardViewProps> = ({
  dutyInfo,
  alerts,
  appointments,
  taskInstances,
  carouselMessages,
  onNavigate,
  onSelectAlert,
}) => {
  const [activeMsgIdx, setActiveMsgIdx] = useState(0);

  // Rotation douce du carrousel secondaire toutes les 7 secondes
  useEffect(() => {
    if (carouselMessages.length === 0) return;
    const interval = setInterval(() => {
      setActiveMsgIdx((prev) => (prev + 1) % carouselMessages.length);
    }, 7000);
    return () => clearInterval(interval);
  }, [carouselMessages.length]);

  // Prochain RDV pour la tuile de résumé
  const nextRdv = appointments.length > 0 ? appointments[0] : null;

  // Tâches restantes
  const pendingTasks = taskInstances.filter((t) => !t.fait);
  const careTasksCount = pendingTasks.filter((t) => t.categorie === 'soins').length;
  const kindnessTasksCount = pendingTasks.filter(
    (t) => t.categorie === 'bienveillance' || t.categorie === 'maison'
  ).length;

  return (
    <div className="flex flex-col gap-3">
      {/* 1. Bandeau "De garde aujourd'hui" */}
      <div
        onClick={() => onNavigate('presence')}
        className={`rounded-[18px] p-4 sm:p-5 flex items-center justify-between gap-3 cursor-pointer shadow-md transition-all active:scale-[0.99] ${
          dutyInfo.hasDuty
            ? 'bg-[#17364D] text-white border border-[#244760]'
            : 'bg-[#5c1d1d] text-white border border-red-700 animate-pulse'
        }`}
      >
        <div className="flex items-center gap-3.5">
          <div className="w-11 h-11 rounded-full bg-white/10 flex items-center justify-center shrink-0">
            {dutyInfo.hasDuty ? (
              <UserCheck className="w-6 h-6 text-sky-200" />
            ) : (
              <AlertTriangle className="w-6 h-6 text-amber-300" />
            )}
          </div>
          <div>
            <p className="text-xs tracking-wider opacity-85 uppercase font-medium m-0">
              De garde aujourd'hui
            </p>
            <h1 className="text-2xl sm:text-3xl font-bold tracking-tight m-0 my-0.5 leading-tight">
              {dutyInfo.dutyName}
            </h1>
            <p className="text-xs sm:text-sm opacity-90 m-0 font-normal">
              {dutyInfo.hoursRange}
            </p>
          </div>
        </div>

        {/* Compteur global d'alertes */}
        <div
          className={`shrink-0 text-center px-3.5 py-2 rounded-xl border ${
            alerts.length > 0
              ? 'bg-[#421818] border-[#E05353] text-[#E05353]'
              : 'bg-[#183823] border-[#4EAA6A] text-[#4EAA6A]'
          }`}
        >
          <span className="block text-xl sm:text-2xl font-bold leading-tight">
            {alerts.length}
          </span>
          <span className="text-[11px] font-semibold tracking-wide uppercase">
            {alerts.length > 1 ? 'urgentes' : alerts.length === 1 ? 'urgente' : 'à jour'}
          </span>
        </div>
      </div>

      {/* 2. Zone d'alertes empilée scrollable (hauteur limitée, ne masque jamais les tuiles) */}
      <div className="flex flex-col gap-2">
        <div className="flex items-center justify-between px-1">
          <span className="text-xs font-bold uppercase tracking-wider text-[var(--ink-soft)]">
            Actions & Alertes prioritaires
          </span>
          <span className="text-xs text-[var(--ink-soft)]">
            {alerts.length} en attente
          </span>
        </div>

        <div className="max-h-[220px] overflow-y-auto pr-1 flex flex-col gap-2 rounded-xl">
          {alerts.length === 0 ? (
            <div className="py-6 px-4 text-center rounded-xl bg-[var(--surface)] border border-[var(--border)] text-[var(--ink-soft)] flex flex-col items-center justify-center gap-1.5">
              <CheckCircle2 className="w-6 h-6 text-[#4EAA6A]" />
              <p className="text-sm font-semibold m-0 text-[var(--ink)]">
                Toutes les tâches et soins prioritaires sont à jour !
              </p>
              <p className="text-xs m-0">Papa et maman sont bien accompagnés.</p>
            </div>
          ) : (
            alerts.map((item) => {
              // Rendu fidèle à la spécification et aux captures d'écran :
              // - Rouge foncé pour médicaments (danger)
              // - Orange / marron foncé pour tâches (warning)
              // - Vert foncé pour RDV et passages soignants (success)
              let cardBg = '';
              let textColor = '';
              let IconComponent = AlertTriangle;

              if (item.type === 'medicament') {
                cardBg = 'bg-[#3d1515] border-[#5a2222] hover:bg-[#4d1b1b]';
                textColor = 'text-[#F37070]';
                IconComponent = Pill;
              } else if (item.type === 'tache') {
                cardBg = 'bg-[#3b250e] border-[#573715] hover:bg-[#482d12]';
                textColor = 'text-[#F5B050]';
                IconComponent = item.titre.toLowerCase().includes('poubelle') ? Trash2 : ClipboardList;
              } else {
                cardBg = 'bg-[#153420] border-[#1e4b2e] hover:bg-[#1b4329]';
                textColor = 'text-[#62C882]';
                IconComponent = item.titre.toLowerCase().includes('infirmier') ? Stethoscope : Calendar;
              }

              return (
                <button
                  key={item.id}
                  onClick={() => onSelectAlert(item)}
                  className={`w-full text-left rounded-xl p-3.5 px-4 flex items-center justify-between gap-3 border shadow-sm transition-transform active:scale-[0.99] cursor-pointer ${cardBg}`}
                >
                  <div className="flex items-center gap-3 overflow-hidden">
                    <IconComponent className={`w-5 h-5 shrink-0 ${textColor}`} />
                    <div className="truncate">
                      <p className={`text-base font-semibold truncate m-0 ${textColor}`}>
                        {item.titre}
                      </p>
                      {item.details && (
                        <p className="text-xs opacity-80 text-[var(--ink-soft)] truncate m-0 mt-0.5">
                          {item.details}
                        </p>
                      )}
                    </div>
                  </div>
                  <ChevronRight className="w-4 h-4 shrink-0 text-white/40" />
                </button>
              );
            })
          )}
        </div>
      </div>

      {/* 3. Tuiles de résumé (2 colonnes) */}
      <div className="grid grid-cols-2 gap-2.5 mt-1">
        {/* Tuile Rendez-vous */}
        <button
          onClick={() => onNavigate('rdv')}
          className="bg-[var(--surface)] border border-[var(--border)] rounded-[18px] p-4 text-left cursor-pointer hover:border-[var(--ink-soft)] transition-colors flex flex-col justify-between min-h-[92px] active:scale-[0.99]"
        >
          <div className="flex items-center justify-between">
            <Calendar className="w-5 h-5 text-emerald-400" />
            <span className="text-[11px] font-bold uppercase text-[var(--ink-soft)]">
              {appointments.length} prévus
            </span>
          </div>
          <div>
            <h2 className="text-base font-bold text-[var(--ink)] m-0 leading-tight">
              Rendez-vous
            </h2>
            <p className="text-xs text-[var(--ink-soft)] m-0 mt-1 truncate">
              {nextRdv
                ? `${nextRdv.titre.split('—')[0]} — ${nextRdv.moment || nextRdv.date_debut.split(' ')[1] || 'bientôt'}`
                : 'Aucun RDV proche'}
            </p>
          </div>
        </button>

        {/* Tuile Tâches du jour */}
        <button
          onClick={() => onNavigate('taches')}
          className="bg-[var(--surface)] border border-[var(--border)] rounded-[18px] p-4 text-left cursor-pointer hover:border-[var(--ink-soft)] transition-colors flex flex-col justify-between min-h-[92px] active:scale-[0.99]"
        >
          <div className="flex items-center justify-between">
            <ClipboardList className="w-5 h-5 text-amber-400" />
            <span className="text-[11px] font-bold uppercase text-[var(--ink-soft)]">
              {pendingTasks.length} restantes
            </span>
          </div>
          <div>
            <h2 className="text-base font-bold text-[var(--ink)] m-0 leading-tight">
              Tâches du jour
            </h2>
            <p className="text-xs text-[var(--ink-soft)] m-0 mt-1 truncate">
              {careTasksCount > 0
                ? `${careTasksCount} soins prioritaires`
                : kindnessTasksCount > 0
                ? `${kindnessTasksCount} bienveillance / maison`
                : 'Toutes réalisées'}
            </p>
          </div>
        </button>
      </div>

      {/* 4. Carrousel secondaire non-urgent */}
      {carouselMessages.length > 0 && (
        <div className="border-t border-[var(--border)] pt-3 mt-1 text-center">
          <div className="flex items-center justify-center gap-2 text-xs sm:text-sm text-[var(--ink-soft)] min-h-[22px] px-2">
            <HeartHandshake className="w-4 h-4 text-pink-400/80 shrink-0" />
            <span className="italic truncate transition-all duration-500">
              "{carouselMessages[activeMsgIdx]}"
            </span>
          </div>
        </div>
      )}
    </div>
  );
};