"use client";

import { useState, useEffect } from "react";
import { IoClose } from "react-icons/io5";

export default function ConstructionPopup() {
  const [isVisible, setIsVisible] = useState(false);
  const [shouldRender, setShouldRender] = useState(false);

  useEffect(() => {
    // Check if the popup has already been shown in this session
    const hasBeenShown = sessionStorage.getItem("construction_popup_shown");
    
    if (!hasBeenShown) {
      const timer = setTimeout(() => {
        setShouldRender(true);
        setIsVisible(true);
      }, 3000);

      return () => clearTimeout(timer);
    }
  }, []);

  const closePopup = () => {
    setIsVisible(false);
    // Add a delay to remove from DOM after fade out animation if needed
    // For now, we'll just hide it and set session storage
    sessionStorage.setItem("construction_popup_shown", "true");
    setTimeout(() => setShouldRender(false), 400); // match animation duration
  };

  if (!shouldRender) return null;

  return (
    <div className={`construction-overlay ${!isVisible ? 'fade-out' : ''}`}>
      <div className="construction-modal">
        <button 
          className="construction-close" 
          onClick={closePopup}
          aria-label="Close"
        >
          <IoClose />
        </button>
        
        <div className="construction-content">
          <span className="construction-icon">🚧</span>
          <h2 className="construction-title">Website Under Construction</h2>
          
          <p className="construction-text">
            We are currently updating our fencing product catalog to serve you better.
          </p>

          <div className="construction-prices">
            Prices may vary depending on materials, design, and quantity.
          </div>

          <p className="construction-contact">
            👉 For the latest pricing and customized quotes, please contact us.
          </p>

          <button className="construction-btn" onClick={closePopup}>
            Got it
          </button>
        </div>
      </div>
      
      <style jsx>{`
        .fade-out {
          opacity: 0;
          transition: opacity 0.4s ease-out;
          pointer-events: none;
        }
        .fade-out .construction-modal {
          transform: scale(0.95);
          transition: transform 0.4s ease-out;
        }
      `}</style>
    </div>
  );
}