import { useState, useEffect, useRef } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { wpApi } from "../api/wp-api";
import { useSocialSets } from "../hooks/useSocialSets";
import { toast } from "react-toastify";
import clsx from "clsx";

interface TimezoneInfo {
  id: string;
  displayName: string;
  baseUtcOffset: string;
}

export default function TimezoneSelector() {
  const { socialSets } = useSocialSets();
  const queryClient = useQueryClient();
  const [isOpen, setIsOpen] = useState(false);
  const [search, setSearch] = useState("");
  const [saving, setSaving] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  const currentSet = socialSets[0];
  const currentTimezone = currentSet?.timezone || "UTC";

  const { data: timezones, isLoading: tzLoading } = useQuery({
    queryKey: ["timezones"],
    queryFn: async () => {
      try {
        const data = await wpApi.get<any>("timezones");
        return Array.isArray(data) ? data : [];
      } catch {
        return [];
      }
    },
    staleTime: 600_000,
    enabled: isOpen,
  });

  const tzList = timezones || [];
  const filtered = search
    ? tzList.filter((tz) =>
        tz.id.toLowerCase().includes(search.toLowerCase()) ||
        tz.displayName.toLowerCase().includes(search.toLowerCase())
      )
    : tzList;

  // Close on click outside
  useEffect(() => {
    if (!isOpen) return;
    const handler = (e: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
        setIsOpen(false);
        setSearch("");
      }
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [isOpen]);

  const handleSelect = async (tzId: string) => {
    if (!currentSet || tzId === currentTimezone) {
      setIsOpen(false);
      setSearch("");
      return;
    }

    setSaving(true);
    try {
      await wpApi.post(`social-sets/${currentSet.id}/timezone`, { timezone: tzId });
      queryClient.invalidateQueries({ queryKey: ["social-sets"] });
      toast.success(`Timezone updated to ${tzId}`);
    } catch {
      toast.error("Failed to update timezone.");
    } finally {
      setSaving(false);
      setIsOpen(false);
      setSearch("");
    }
  };

  return (
    <div className="vr-relative" ref={dropdownRef}>
      <button
        onClick={() => setIsOpen(!isOpen)}
        disabled={saving}
        className="vr-inline-flex vr-items-center vr-gap-1.5 vr-text-xs vr-text-gray-500 vr-bg-gray-100 vr-px-3 vr-py-1.5 vr-rounded-md hover:vr-bg-gray-200 vr-transition-colors vr-border-0 vr-cursor-pointer"
      >
        <i className="fa-solid fa-globe" style={{ fontSize: "10px" }} />
        {saving ? "Saving..." : currentTimezone}
        <i className="fa-solid fa-chevron-down" style={{ fontSize: "8px" }} />
      </button>

      {isOpen && (
        <div className="vr-absolute vr-z-50 vr-mt-1 vr-w-72 vr-bg-white vr-rounded-lg vr-border vr-border-gray-200 vr-shadow-lg vr-overflow-hidden" style={{ left: 0 }}>
          {/* Search */}
          <div className="vr-p-2 vr-border-b vr-border-gray-100">
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search timezones..."
              autoFocus
              className="vr-w-full vr-px-3 vr-py-2 vr-rounded-md vr-border vr-border-gray-200 vr-text-sm vr-outline-none focus:vr-border-primary-300"
            />
          </div>

          {/* List */}
          <div className="vr-max-h-48 vr-overflow-y-auto">
            {filtered.length > 0 ? (
              filtered.map((tz) => (
                <button
                  key={tz.id}
                  onClick={() => handleSelect(tz.id)}
                  className={clsx(
                    "vr-w-full vr-text-left vr-px-3 vr-py-2 vr-text-sm vr-transition-colors vr-border-0 vr-cursor-pointer",
                    tz.id === currentTimezone
                      ? "vr-bg-primary-50 vr-text-primary-700 vr-font-medium"
                      : "vr-text-gray-700 hover:vr-bg-gray-50"
                  )}
                >
                  <span>{tz.id}</span>
                  <span className="vr-text-xs vr-text-gray-400 vr-ml-2">{tz.baseUtcOffset}</span>
                </button>
              ))
            ) : (
              <p className="vr-px-3 vr-py-4 vr-text-xs vr-text-gray-400 vr-text-center">
                {tzLoading ? "Loading timezones..." : tzList.length === 0 ? "Could not load timezones. Make sure the backend is deployed." : "No matches"}
              </p>
            )}
          </div>
        </div>
      )}
    </div>
  );
}