"use client";

import { Cpu, Hotel, Network } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import Wallet from "./svgComponents/Wallet";
import CalenderCheckSide from "./svgComponents/CalenderCheckSide";

interface SolutionsNavigationProps {
  isMobile?: boolean;
  onClose?: () => void;
  setIsMobileMenuOpen?: (value: boolean) => void;
}

export default function SolutionsNavigation({
  isMobile = false,
  onClose,
  setIsMobileMenuOpen,
}: SolutionsNavigationProps) {
  const pathname = usePathname();

  const navItems = [
    {
      name: "Lodging System v2",
      href: "/lodging-system-v2",
      icon: Hotel,
      description:
        "Manage your hotel operations efficiently from a single platform. Simplify bookings, guest management, and daily workflows.",
    },
    {
      name: "Lodging System Core",
      href: "/lodging-system-core",
      icon: Cpu,
      description:
        "A centralized system designed to keep your property operations smooth and organized. Improve efficiency across every department.",
    },
    {
      name: "Channel Manager",
      href: "/channel-manager",
      icon: Network,
      description:
        "Keep room availability and pricing updated across all booking channels automatically. Reduce manual work and avoid overbookings.",
    },
    {
      name: "Booking Engine",
      href: "/booking-engine",
      icon: CalenderCheckSide,
      description:
        "Deliver a seamless direct booking experience for your guests. Increase online reservations through your website.",
    },
    {
      name: "Lodging System Payments",
      href: "/payments",
      icon: Wallet,
      description:
        "Secure and reliable payment processing made for hospitality businesses. Simplify transactions and manage payments effortlessly.",
    },
  ];

  if (isMobile) {
    return (
      <div className="bg-[#FAF9F8] rounded-xl flex flex-col">
        <div className="flex flex-col gap-2 p-4 border-b border-[#EBEBEB]">
          <p className="text-sm text-[#707070] leading-5 figtree">
            We offer a PMS solution that serves as more than just a back-end
            system; it's a front-facing tool that allows your hotel's unique
            character to shine.
          </p>
        </div>

        <div className="flex flex-col p-2">
          {navItems.map((item) => {
            const isActive = pathname === item.href;
            const Icon = item.icon;

            return (
              <Link
                key={item.name}
                href={item.href}
                className={`flex items-center gap-3 px-3 py-3 rounded-lg transition-colors ${
                  isActive ? "bg-white" : "hover:bg-white"
                }`}
                onClick={() => {
                  setIsMobileMenuOpen?.(false);
                }}
              >
                <Icon
                  className={`w-5 h-5 transition ${
                    isActive ? "text-[#F58220]" : "text-[#636363]"
                  }`}
                />

                <span
                  className={`text-base font-medium transition ${
                    isActive ? "text-[#F58220]" : "text-[#636363]"
                  }`}
                >
                  {item.name}
                </span>
              </Link>
            );
          })}
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white shadow-lg z-50 border-t border-[#EBEBEB] w-full">
      <div className="flex flex-row">
        {/* Left Content */}
        <div className="flex flex-col gap-3 lg:pl-[68px] xl:pl-[135px] pt-[58px] pr-3 w-[30%] border-r border-[#EBEBEB] pb-[58px]">
          <h3 className="text-[36px] xl:text-[48px] leading-[100%] aeonik">
            Solutions
          </h3>
          <p className="text-base xl:text-lg text-[#707070] leading-5 xl:leading-6 figtree">
            In a competitive market, brand differentiation is key. We offer a
            PMS solution that serves as more than just a back-end system; it's a
            front-facing tool that allows your hotel's unique character to shine
            through.
          </p>
        </div>

        {/* Right Content */}
        <div className="flex-1">
          <div className="flex flex-row">
            <div className="w-full px-5 py-5 grid grid-cols-2 gap-4">
              {navItems.map((item) => {
                const isActive = pathname === item.href;
                const Icon = item.icon;

                return (
                  <Link
                    key={item.name}
                    href={item.href}
                    onClick={onClose}
                    className="group/link relative flex flex-col gap-1 px-2 py-3 rounded-lg overflow-hidden"
                  >
                    {/* Background */}
                    <span
                      className={`absolute inset-0 bg-linear-to-r from-[#F58220]/10 via-[#F58220]/5 to-transparent origin-right transition-transform duration-500 ${
                        isActive
                          ? "scale-x-100"
                          : "scale-x-0 group-hover/link:scale-x-100"
                      }`}
                    />

                    {/* Line */}
                    <span
                      className={`absolute bottom-0 left-0 h-[2px] bg-[#F58220] transition-all duration-500 ease-out ${
                        isActive
                          ? "w-[50%] translate-x-full"
                          : "w-[5%] group-hover/link:w-[50%] group-hover/link:translate-x-full"
                      }`}
                    />

                    {/* Main Content */}
                    <div className="relative z-10 flex items-start gap-2">
                      <Icon
                        className={`w-5 h-5 mt-[2px] transition shrink-0 ${
                          isActive
                            ? "text-[#F58220]"
                            : "text-[#636363] group-hover/link:text-[#F58220]"
                        }`}
                      />

                      <div className="flex flex-col">
                        {/* Title */}
                        <span
                          className={`text-base figtree xl:text-lg leading-[24px] font-medium transition ${
                            isActive
                              ? "text-[#F58220]"
                              : "text-[#707070] group-hover/link:text-[#F58220]"
                          }`}
                        >
                          {item.name}
                        </span>

                        {/* Description */}
                        <span
                          className={`text-sm leading-[20px] transition ${
                            isActive
                              ? "text-[#A0A0A0]"
                              : "text-[#9A9A9A] group-hover/link:text-[#B0B0B0]"
                          }`}
                        >
                          {item.description}
                        </span>
                      </div>
                    </div>
                  </Link>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}