"use client";

import React, { useState } from "react";
import { usePathname } from "next/navigation";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { motion, AnimatePresence, easeOut, easeIn } from "framer-motion";
import { Container, Navbar, Nav, NavDropdown, Row, Col } from "react-bootstrap";

const serviceItems = [
  {
    label: "AI Services",
    href: "/services/ai-services",
    img: "https://media.vensysco.com/ai-services-e2.webp",
  },
  {
    label: "Data Center",
    href: "/services/data-center",
    img: "https://media.vensysco.com/data-center-e2.webp",
  },
  {
    label: "Cloud",
    href: "/services/cloud-solutions",
    img: "https://media.vensysco.com/cloud-solutions-e2.webp",
  },
  {
    label: "Integration",
    href: "/services/system-integration",
    img: "https://media.vensysco.com/system-integration-e2.webp",
  },
  {
    label: "Streaming",
    href: "/services/streaming-solutions",
    img: "https://media.vensysco.com/streaming-solutions-e2.webp",
  },
  {
    label: "AI Surveillance",
    href: "/services/ai-surveillance",
    img: "https://media.vensysco.com/ai-surveillance-e2.webp",
  },
  //{ label: "Aviation Security", href: "/services/aviation-security-safety", img: "https://media.vensysco.com/aviation-e2.webp" },
];
const examInfra = [
  {
    label: "Infrastructure",
    href: "/services/examination/infrastructure",
    img: "https://media.vensysco.com/infrastructure-e4.webp",
  },
  {
    label: "Offline Exam",
    href: "/services/examination/offline-exam",
    img: "https://media.vensysco.com/offline-exam-e2.webp",
  },
  {
    label: "Online Exam",
    href: "/services/examination/online-exam",
    img: "https://media.vensysco.com/online-exam-e2.webp",
  },
  {
    label: "Tab-based Exam",
    href: "/services/examination/tab-based-exam",
    img: "https://media.vensysco.com/tab-based-exam-e2.webp",
  },
  {
    label: "Typing TEST",
    href: "/services/examination/typing-test",
    img: "https://media.vensysco.com/typing-test-e2.webp",
  },
  {
    label: "(OSM) On Screen Marking",
    href: "/services/examination/on-screen-marking",
    img: "https://media.vensysco.com/on-screen-marking-e3.webp",
  },
  {
    label: "Venue Management System",
    href: "/services/examination/venue-management-system",
    img: "https://media.vensysco.com/vms-e2.webp",
  },
];
const examSecurity = [
  {
    label: "Security Solutions",
    href: "/services/examination/security-solutions",
    img: "https://media.vensysco.com/security-solutions-e2.webp",
  },
  {
    label: "CCTV Surveillance",
    href: "/services/examination/cctv-surveillance",
    img: "https://media.vensysco.com/cctv-surveillance-e2.webp",
  },
  {
    label: "TEMP",
    href: "/services/examination/temp",
    img: "https://media.vensysco.com/temp-e6.webp",
  },
  {
    label: "LIVE CCTV",
    href: "/services/examination/live-cctv",
    img: "https://media.vensysco.com/live-cctv-e2.webp",
  },
  {
    label: "AI-Based CCTV",
    href: "/services/examination/ai-based-cctv",
    img: "https://media.vensysco.com/ai-based-cctv-e2.webp",
  },
];
const examStationery = [
  {
    label: "Stationery & Logistic",
    href: "/services/examination/stationery-logistic",
    img: "https://media.vensysco.com/stationery-logistic-e2.webp",
  },
  {
    label: "QP Logistics",
    href: "/services/examination/qp-logistics",
    img: "https://media.vensysco.com/qp-logistics-e2.webp",
  },
  {
    label: "Stationery Supply & Logistics",
    href: "/services/examination/stationery-supply-logistics",
    img: "https://media.vensysco.com/stationery-supply-logistics-e2.webp",
  },
  {
    label: "GPS Enabled Lock",
    href: "/services/examination/gps-enabled-lock",
    img: "https://media.vensysco.com/gps-enabled-lock-e2.webp",
  },
];
const examBiometric = [
  {
    label: "Biometric",
    href: "/services/examination/biometric",
    img: "https://media.vensysco.com/biometric-e2.webp",
  },
  {
    label: "Thumb-based Biometric",
    href: "/services/examination/thumb-based-biometric",
    img: "https://media.vensysco.com/thumb-based-biometric-e2.webp",
  },
  {
    label: "Facial Biometrics",
    href: "/services/examination/facial-biometrics",
    img: "https://media.vensysco.com/facial-biometrics-e2.webp",
  },
  {
    label: "IRIS Biometrics",
    href: "/services/examination/iris-biometrics",
    img: "https://media.vensysco.com/iris-biometrics-e2.webp",
  },
];
const examManagement = [
  {
    label: "Support Management",
    href: "/services/examination/support-management",
    img: "https://media.vensysco.com/support-management-e5.webp",
  },
  {
    label: "Technical Manpower",
    href: "/services/examination/technical-manpower",
    img: "https://media.vensysco.com/technical-manpower-e2.webp",
  },
  {
    label: "Non-Technical Manpower",
    href: "/services/examination/non-technical-manpower",
    img: "https://media.vensysco.com/non-technical-manpower-e2.webp",
  },
  {
    label: "Resource Verification",
    href: "/services/examination/resource-verification",
    img: "https://media.vensysco.com/resource-verification-e2.webp",
  },
];
const examFrisking = [
  {
    label: "Frisking Solutions",
    href: "/services/examination/frisking-solutions",
    img: "https://media.vensysco.com/frisking-solutions-e2.webp",
  },
  {
    label: "HHMD",
    href: "/services/examination/hhmd",
    img: "https://media.vensysco.com/hhmd-e2.webp",
  },
  {
    label: "DFMD",
    href: "/services/examination/dfmd",
    img: "https://media.vensysco.com/dfmd-e2.webp",
  },
];

