import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { getToken, logout } from "../../auth"; // Importation de la fonction logout
import {
  Box,
  Typography,
  Grid,
  Card,
  CardContent,
  IconButton,
  Button,
} from "@mui/material";
import LogoutIcon from "@mui/icons-material/Logout"; // Icône de déconnexion
import ArticleIcon from "@mui/icons-material/Article";
import DashboardIcon from "@mui/icons-material/Dashboard";
import HomeIcon from "@mui/icons-material/Home"; // Icône pour la gestion page d'accueil

function Dashboard() {
  const navigate = useNavigate();
  const token = getToken();

  useEffect(() => {
    if (!token) {
      navigate("/admin/login"); // Redirige vers la page de connexion si non authentifié
    }
  }, [token, navigate]);

  const handleLogout = () => {
    logout(); // Déconnecte l'utilisateur
    navigate("/admin/login"); // Redirige vers la page de connexion
  };

  return (
    <Box
      sx={{
        minHeight: "100vh",
        backgroundImage: "url('https://source.unsplash.com/1600x900/?technology,office')",
        backgroundSize: "cover",
        backgroundPosition: "center",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "20px",
      }}
    >
      <Box
        sx={{
          width: "90%",
          maxWidth: "900px",
          padding: 4,
          backgroundColor: "rgba(255, 255, 255, 0.9)",
          borderRadius: 3,
          boxShadow: 6,
          textAlign: "center",
          position: "relative",
        }}
      >
        {/* Bouton de déconnexion placé en haut à gauche */}
        <Button
          variant="contained"
          color="error"
          startIcon={<LogoutIcon />}
          onClick={handleLogout}
          sx={{
            position: "absolute",
            top: 10,
            left: 10,
            backgroundColor: "#d32f2f",
            "&:hover": { backgroundColor: "#b71c1c" },
            fontSize: "0.875rem",
            padding: "6px 12px",
          }}
        />

        {/* En-tête */}
        <Typography variant="h4" sx={{ fontWeight: "bold", mb: 4, mt: 4 }}>
          <DashboardIcon sx={{ fontSize: 40, color: "#0e467f", mr: 1 }} />
          Tableau de Bord
        </Typography>

        {/* Cartes du Dashboard */}
        <Grid container spacing={3} justifyContent="center">
          {/* ✅ Gestion Page d'Accueil - Première carte */}
          <Grid item xs={12} sm={6}>
            <Card
              onClick={() => navigate("/admin/Gestion-Page-Accueil")}
              sx={{
                cursor: "pointer",
                textAlign: "center",
                padding: 2,
                transition: "0.3s",
                "&:hover": {
                  backgroundColor: "#0e467f",
                  color: "#ffffff",
                  transform: "scale(1.05)",
                  boxShadow: 8,
                },
                "&:hover svg": {
                  fill: "#ffffff",
                },
              }}
            >
              <CardContent>
                <IconButton sx={{ fontSize: 40, color: "#0e467f" }}>
                  <HomeIcon fontSize="inherit" />
                </IconButton>
                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
                  Gestion Page d'Accueil
                </Typography>
              </CardContent>
            </Card>
          </Grid>

          {/* ✅ Gérer les Articles - Deuxième carte */}
          <Grid item xs={12} sm={6}>
            <Card
              onClick={() => navigate("/admin/gestion-articles")}
              sx={{
                cursor: "pointer",
                textAlign: "center",
                padding: 2,
                transition: "0.3s",
                "&:hover": {
                  backgroundColor: "#0e467f",
                  color: "#ffffff",
                  transform: "scale(1.05)",
                  boxShadow: 8,
                },
                "&:hover svg": {
                  fill: "#ffffff",
                },
              }}
            >
              <CardContent>
                <IconButton sx={{ fontSize: 40, color: "#0e467f" }}>
                  <ArticleIcon fontSize="inherit" />
                </IconButton>
                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
                  Gérer les Articles
                </Typography>
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Box>
    </Box>
  );
}

export default Dashboard;