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 ContentBox = ({ box, index, pageType, starHovered, setStarHovered, opacity, translatedContent }) => (
  <Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%", position: 'relative' }}>
    {index === 0 && pageType === "filiale" && (
      <Box
        sx={{
          position: 'absolute',
          top: '-55px',
          left: '-45px',
          width: '180px',
          height: '180px',
          zIndex: 999,
          pointerEvents: 'none',
          '& *': { pointerEvents: 'none' },
          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' }
        }}
      >
        <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" />
        </svg>
        <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" />
        </svg>
        <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" />
        </svg>
        <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 }}>
          {translatedContent.showUsPhoto}
        </div>
        <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' }}>
          {translatedContent.selectSeedRate}
        </div>
      </Box>
    )}
    {index === 1 && pageType === "filiale" && (
      <Box
        sx={{
          position: 'absolute',
          bottom: '-45px',
          right: '-65px',
          width: '180px',
          height: '180px',
          zIndex: 999,
          pointerEvents: 'none',
          '& *': { pointerEvents: 'none' },
          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' }
        }}
      >
        <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" />
        </svg>
        <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" />
        </svg>
        <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" />
        </svg>
        <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' }}>
          {translatedContent.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 },
        }}
        onMouseEnter={index === 0 && pageType === "filiale" ? () => setStarHovered(true) : undefined}
        onMouseLeave={index === 0 && pageType === "filiale" ? () => setStarHovered(false) : undefined}
      >
        <Box sx={{ height: "100%", bgcolor: box.bgcolor, position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
          {opacity === 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>
);

const MainPageLayout = () => {
  const location = useLocation();
  const currentPath = location.pathname;
  const { t } = useTranslation();
  const [starHovered, setStarHovered] = React.useState(false);
  const translatedContent = {
    showUsPhoto: t('sections.showUsPhoto'),
    selectSeedRate: t('sections.selectSeedRate'),
    indoorSeason: t('sections.indoorSeason')
  };

  const isHome = currentPath === "/";
  const isAktionen = currentPath === "/aktionen";
  const isFiliale = currentPath === "/filiale";

  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);
  }, []);

  const getNavigationConfig = () => {
    if (isHome) return { leftNav: { text: t('navigation.aktionen'), link: "/aktionen" }, rightNav: { text: t('navigation.filiale'), link: "/filiale" } };
    if (isAktionen) return { leftNav: { text: t('navigation.filiale'), link: "/filiale" }, rightNav: { text: t('navigation.home'), link: "/" } };
    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.home') ,
    aktionen: t('titles.aktionen'),
    filiale: t('titles.filiale')
  };

  const allContentBoxes = {
    home: [
      { 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" }
    ],
    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.address1'), image: "/assets/images/filiale1.jpg", bgcolor: "#e1f0d3", link: "/filiale" },
      { title: t('sections.address2'), image: "/assets/images/filiale2.jpg", bgcolor: "#e8f5d6", link: "/filiale" }
    ]
  };

  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();
  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>
      <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 4, mt: 2, px: 0, transition: "all 0.3s ease-in-out", flexDirection: { xs: "column", sm: "row" } }}>
        <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>
        <Box sx={{ display: { xs: "flex", sm: "contents" }, width: { xs: "100%", sm: "auto" }, justifyContent: { xs: "space-between", sm: "initial" }, alignItems: "center" }}>
          <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;
              return (
                <Box key={navItem.key} component={Link} to={navItem.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>
          <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>
          <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;
              return (
                <Box key={navItem.key} component={Link} to={navItem.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>
      <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) => (
            <ContentBox
              key={`${pageType}-${index}`}
              box={box}
              index={index}
              pageType={pageType}
              starHovered={starHovered}
              setStarHovered={setStarHovered}
              opacity={getOpacity(pageType)}
              translatedContent={translatedContent}
            />
            ))}
          </Grid>
        ))}
      </Box>
      <SharedCarousel />
    </Container>
  );
};

export default MainPageLayout;