"use client";

import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";

import {
  ChevronDownIcon,
  ArrowTrendingUpIcon,
  CalendarDaysIcon,
  RocketLaunchIcon,
} from "@heroicons/react/24/outline";

import { cn } from "@/lib/utils";
import { useRouter } from "next/navigation";

export default function YourProjectsDropdown({
  portfolioId,
}: {
  portfolioId: string;
}) {
  const router = useRouter();
  function handlePlanClick(portfolioId: string) {
    router.push(`/portfolio/${portfolioId}/your-projects/plan`);
  }
  function handleLiveTrackingClick(portfolioId: string) {
    router.push(`/portfolio/${portfolioId}/your-projects/live`);
  }

  return (
    <Menu as="div" className="relative inline-block text-left">
      <MenuButton
        className="
            inline-flex items-center gap-1 px-4 py-2 rounded-md 
            bg-gray-50 text-gray-900 hover:bg-midblue hover:text-gray-100
            transition-colors text-xs font-medium
          "
      >
        <RocketLaunchIcon className="h-4 w-4 mr-2" />
        Your Projects
        <ChevronDownIcon className="h-4 w-4 opacity-70" />
      </MenuButton>

      <MenuItems
        className="
            absolute right-0 mt-3 w-72 origin-top-right rounded-md 
            bg-white shadow-lg ring-1 ring-black/5 focus:outline-none
            z-[9999] py-3
          "
      >
        <div className="flex flex-col gap-2 px-3">
          {/* Plans */}
          <MenuItem>
            {({ active }) => (
              <button
                onClick={() => handlePlanClick(portfolioId)}
                className={cn(
                  "w-full p-3 rounded-lg text-left flex gap-3 transition-colors",
                  active && "bg-gray-100"
                )}
              >
                <CalendarDaysIcon className="h-5 w-5 text-gray-700 mt-[2px]" />

                <div className="flex flex-col">
                  <span className="text-sm font-medium text-gray-900 flex items-center gap-2">
                    Plans
                  </span>
                  <span className="text-xs text-gray-500 leading-snug">
                    Your project overviews - all metrics and expected
                    improvements
                  </span>
                </div>
              </button>
            )}
          </MenuItem>

          {/* Live Tracking */}
          <MenuItem>
            {({ active }) => (
              <button
                onClick={() => handleLiveTrackingClick(portfolioId)}
                className={cn(
                  "w-full p-3 rounded-lg text-left flex gap-3 transition-colors",
                  active && "bg-gray-100"
                )}
              >
                <ArrowTrendingUpIcon className="h-5 w-5 text-gray-700 mt-[2px]" />

                <div className="flex flex-col">
                  <span className="text-sm font-medium text-gray-900">
                    Live Tracking
                  </span>
                  <span className="text-xs text-gray-500 leading-snug">
                    See the performance data for your live Domna projects
                  </span>
                </div>
              </button>
            )}
          </MenuItem>
        </div>
      </MenuItems>
    </Menu>
  );
}
