"use client";

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

import {
  TableCellsIcon,
  DocumentMagnifyingGlassIcon,
  ChevronDownIcon,
  DocumentPlusIcon,
  RectangleStackIcon,
} from "@heroicons/react/24/outline";

import { cn } from "@/lib/utils";
import { useRouter } from "next/navigation";
import { Dispatch, SetStateAction, useState } from "react";
import BulkUploadComingSoonModal from "@/app/components/portfolio/BulkUploadComingSoonModal";

interface AddNewProps {
  portfolioId: string;
  isUploadCsvOpen: boolean;
  setIsUploadCsvOpen: Dispatch<SetStateAction<boolean>>;
}

export default function AddNew({
  portfolioId,
  isUploadCsvOpen,
  setIsUploadCsvOpen,
}: AddNewProps) {
  const router = useRouter();
  const [loadingRemote, setLoadingRemote] = useState(false);
  const [isBulkUploadOpen, setIsBulkUploadOpen] = useState(false);

  function handleRemoteAssessment() {
    setLoadingRemote(true);
    router.push(`/portfolio/${portfolioId}/remote-assessment`);
  }

  return (
    <>
    <BulkUploadComingSoonModal
      isOpen={isBulkUploadOpen}
      onClose={() => setIsBulkUploadOpen(false)}
      portfolioId={portfolioId}
    />
    <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
        "
      >
        <DocumentPlusIcon className="h-4 w-4 mr-2" />
        New Property
        <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">
          {/* Remote Assessment */}
          <MenuItem>
            {({ active }) => (
              <button
                onClick={handleRemoteAssessment}
                className={cn(
                  "w-full p-3 rounded-lg text-left flex gap-3 transition-colors",
                  active && "bg-gray-100"
                )}
              >
                <DocumentMagnifyingGlassIcon 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">
                    Remote Assessment
                    {loadingRemote && (
                      <span className="h-3 w-3 rounded-full border-2 border-gray-400 border-t-transparent animate-spin"></span>
                    )}
                  </span>
                  <span className="text-xs text-gray-500 leading-snug">
                    Run a remote assessment for a single property.
                  </span>
                </div>
              </button>
            )}
          </MenuItem>

          {/* CSV Upload */}
          <MenuItem>
            {({ active }) => (
              <button
                onClick={() => setIsUploadCsvOpen(!isUploadCsvOpen)}
                className={cn(
                  "w-full p-3 rounded-lg text-left flex gap-3 transition-colors",
                  active && "bg-gray-100"
                )}
              >
                <TableCellsIcon className="h-5 w-5 text-gray-700 mt-[2px]" />

                <div className="flex flex-col">
                  <span className="text-sm font-medium text-gray-900">
                    File Import
                  </span>
                  <span className="text-xs text-gray-500 leading-snug">
                    For bulk uploads, please contact a Domna user.
                  </span>
                </div>
              </button>
            )}
          </MenuItem>

          {/* Bulk Upload (Coming Soon) */}
          <MenuItem>
            {({ active }) => (
              <button
                onClick={() => setIsBulkUploadOpen(true)}
                className={cn(
                  "w-full p-3 rounded-lg text-left flex gap-3 transition-colors",
                  active && "bg-gray-100"
                )}
              >
                <RectangleStackIcon 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">
                    new: Bulk upload
                    <span className="text-[10px] font-semibold text-amber-700 bg-amber-100 px-1.5 py-0.5 rounded-full leading-none">
                      coming soon
                    </span>
                  </span>
                  <span className="text-xs text-gray-500 leading-snug">
                    Upload multiple addresses in one go.
                  </span>
                </div>
              </button>
            )}
          </MenuItem>
        </div>
      </MenuItems>
    </Menu>
    </>
  );
}
