"use client";
import React, { useEffect, useMemo, useState } from "react";
import { DropdownItem } from "./types";

type DropdownProps = {
  data: DropdownItem[];
  label: string;
  onSelect: (item: DropdownItem | null) => void;
  preselectedId?: string;
  mobileValue: string;
  onMobileChange: (value: string, error: string) => void;
};


export const Dropdown: React.FC<DropdownProps> = ({
  data,
  label,
  onSelect,
  preselectedId,
   mobileValue,
  onMobileChange,
}) => {
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState<DropdownItem | null>(null);
  const [open, setOpen] = useState(false);
  const [mobileNumber, setMobileNumber] = useState("");

  const handleMobileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const input = e.target.value;
    localStorage.setItem("mob", input);
    localStorage.setItem("dial_code", query);
    localStorage.setItem("country_flag", JSON.stringify(selected));

    if (/^\d*$/.test(input)) {
      let error = "";
      if (input.length === 0) {
        error = "Phone number is required.";
      } else if (input.length < 10) {
        error = "Phone number must be 10 digits.";
      } else if (input.length > 10) {
        error = "Phone number must be exactly 10 digits.";
      }

      onMobileChange(input, error);
    }
  };

  // Memoized filtered data for performance
  const filteredData = useMemo(() => {
    return query
      ? data.filter((item) =>
        item.name.toLowerCase().includes(query.toLowerCase()),
      )
      : data;
  }, [query, data]);

  // Set preselected item if given
  useEffect(() => {
    if (preselectedId) {
      const found = data.find((item) => item.dial_code === preselectedId);
      if (found) {
        setSelected(found);
        setQuery(found.dial_code);
        onSelect(found);
      }
    }
  }, [preselectedId, data, onSelect]);

  const handleSelect = (item: DropdownItem) => {
    setSelected(item);
    setQuery(item.dial_code);
    onSelect(item);
    setOpen(false);
  };

  const handleClear = () => {
    setSelected(null);
    setQuery("");
    onSelect(null);
    setOpen(false);
  };

  return (
    <div className="relative z-50 flex w-full flex-col">
      <div className="flex w-full flex-col border-b border-gray-950/25">
        <div className="flex flex-row items-center justify-between align-middle">
          <label className="mb-1 block text-sm/4" htmlFor="mobile_number">
            {label}
          </label>
          {selected && (
            <button
              className="text-xs text-amber-600 hover:underline"
              onClick={(e) => {
                e.stopPropagation();
                handleClear();
              }}
            >
              Clear
            </button>
          )}
        </div>
        <div className="relative w-full flex-col">
          <div className="flex flex-row items-center justify-between align-middle">
            <div
              className="flex w-[30%] cursor-pointer py-1"
              onClick={() => setOpen(!open)}
            >
              <span className="text-sm font-medium">
                {selected ? selected.dial_code : "Country Code"}
              </span>
            </div>
            <div className="flex w-[70%]">
              <input
                type="text"
                inputMode="numeric"
                pattern="\d*"
                maxLength={10}
                value={mobileValue}
                onChange={handleMobileChange}
                id="mobile_number"
                placeholder="10-digit number"
                className="flex py-1.5 font-semibold tracking-widest placeholder:font-normal placeholder:tracking-normal"
              />

            </div>
          </div>

          {open && (
            <div className="absolute z-80 mt-1 w-full border bg-white">
              <input
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search code..."
                className="w-full border-b p-2 outline-none"
              />
              <ul className="max-h-50 overflow-y-auto">
                {filteredData.map((item, index) => (
                  <li
                    key={`${item.dial_code}_${index}`}
                    onClick={() => handleSelect(item)}
                    className="flex flex-row gap-1 cursor-pointer p-2 text-xs hover:bg-gray-100"
                  >
                    <span className="w-10 text-right">{item.dial_code}</span> - {item.name}
                  </li>
                ))}
                {filteredData.length === 0 && (
                  <li className="p-2 text-xs text-gray-400">
                    No results found.
                  </li>
                )}
              </ul>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};