import React from "react";
import { useLocation } from "react-router-dom";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import Grid from "@mui/material/Grid";
import ChevronLeft from "@mui/icons-material/ChevronLeft";
import ChevronRight from "@mui/icons-material/ChevronRight";
import { Link } from "react-router-dom";
import SharedCarousel from "./SharedCarousel.js";
import { getCombinedAnimatedBorderStyles } from "../utils/animatedBorderStyles.js";
import { useTranslation } from 'react-i18next';

const MainPageLayout = () => {
  const location = useLocation();
  const currentPath = location.pathname;
  const { t } = useTranslation();
  const [starHovered, setStarHovered] = React.useState(false);

  // Determine which page we're on
  const isHome = currentPath === "/";
  const isAktionen = currentPath === "/aktionen";
  const isFiliale = currentPath === "/filiale";

  // Add CSS animations for rotating stars
  React.useEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      @keyframes rotateClockwise {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
      
      @keyframes rotateCounterClockwise {
        from { transform: rotate(0deg); }
        to { transform: rotate(-360deg); }
      }
      
      .star-rotate-slow-cw {
        animation: rotateClockwise 60s linear infinite;
      }
      
      .star-rotate-slow-ccw {
        animation: rotateCounterClockwise 45s linear infinite;
      }
      
      .star-rotate-medium-cw {
        animation: rotateClockwise 30s linear infinite;
      }
    `;
    document.head.appendChild(style);
    
    return () => {
      document.head.removeChild(style);
    };
  }, []);

  // Get navigation config based on current page
  const getNavigationConfig = () => {
    if (isHome) {
      return {
        leftNav: { text: t('navigation.aktionen'), link: "/aktionen" },
        rightNav: { text: t('navigation.filiale'), link: "/filiale" }
      };
    } else if (isAktionen) {
      return {
        leftNav: { text: t('navigation.filiale'), link: "/filiale" },
        rightNav: { text: t('navigation.home'), link: "/" }
      };
    } else if (isFiliale) {
      return {
        leftNav: { text: t('navigation.home'), link: "/" },
        rightNav: { text: t('navigation.aktionen'), link: "/aktionen" }
      };
    }
    return { leftNav: null, rightNav: null };
  };

  const allTitles = {
    home: t('titles.filiale'),
    aktionen: t('titles.aktionen'), 
    filiale: t('titles.home')
  };

  // Define all content boxes for layered rendering
  const allContentBoxes = {
    home: [
      {
        title: t('sections.address1'),
        image: "/assets/images/filiale1.jpg",
        bgcolor: "#e1f0d3",
        link: "/filiale"
      },
      {
        title: t('sections.address2'),
        image: "/assets/images/filiale2.jpg",
        bgcolor: "#e8f5d6",
        link: "/filiale"
      }
    ],
    aktionen: [
      {
        title: t('sections.oilPress'),
        image: "/assets/images/presse.jpg",
        bgcolor: "#e1f0d3",
        link: "/presseverleih"
      },
      {
        title: t('sections.thcTest'),
        image: "/assets/images/purpl.jpg",
        bgcolor: "#e8f5d6",
        link: "/thc-test"
      }
    ],
    filiale: [
      {
        title: t('sections.seeds'),
        image: "/assets/images/seeds.jpg",
        bgcolor: "#e1f0d3",
        link: "/Kategorie/Seeds"
      },
      {
        title: t('sections.stecklinge'),
        image: "/assets/images/cutlings.jpg",
        bgcolor: "#e8f5d6",
        link: "/Kategorie/Stecklinge"
      }
    ]
  };

  // Get opacity for each page layer
  const getOpacity = (pageType) => {
    if (pageType === "home" && isHome) return 1;
    if (pageType === "aktionen" && isAktionen) return 1;
    if (pageType === "filiale" && isFiliale) return 1;
    return 0;
  };

  const navConfig = getNavigationConfig();

  // Navigation text mapping for translation
  const navTexts = [
    { key: 'aktionen', text: t('navigation.aktionen'), link: '/aktionen' },
    { key: 'filiale', text: t('navigation.filiale'), link: '/filiale' },
    { key: 'home', text: t('navigation.home'), link: '/' }
  ];

  return (
    <Container maxWidth="lg" sx={{ py: 2 }}>
      <style>{getCombinedAnimatedBorderStyles(['seeds', 'cutlings'])}</style>
      
      {/* Main Navigation Header */}
      <Box sx={{ 
        display: "flex", 
        alignItems: "center", 
        justifyContent: "space-between", 
        mb: 4,
        mt: 2,
        px: 0,
        transition: "all 0.3s ease-in-out",
        // Portrait phone: stack title above navigation
        flexDirection: { 
          xs: "column", 
          sm: "row" 
        }
      }}>
        {/* Title for portrait phones - shown first */}
        <Box sx={{ 
          display: { xs: "block", sm: "none" },
          mb: { xs: 2, sm: 0 },
          width: "100%",
          textAlign: "center",
          position: "relative"
        }}>
          {Object.entries(allTitles).map(([pageType, title]) => (
            <Typography
              key={pageType}
              variant="h3"
              component="h1"
              sx={{
                fontFamily: "SwashingtonCP",
                fontSize: { xs: "2.125rem", sm: "2.125rem", md: "3rem" },
                textAlign: "center",
                color: "primary.main",
                textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)",
                transition: "opacity 0.5s ease-in-out",
                opacity: getOpacity(pageType),
                position: pageType === "home" ? "relative" : "absolute",
                top: pageType !== "home" ? 0 : "auto",
                left: pageType !== "home" ? 0 : "auto",
                transform: "none",
                width: "100%",
                pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none",
                lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
                wordWrap: "break-word",
                hyphens: "auto"
              }}
            >
              {title}
            </Typography>
          ))}
        </Box>

        {/* Navigation container for portrait phones */}
        <Box sx={{ 
          display: { xs: "flex", sm: "contents" },
          width: { xs: "100%", sm: "auto" },
          justifyContent: { xs: "space-between", sm: "initial" },
          alignItems: "center"
        }}>
          {/* Left Navigation - Layered rendering */}
          <Box sx={{ 
            display: "flex", 
            alignItems: "center", 
            flexShrink: 0,
            justifyContent: "flex-start",
            position: "relative",
            mr: { xs: 0, sm: 2 }
          }}>
            {navTexts.map((navItem, index) => {
              const isActive = navConfig.leftNav && navConfig.leftNav.text === navItem.text;
              const link = navItem.link;
              
              return (
                <Box
                  key={navItem.key}
                  component={Link}
                  to={link}
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    textDecoration: "none",
                    color: "inherit",
                    transition: "all 0.3s ease",
                    opacity: isActive ? 1 : 0,
                    position: index === 0 ? "relative" : "absolute",
                    left: index !== 0 ? 0 : "auto",
                    pointerEvents: isActive ? "auto" : "none",
                    "&:hover": {
                      transform: "translateX(-5px)",
                      color: "primary.main"
                    }
                  }}
                >
                  <ChevronLeft sx={{ fontSize: "2rem", mr: 1 }} />
                  <Typography
                    sx={{
                      fontFamily: "SwashingtonCP",
                      fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },
                      textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
                      lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
                      whiteSpace: "nowrap"
                    }}
                  >
                    {navItem.text}
                  </Typography>
                </Box>
              );
            })}
          </Box>

          {/* Center Title - Layered rendering - Hidden on portrait phones, shown on larger screens */}
          <Box sx={{ 
            flex: 1, 
            display: { xs: "none", sm: "flex" },
            justifyContent: "center",
            alignItems: "center",
            px: 0,
            position: "relative",
            minWidth: 0
          }}>
            {Object.entries(allTitles).map(([pageType, title]) => (
              <Typography
                key={pageType}
                variant="h3"
                component="h1"
                sx={{
                  fontFamily: "SwashingtonCP",
                  fontSize: { xs: "2.125rem", sm: "2.125rem", md: "3rem" },
                  textAlign: "center",
                  color: "primary.main",
                  textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)",
                  transition: "opacity 0.5s ease-in-out",
                  opacity: getOpacity(pageType),
                  position: pageType === "home" ? "relative" : "absolute",
                  top: pageType !== "home" ? "50%" : "auto",
                  left: pageType !== "home" ? "50%" : "auto",
                  transform: pageType !== "home" ? "translate(-50%, -50%)" : "none",
                  width: "100%",
                  pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none",
                  lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
                  wordWrap: "break-word",
                  hyphens: "auto"
                }}
              >
                {title}
              </Typography>
            ))}
          </Box>

          {/* Right Navigation - Layered rendering */}
          <Box sx={{ 
            display: "flex", 
            alignItems: "center", 
            flexShrink: 0,
            justifyContent: "flex-end",
            position: "relative",
            ml: { xs: 0, sm: 2 }
          }}>
            {navTexts.map((navItem, index) => {
              const isActive = navConfig.rightNav && navConfig.rightNav.text === navItem.text;
              const link = navItem.link;
              
              return (
                <Box
                  key={navItem.key}
                  component={Link}
                  to={link}
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    textDecoration: "none",
                    color: "inherit",
                    transition: "all 0.3s ease",
                    opacity: isActive ? 1 : 0,
                    position: index === 0 ? "relative" : "absolute",
                    right: index !== 0 ? 0 : "auto",
                    pointerEvents: isActive ? "auto" : "none",
                    "&:hover": {
                      transform: "translateX(5px)",
                      color: "primary.main"
                    }
                  }}
                >
                  <Typography
                    sx={{
                      fontFamily: "SwashingtonCP",
                      fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },  
                      textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
                      lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
                      whiteSpace: "nowrap"
                    }}
                  >
                    {navItem.text}
                  </Typography>
                  <ChevronRight sx={{ fontSize: "2rem", ml: 1 }} />
                </Box>
              );
            })}
          </Box>
        </Box>
      </Box>

      {/* Content Boxes - Layered rendering */}
      <Box sx={{ position: "relative", mb: 4 }}>
        {Object.entries(allContentBoxes).map(([pageType, contentBoxes]) => (
          <Grid 
            key={pageType}
            container 
            spacing={0} 
            sx={{ 
              transition: "opacity 0.5s ease-in-out",
              opacity: getOpacity(pageType),
              position: pageType === "home" ? "relative" : "absolute",
              top: 0,
              left: 0,
              width: "100%",
              pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none"
            }}
          >
            {contentBoxes.map((box, index) => (
              <Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%", position: 'relative' }}>
                {/* Multi-pointed star for seeds box - moved to Grid level */}
                {index === 0 && pageType === "filiale" && (
                  <Box
                    sx={{
                      position: 'absolute',
                      top: '-55px',
                      left: '-45px',
                      width: '180px',
                      height: '180px',
                      zIndex: 999,
                      pointerEvents: 'auto',
                      cursor: 'pointer',
                      filter: 'drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.4))',
                      display: { xs: 'none', sm: 'block' }
                    }}
                    onMouseEnter={() => setStarHovered(true)}
                    onMouseLeave={() => setStarHovered(false)}
                  >
                    {/* Background star - slightly larger and rotated */}
                    <svg 
                      viewBox="0 0 60 60" 
                      width="168" 
                      height="168"
                      className="star-rotate-slow-cw"
                      style={{
                        position: 'absolute',
                        top: '-9px',
                        left: '-9px',
                        transform: 'rotate(20deg)'
                      }}
                    >
                      <polygon 
                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
                        fill="#B8860B" 
                        stroke="none"
                      />
                    </svg>
                    
                    {/* Middle star - medium size with different rotation */}
                    <svg 
                      viewBox="0 0 60 60" 
                      width="159" 
                      height="159"
                      className="star-rotate-slow-ccw"
                      style={{
                        position: 'absolute',
                        top: '-4.5px',
                        left: '-4.5px',
                        transform: 'rotate(-25deg)'
                      }}
                    >
                      <polygon 
                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
                        fill="#DAA520" 
                        stroke="none"
                      />
                    </svg>
                    
                    {/* Foreground star - main star with text */}
                    <svg 
                      viewBox="0 0 60 60" 
                      width="150" 
                      height="150"
                      className="star-rotate-medium-cw"
                    >
                      <polygon 
                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
                        fill="#FFD700" 
                        stroke="none"
                      />
                    </svg>
                    
                    {/* Text positioned in the center of the star */}
                    <div
                      style={{
                        position: 'absolute',
                        top: '45%',
                        left: '43%',
                        transform: 'translate(-50%, -50%) rotate(-10deg)',
                        color: 'white',
                        fontWeight: '900',
                        fontSize: '20px',
                        textShadow: '0px 3px 6px rgba(0,0,0,0.5)',
                        zIndex: 1000,
                        textAlign: 'center',
                        lineHeight: '1.1',
                        width: '135px',
                        transition: 'opacity 0.3s ease',
                        opacity: starHovered ? 0 : 1
                      }}
                    >
                      {t('sections.showUsPhoto')}
                    </div>
                    
                    {/* Hover text */}
                    <div
                      style={{
                        position: 'absolute',
                        top: '45%',
                        left: '43%',
                        transform: 'translate(-50%, -50%) rotate(-10deg)',
                        color: 'white',
                        fontWeight: '900',
                        fontSize: '20px',
                        textShadow: '0px 3px 6px rgba(0,0,0,0.5)',
                        zIndex: 1000,
                        textAlign: 'center',
                        lineHeight: '1.1',
                        width: '135px',
                        opacity: starHovered ? 1 : 0,
                        transition: 'opacity 0.3s ease'
                      }}
                    >
                      {t('sections.selectSeedRate')}
                    </div>
                  </Box>
                )}
                
                {/* Multi-pointed star for stecklinge box - bottom right */}
                {index === 1 && pageType === "filiale" && (
                  <Box
                    sx={{
                      position: 'absolute',
                      bottom: '-45px',
                      right: '-65px',
                      width: '180px',
                      height: '180px',
                      zIndex: 999,
                      pointerEvents: 'auto',
                      cursor: 'pointer',
                      filter: 'drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(175, 238, 238, 0.8)) drop-shadow(0 0 40px rgba(175, 238, 238, 0.4))',
                      display: { xs: 'none', sm: 'block' }
                    }}
                  >
                    {/* Background star - slightly larger and rotated */}
                    <svg 
                      viewBox="0 0 60 60" 
                      width="168" 
                      height="168"
                      className="star-rotate-slow-ccw"
                      style={{
                        position: 'absolute',
                        top: '-9px',
                        left: '-9px',
                        transform: 'rotate(20deg)'
                      }}
                    >
                      <polygon 
                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
                        fill="#5F9EA0" 
                        stroke="none"
                      />
                    </svg>
                    
                    {/* Middle star - medium size with different rotation */}
                    <svg 
                      viewBox="0 0 60 60" 
                      width="159" 
                      height="159"
                      className="star-rotate-medium-cw"
                      style={{
                        position: 'absolute',
                        top: '-4.5px',
                        left: '-4.5px',
                        transform: 'rotate(-25deg)'
                      }}
                    >
                      <polygon 
                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
                        fill="#7FCDCD" 
                        stroke="none"
                      />
                    </svg>
                    
                    {/* Foreground star - main star with text */}
                    <svg 
                      viewBox="0 0 60 60" 
                      width="150" 
                      height="150"
                      className="star-rotate-slow-cw"
                    >
                      <polygon 
                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
                        fill="#AFEEEE" 
                        stroke="none"
                      />
                    </svg>
                    
                    {/* Text positioned in the center of the star */}
                    <div
                      style={{
                        position: 'absolute',
                        top: '42%',
                        left: '45%',
                        transform: 'translate(-50%, -50%) rotate(10deg)',
                        color: 'white',
                        fontWeight: '900',
                        fontSize: '20px',
                        textShadow: '0px 3px 6px rgba(0,0,0,0.5)',
                        zIndex: 1000,
                        textAlign: 'center',
                        lineHeight: '1.1',
                        width: '135px'
                      }}
                    >
                      {t('sections.indoorSeason')}
                    </div>
                  </Box>
                )}
                
                <div className={`animated-border-card ${index === 0 ? 'seeds-card' : 'cutlings-card'}`}>
                  <Paper
                    component={Link}
                    to={box.link}
                    sx={{
                      p: 0,
                      textDecoration: "none",
                      color: "text.primary",
                      borderRadius: 2,
                      overflow: "hidden",
                      height: { xs: 150, sm: 200, md: 300 },
                      display: "flex",
                      flexDirection: "column",
                      boxShadow: 10,
                      transition: "all 0.3s ease",
                      "&:hover": {
                        transform: "translateY(-5px)",
                        boxShadow: 20,
                      },
                    }}
                  >
                    <Box
                      sx={{
                        height: "100%",
                        bgcolor: box.bgcolor,
                        position: "relative",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                      }}
                    >
                      {/* Image loaded only when needed */}
                      {getOpacity(pageType) === 1 && (
                        <img
                          src={box.image}
                          alt={box.title}
                          style={{
                            maxWidth: "100%",
                            maxHeight: "100%",
                            objectFit: "contain",
                            position: "absolute",
                            top: "50%",
                            left: "50%",
                            transform: "translate(-50%, -50%)",
                          }}
                        />
                      )}
                      <Box
                        sx={{
                          position: "absolute",
                          bottom: 0,
                          left: 0,
                          right: 0,
                          bgcolor: "rgba(27, 94, 32, 0.8)",
                          p: 1,
                        }}
                      >
                        <Typography
                          sx={{
                            fontSize: "1.6rem",
                            color: "white",
                            fontFamily: "SwashingtonCP",
                          }}
                        >
                          {box.title}
                        </Typography>
                      </Box>
                    </Box>
                  </Paper>
                </div>
              </Grid>
            ))}
          </Grid>
        ))}
      </Box>

      {/* Shared Carousel */}
      <SharedCarousel />
    </Container>
  );
};

export default MainPageLayout;