export default function HeaderSticky() {
  const router = useRouter();
  const pathname = usePathname();
  const [showExamination, setExamination] = useState(false);
  const [showCloudSolutions, setCloudSolutions] = useState(false);
  const [showResources, setShowResources] = useState(false);
  const [examinationImg, examinationSetImg] = useState(examInfra[0].img);
  const altText = examinationImg
    .replace(/^\//, "")
    .replace(/\..+$/, "")
    .replace(/-e\d+$/, "")
    .split("-")
    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
    .join(" ");
  const isExaminationActive = pathname.startsWith("/services/examination");
  const dropdownVariants = {
    hidden: { opacity: 0, y: -20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 1.3, ease: easeOut },
    },
    exit: {
      opacity: 0,
      y: -20,
      transition: { duration: 1.2, ease: easeIn },
    },
  };
  return (
    <React.Fragment>
      <Navbar
        fixed="bottom"
        data-bs-theme="dark"
        className="rounded-pill start-50 translate-middle shadow"
        id="FixedNavigation"
      >
        <Container fluid>
          <Navbar.Toggle aria-controls="fixed-navbar" />
          <Navbar.Collapse id="fixed-navbar">
            <Nav className="mx-auto align-items-center">
              <Nav.Item>
                <Nav.Link
                  as={Link}
                  href="/"
                  active={pathname === "/" || pathname === ""}
                  aria-label="Navigate to Home"
                >
                  <i className="bi bi-house-fill"></i>
                </Nav.Link>
              </Nav.Item>
              {serviceItems.map((item, idx) => {
                // Special dropdown for Cloud
                if (item.label === "Cloud") {
                  return (
                    <NavDropdown
                      key={idx}
                      title={
                        <span
                          onClick={(e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            router.push("/services/cloud-solutions");
                          }}
                        >
                          Cloud
                        </span>
                      }
                      drop="up"
                      onMouseEnter={() => setCloudSolutions(true)}
                      onMouseLeave={() => setCloudSolutions(false)}
                      show={showCloudSolutions}
                      active={pathname.startsWith("/services/cloud-solutions")}
                      aria-label="Cloud Solutions Menu"
                    >
                      <AnimatePresence>
                        {showCloudSolutions && (
                          <motion.div
                            initial="hidden"
                            animate="visible"
                            exit="exit"
                            variants={dropdownVariants}
                          >
                            <NavDropdown.Item
                              as={Link}
                              href="/services/cloud-solutions/enterprise-cloud-solution"
                              className={
                                pathname ===
                                  "/services/cloud-solutions/enterprise-cloud-solution"
                                  ? "active"
                                  : ""
                              }
                            >
                              Enterprise Cloud Solution
                            </NavDropdown.Item>

                            <NavDropdown.Item
                              as={Link}
                              href="/services/cloud-solutions/cloud-engineering-services"
                              className={
                                pathname ===
                                  "/services/cloud-solutions/cloud-engineering-services"
                                  ? "active"
                                  : ""
                              }
                            >
                              Cloud Engineering Services
                            </NavDropdown.Item>
                          </motion.div>
                        )}
                      </AnimatePresence>
                    </NavDropdown>
                  );
                }

                // Normal Nav Items
                return (
                  <Nav.Item key={idx}>
                    <Nav.Link
                      as={Link}
                      href={item.href}
                      active={pathname === item.href}
                      aria-label={`Navigate to ${item.label}`}
                    >
                      {item.label}
                    </Nav.Link>
                  </Nav.Item>
                );
              })}
              <NavDropdown
                title={
                  <span
                    onClick={(e) => {
                      e.preventDefault();
                      e.stopPropagation();
                      router.push("/services/examination");
                    }}
                  >
                    Examination
                  </span>
                }
                drop="up"
                onMouseEnter={() => setExamination(true)}
                onMouseLeave={() => setExamination(false)}
                show={showExamination}
                className="full-dropup"
                active={isExaminationActive}
                aria-label="Examination Menu"
              >
                <AnimatePresence>
                  {showExamination && (
                    <motion.div
                      initial="hidden"
                      animate="visible"
                      exit="exit"
                      variants={dropdownVariants}
                    >
                      <Row className="g-3">
                        <Col md={9}>
                          <Row className="g-3" xs={1} sm={1} md={3}>
                            <Col>
                              <NavDropdown.Header>
                                <i className="bi bi-chevron-double-right"></i>{" "}
                                Exam Infra
                              </NavDropdown.Header>
                              {examInfra.map((item, idx) => (
                                <motion.div
                                  key={idx}
                                  whileHover={{ x: 5 }}
                                  transition={{ type: "spring", stiffness: 50 }}
                                  onMouseEnter={() =>
                                    examinationSetImg(item.img)
                                  }
                                >
                                  <NavDropdown.Item
                                    href={item.href}
                                    className={
                                      pathname === item.href ? "active" : ""
                                    }
                                    aria-label={`Navigate to ${item.label}`}
                                  >
                                    {item.label}
                                  </NavDropdown.Item>
                                </motion.div>
                              ))}
                              <NavDropdown.Header>
                                <i className="bi bi-chevron-double-right"></i>{" "}
                                Security Solutions
                              </NavDropdown.Header>
                              {examSecurity.map((item, idx) => (
                                <motion.div
                                  key={idx}
                                  whileHover={{ x: 5 }}
                                  transition={{ type: "spring", stiffness: 50 }}
                                  onMouseEnter={() =>
                                    examinationSetImg(item.img)
                                  }
                                >
                                  <NavDropdown.Item
                                    href={item.href}
                                    className={
                                      pathname === item.href ? "active" : ""
                                    }
                                    aria-label={`Navigate to ${item.label}`}
                                  >
                                    {item.label}
                                  </NavDropdown.Item>
                                </motion.div>
                              ))}
                            </Col>
                            <Col>
                              <NavDropdown.Header>
                                <i className="bi bi-chevron-double-right"></i>{" "}
                                Stationery & Logistic
                              </NavDropdown.Header>
                              {examStationery.map((item, idx) => (
                                <motion.div
                                  key={idx}
                                  whileHover={{ x: 5 }}
                                  transition={{ type: "spring", stiffness: 50 }}
                                  onMouseEnter={() =>
                                    examinationSetImg(item.img)
                                  }
                                >
                                  <NavDropdown.Item
                                    href={item.href}
                                    className={
                                      pathname === item.href ? "active" : ""
                                    }
                                    aria-label={`Navigate to ${item.label}`}
                                  >
                                    {item.label}
                                  </NavDropdown.Item>
                                </motion.div>
                              ))}
                              <NavDropdown.Header>
                                <i className="bi bi-chevron-double-right"></i>{" "}
                                Biometric
                              </NavDropdown.Header>
                              {examBiometric.map((item, idx) => (
                                <motion.div
                                  key={idx}
                                  whileHover={{ x: 5 }}
                                  transition={{ type: "spring", stiffness: 50 }}
                                  onMouseEnter={() =>
                                    examinationSetImg(item.img)
                                  }
                                >
                                  <NavDropdown.Item
                                    href={item.href}
                                    className={
                                      pathname === item.href ? "active" : ""
                                    }
                                    aria-label={`Navigate to ${item.label}`}
                                  >
                                    {item.label}
                                  </NavDropdown.Item>
                                </motion.div>
                              ))}
                            </Col>
                            <Col>
                              <NavDropdown.Header>
                                <i className="bi bi-chevron-double-right"></i>{" "}
                                Support Management
                              </NavDropdown.Header>
                              {examManagement.map((item, idx) => (
                                <motion.div
                                  key={idx}
                                  whileHover={{ x: 5 }}
                                  transition={{ type: "spring", stiffness: 50 }}
                                  onMouseEnter={() =>
                                    examinationSetImg(item.img)
                                  }
                                >
                                  <NavDropdown.Item
                                    href={item.href}
                                    className={
                                      pathname === item.href ? "active" : ""
                                    }
                                    aria-label={`Navigate to ${item.label}`}
                                  >
                                    {item.label}
                                  </NavDropdown.Item>
                                </motion.div>
                              ))}
                              <NavDropdown.Header>
                                <i className="bi bi-chevron-double-right"></i>{" "}
                                Frisking
                              </NavDropdown.Header>
                              {examFrisking.map((item, idx) => (
                                <motion.div
                                  key={idx}
                                  whileHover={{ x: 5 }}
                                  transition={{ type: "spring", stiffness: 50 }}
                                  onMouseEnter={() =>
                                    examinationSetImg(item.img)
                                  }
                                >
                                  <NavDropdown.Item
                                    href={item.href}
                                    className={
                                      pathname === item.href ? "active" : ""
                                    }
                                    aria-label={`Navigate to ${item.label}`}
                                  >
                                    {item.label}
                                  </NavDropdown.Item>
                                </motion.div>
                              ))}
                            </Col>
                          </Row>
                        </Col>
                        <Col md={3}>
                          <motion.img
                            key={examinationImg}
                            src={examinationImg}
                            className="img-fluid"
                            alt={altText}
                            title={altText}
                            width={1066}
                            height={814}
                            whileInView={{ scale: [0.5, 1] }}
                            transition={{ duration: 1.6 }}
                          />
                        </Col>
                      </Row>
                    </motion.div>
                  )}
                </AnimatePresence>
              </NavDropdown>
              <NavDropdown
                title={<span>Industry</span>}
                drop="up"
                onMouseEnter={() => setShowResources(true)}
                onMouseLeave={() => setShowResources(false)}
                show={showResources}
                active={pathname.startsWith("/resources")}
                aria-label="Resources Menu"
              >
                <AnimatePresence>
                  {showResources && (
                    <motion.div
                      initial="hidden"
                      animate="visible"
                      exit="exit"
                      variants={dropdownVariants}
                    >
                      <NavDropdown.Item
                        as={Link}
                        href="/partners"
                        className={pathname === "/partners" ? "active" : ""}
                      >
                        Partners
                      </NavDropdown.Item>
                      <NavDropdown.Item
                        as={Link}
                        href="/case-study"
                        className={pathname === "/case-studies" ? "active" : ""}
                      >
                        Case Studies (Use Cases)
                      </NavDropdown.Item>
                      <NavDropdown.Item
                        as={Link}
                        href="/blog"
                        className={pathname === "/blog" ? "active" : ""}
                      >
                        Blogs
                      </NavDropdown.Item>
                    </motion.div>
                  )}
                </AnimatePresence>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
      <a
        href="https://media.vensysco.com/VTL-Brochure.pdf"
        target="_blank"
        rel="noopener noreferrer"
        download
        className="btn btn-lg btn-danger"
        id="FixedSetting"
        aria-label="Download Company Brochure in PDF format"
      >
        <i className="bi bi-download "></i>
        <small className="text ms-3">Download Brochure</small>
      </a>
    </React.Fragment>
  );
}