import React from 'react';
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import ChevronLeft from "@mui/icons-material/ChevronLeft";
import ChevronRight from "@mui/icons-material/ChevronRight";
import CategoryBox from "./CategoryBox.js";
import ProductCarousel from "./ProductCarousel.js";
import { withTranslation } from 'react-i18next';
import { withLanguage } from '../i18n/withTranslation.js';

const ITEM_WIDTH = 130 + 16; // 130px width + 16px gap
const AUTO_SCROLL_SPEED = 0.5; // px per frame (~60fps, so ~30px/sec)
const AUTOSCROLL_RESTART_DELAY = 5000; // 5 seconds of inactivity before restarting autoscroll
const SCROLLBAR_FLASH_DURATION = 3000; // 3 seconds to show the virtual scrollbar

class SharedCarousel extends React.Component {
  _isMounted = false;
  categories = [];
  originalCategories = [];
  animationFrame = null;
  autoScrollActive = true;
  translateX = 0;
  inactivityTimer = null;
  scrollbarTimer = null;

  constructor(props) {
    super(props);
    const { i18n } = props;
    
    // Don't load categories in constructor - will be loaded in componentDidMount with correct language
    this.state = {
      categories: [],
      currentLanguage: (i18n && i18n.language) || 'de',
      showScrollbar: false,
    };

    this.carouselTrackRef = React.createRef();
  }

  componentDidMount() {
    this._isMounted = true;
    const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n.language;
    
    // ALWAYS reload categories to ensure correct language
    console.log("SharedCarousel componentDidMount: ALWAYS RELOADING categories for language", currentLanguage);
    window.categoryService.get(209, currentLanguage).then((response) => {
      console.log("SharedCarousel categoryService.get response for language '" + currentLanguage + "':", response);
      if (this._isMounted && response.children && response.children.length > 0) {
        console.log("SharedCarousel: Setting categories with", response.children.length, "items");
        console.log("SharedCarousel: First category name:", response.children[0]?.name);
        this.originalCategories = response.children;
        // Duplicate for seamless looping
        this.categories = [...response.children, ...response.children];
        this.setState({ categories: this.categories });
        this.startAutoScroll();
      }
    });
  }

  componentDidUpdate(prevProps) {
    console.log("componentDidUpdate", prevProps.languageContext?.currentLanguage, this.props.languageContext?.currentLanguage);
    if(prevProps.languageContext?.currentLanguage !== this.props.languageContext?.currentLanguage) {
      this.setState({ categories: [] },() => {
        window.categoryService.get(209,this.props.languageContext?.currentLanguage || this.props.i18n.language).then((response) => {
          console.log("response", response);
          if (response.children && response.children.length > 0) {
            this.originalCategories = response.children;  
            this.categories = [...response.children, ...response.children];
            this.setState({ categories: this.categories });
            this.startAutoScroll();
          }
        });
      });
    }
  }

  componentWillUnmount() {
    this._isMounted = false;
    this.stopAutoScroll();
    this.clearInactivityTimer();
    this.clearScrollbarTimer();
  }

  startAutoScroll = () => {
    this.autoScrollActive = true;
    if (!this.animationFrame) {
      this.animationFrame = requestAnimationFrame(this.handleAutoScroll);
    }
  };

  stopAutoScroll = () => {
    this.autoScrollActive = false;
    if (this.animationFrame) {
      cancelAnimationFrame(this.animationFrame);
      this.animationFrame = null;
    }
  };

  clearInactivityTimer = () => {
    if (this.inactivityTimer) {
      clearTimeout(this.inactivityTimer);
      this.inactivityTimer = null;
    }
  };

  clearScrollbarTimer = () => {
    if (this.scrollbarTimer) {
      clearTimeout(this.scrollbarTimer);
      this.scrollbarTimer = null;
    }
  };

  startInactivityTimer = () => {
    this.clearInactivityTimer();
    this.inactivityTimer = setTimeout(() => {
      if (this._isMounted) {
        this.startAutoScroll();
      }
    }, AUTOSCROLL_RESTART_DELAY);
  };

