"use client";
import { useEffect, useState } from "react";
import { Clock, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import signinStyles from "../signin/signin.module.css";

interface MaintenanceData {
  maintenance_message: string;
  scheduled_end_date: string;
}

interface MaintenancePageProps {
  maintenanceData: MaintenanceData;
}

export function MaintenancePage({ maintenanceData }: MaintenancePageProps) {
  const [timeRemaining, setTimeRemaining] = useState<string>("");
  const [isExpired, setIsExpired] = useState(false);

  useEffect(() => {
    if (!maintenanceData.scheduled_end_date) return;

    const interval = setInterval(() => {
      const now = new Date().getTime();
      const endTime = new Date(maintenanceData.scheduled_end_date).getTime();
      const difference = endTime - now;

      if (difference <= 0) {
        setIsExpired(true);
        setTimeRemaining("Maintenance expirée");
        clearInterval(interval);
      } else {
        const hours = Math.floor(difference / (1000 * 60 * 60));
        const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
        
        if (hours > 0) {
          setTimeRemaining(`${hours}h ${minutes}min`);
        } else {
          setTimeRemaining(`${minutes}min`);
        }
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [maintenanceData.scheduled_end_date]);

  const formatEndDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('fr-FR', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  const handleRefresh = () => {
    window.location.reload();
  };

  return (
    <div className={signinStyles.meshRoot}>
      <div className={signinStyles.simpleBg} aria-hidden="true" />

      {/* Contenu principal */}
      <div className="relative z-10 min-h-screen flex items-center justify-center p-4">
        <div className="w-full max-w-md">
        {/* Carte principale */}
        <div className="bg-white/80 backdrop-blur-lg border border-white/20 rounded-3xl p-8 shadow-2xl">
          {/* Logo central */}
          <div className="flex justify-center mb-6">
            <img
              src="/odentas-logo.png"
              alt="Logo Odentas"
              className="h-20 w-auto drop-shadow-lg"
              style={{ maxWidth: "80%" }}
            />
          </div>

          {/* Titre */}
          <div className="text-center mb-6">
            <div className="flex items-center justify-center gap-2 mb-2">
              <span className="inline-block w-4 h-4 rounded-full bg-orange-500 animate-pulse" aria-hidden="true" />
              <h1 className="text-2xl font-bold text-gray-800">
                Maintenance en cours
              </h1>
            </div>
            <p className="text-gray-600">
              L&apos;Espace Paie est temporairement indisponible
            </p>
          </div>

          {/* Message personnalisé */}
          <div className="bg-orange-50 border-l-4 border-orange-400 p-4 rounded-lg mb-6">
            <p className="text-orange-800 text-sm leading-relaxed">
              {maintenanceData.maintenance_message}
            </p>
          </div>

          {/* Informations de temps */}
          {maintenanceData.scheduled_end_date && (
            <div className="space-y-4 mb-6">
              {/* Date de fin prévue */}
              <div className="flex items-center gap-3 p-3 bg-blue-50 rounded-lg">
                <Clock size={18} className="text-blue-600 flex-shrink-0" />
                <div>
                  <p className="text-sm font-medium text-blue-800">
                    Retour prévu le
                  </p>
                  <p className="text-sm text-blue-700">
                    {formatEndDate(maintenanceData.scheduled_end_date)}
                  </p>
                </div>
              </div>

              {/* Temps restant */}
              {!isExpired && timeRemaining && (
                <div className="text-center">
                  <p className="text-sm text-gray-600 mb-1">Temps restant estimé</p>
                  <div className="inline-flex items-center gap-2 px-3 py-1 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-full text-sm font-medium">
                    <Clock size={14} />
                    {timeRemaining}
                  </div>
                </div>
              )}

              {/* Maintenance expirée */}
              {isExpired && (
                <div className="text-center p-3 bg-green-50 rounded-lg border border-green-200">
                  <p className="text-green-800 text-sm font-medium">
                    La maintenance devrait être terminée
                  </p>
                  <p className="text-green-700 text-xs mt-1">
                    Tentez de rafraîchir la page
                  </p>
                </div>
              )}
            </div>
          )}

          {/* Bouton de rafraîchissement */}
          <div className="text-center">
            <Button
              onClick={handleRefresh}
              className="bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-slate-900 px-6 py-3 rounded-xl font-medium shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
            >
              <RefreshCw size={16} className="mr-2" />
              Actualiser
            </Button>
          </div>

          {/* Footer */}
          <div className="text-center mt-6 pt-6 border-t border-gray-200">
            <p className="text-xs text-gray-500">
              Nous nous excusons pour la gêne occasionnée
            </p>
            {/* Lien d'accès staff discret */}
            <div className="mt-3">
              <a 
                href="/signin?staff_access=true" 
                className="text-xs text-gray-400 hover:text-gray-600 transition-colors duration-200"
              >
                Accès équipe
              </a>
            </div>
          </div>
        </div>

        {/* Indicateur retiré: suppression du texte "En maintenance" en bas */}
        </div>
      </div>
    </div>
  );
}