  showScrollbarFlash = () => {
    this.clearScrollbarTimer();
    this.setState({ showScrollbar: true });
    
    this.scrollbarTimer = setTimeout(() => {
      if (this._isMounted) {
        this.setState({ showScrollbar: false });
      }
    }, SCROLLBAR_FLASH_DURATION);
  };

  handleAutoScroll = () => {
    if (!this.autoScrollActive || this.originalCategories.length === 0) return;
    
    this.translateX -= AUTO_SCROLL_SPEED;
    this.updateTrackTransform();

    const originalItemCount = this.originalCategories.length;
    const maxScroll = ITEM_WIDTH * originalItemCount;

    // Check if we've scrolled past the first set of items
    if (Math.abs(this.translateX) >= maxScroll) {
      // Reset to beginning seamlessly
      this.translateX = 0;
      this.updateTrackTransform();
    }

    this.animationFrame = requestAnimationFrame(this.handleAutoScroll);
  };

  updateTrackTransform = () => {
    if (this.carouselTrackRef.current) {
      this.carouselTrackRef.current.style.transform = `translateX(${this.translateX}px)`;
    }
  };

  handleLeftClick = () => {
    this.stopAutoScroll();
    this.scrollBy(1);
    this.showScrollbarFlash();
    this.startInactivityTimer();
  };

  handleRightClick = () => {
    this.stopAutoScroll();
    this.scrollBy(-1);
    this.showScrollbarFlash();
    this.startInactivityTimer();
  };

  scrollBy = (direction) => {
    if (this.originalCategories.length === 0) return;
    
    // direction: 1 = left (scroll content right), -1 = right (scroll content left)
    const originalItemCount = this.originalCategories.length;
    const maxScroll = ITEM_WIDTH * originalItemCount;

    this.translateX += direction * ITEM_WIDTH;

    // Handle wrap-around when scrolling left (positive translateX)
    if (this.translateX > 0) {
      this.translateX = -(maxScroll - ITEM_WIDTH);
    }
    // Handle wrap-around when scrolling right (negative translateX beyond limit)
    else if (Math.abs(this.translateX) >= maxScroll) {
      this.translateX = 0;
    }

    this.updateTrackTransform();
    
    // Force scrollbar to update immediately after wrap-around
    if (this.state.showScrollbar) {
      this.forceUpdate();
    }
  };

  renderVirtualScrollbar = () => {
    if (!this.state.showScrollbar || this.originalCategories.length === 0) {
      return null;
    }

    const originalItemCount = this.originalCategories.length;
    const viewportWidth = 1080; // carousel container max-width
    const itemsInView = Math.floor(viewportWidth / ITEM_WIDTH);
    
    // Calculate which item is currently at the left edge (first visible)
    // Map translateX directly to item index using the same logic as scrollBy
    let currentItemIndex;
    
    if (this.translateX === 0) {
      // At the beginning - item 0 is visible
      currentItemIndex = 0;
    } else if (this.translateX > 0) {
      // Wrapped to show end items (this happens when scrolling left past beginning)
      const maxScroll = ITEM_WIDTH * originalItemCount;
      const effectivePosition = maxScroll + this.translateX;
      currentItemIndex = Math.floor(effectivePosition / ITEM_WIDTH);
    } else {
      // Normal negative scrolling - calculate which item is at left edge
      currentItemIndex = Math.floor(Math.abs(this.translateX) / ITEM_WIDTH);
    }
    
    // Ensure we stay within bounds
    currentItemIndex = Math.max(0, Math.min(currentItemIndex, originalItemCount - 1));
    
    // Calculate scrollbar position: 0% when item 0 is first visible, 100% when last item is first visible
    const lastPossibleFirstItem = Math.max(0, originalItemCount - itemsInView);
    const thumbPosition = lastPossibleFirstItem > 0 ? Math.min((currentItemIndex / lastPossibleFirstItem) * 100, 100) : 0;

    return (
      <div
        className="virtual-scrollbar"
        style={{
          position: 'absolute',
          bottom: '5px',
          left: '50%',
          transform: 'translateX(-50%)',
          width: '200px',
          height: '4px',
          backgroundColor: 'rgba(0, 0, 0, 0.1)',
          borderRadius: '2px',
          zIndex: 1000,
          opacity: this.state.showScrollbar ? 1 : 0,
          transition: 'opacity 0.3s ease-in-out'
        }}
      >
        <div
          className="scrollbar-thumb"
          style={{
            position: 'absolute',
            top: '0',
            left: `${thumbPosition}%`,
            width: '20px',
            height: '4px',
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            borderRadius: '2px',
            transform: 'translateX(-50%)',
            transition: 'left 0.2s ease-out'
          }}
        />
      </div>
    );
  };

  render() {
    const { t } = this.props;
    const { categories } = this.state;

    if(!categories || categories.length === 0) {
      return null;
    }

    return (
      <Box sx={{ mt: 3 }}>
        <Typography
          variant="h4"
          component="h1"
          sx={{
            mb: 2,
            fontFamily: "SwashingtonCP",
            color: "primary.main",
            textAlign: "center",
            textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)"
          }}
        >
          {t('navigation.categories')}
        </Typography>

        <div
          className="carousel-wrapper"
          style={{
            position: 'relative',
            overflow: 'hidden',
            width: '100%',
            maxWidth: '1200px',
            margin: '0 auto',
            padding: '0 20px',
            boxSizing: 'border-box'
          }}
        >
          {/* Left Arrow */}
          <IconButton
            aria-label="Vorherige Kategorien anzeigen"
            onClick={this.handleLeftClick}
            style={{
              position: 'absolute',
              top: '50%',
              left: '8px',
              transform: 'translateY(-50%)',
              zIndex: 1200,
              backgroundColor: 'rgba(255, 255, 255, 0.9)',
              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
              width: '48px',
              height: '48px',
              borderRadius: '50%'
            }}
          >
            <ChevronLeft />
          </IconButton>

          {/* Right Arrow */}
          <IconButton
            aria-label="Nächste Kategorien anzeigen"
            onClick={this.handleRightClick}
            style={{
              position: 'absolute',
              top: '50%',
              right: '8px',
              transform: 'translateY(-50%)',
              zIndex: 1200,
              backgroundColor: 'rgba(255, 255, 255, 0.9)',
              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
              width: '48px',
              height: '48px',
              borderRadius: '50%'
            }}
          >
            <ChevronRight />
          </IconButton>

          <div
            className="carousel-container"
            style={{
              position: 'relative',
              overflow: 'hidden',
              padding: '20px 0',
              width: '100%',
              maxWidth: '1080px',
              margin: '0 auto',
              zIndex: 1,
              boxSizing: 'border-box'
            }}
          >
            <div
              className="home-carousel-track"
              ref={this.carouselTrackRef}
              style={{
                display: 'flex',
                gap: '16px',
                transition: 'none',
                alignItems: 'flex-start',
                width: 'fit-content',
                overflow: 'visible',
                position: 'relative',
                transform: 'translateX(0px)',
                margin: '0 auto'
              }}
            >
              {categories.map((category, index) => (
                <div
                  key={`${category.id}-${index}`}
                  className="carousel-item"
                  style={{
                    flex: '0 0 130px',
                    width: '130px',
                    maxWidth: '130px',
                    minWidth: '130px',
                    height: '130px',
                    maxHeight: '130px',
                    minHeight: '130px',
                    boxSizing: 'border-box',
                    position: 'relative'
                  }}
                >
                  <CategoryBox
                    id={category.id}
                    name={category.name}
                    seoName={category.seoName}
                    image={category.image}
                    bgcolor={category.bgcolor}
                  />
                </div>
              ))}
            </div>
            
            {/* Virtual Scrollbar */}
            {this.renderVirtualScrollbar()}
          </div>
        </div>

        {/* Product Carousel for "neu" category */}
        <ProductCarousel categoryId="neu" />
      </Box>
    );
  }
}

export default withTranslation()(withLanguage(SharedCarousel));