"use client";

import { usePathname, useRouter } from "@/i18n/routing";
import { useLocale, useTranslations } from "next-intl";
import { useSearchParams } from "next/navigation";
import { useState } from "react";

// Language Square Icon (Globe)
function LanguageSquareIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      width="24"
      height="24"
      viewBox="0 0 20.5 20.5"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M10.5 5.25C10.5 4.83579 10.1642 4.5 9.75 4.5C9.33579 4.5 9 4.83579 9 5.25V5.87931H5.25C4.83579 5.87931 4.5 6.2151 4.5 6.62931C4.5 7.04352 4.83579 7.37931 5.25 7.37931H11.7071C11.2608 8.51546 10.6054 9.61754 9.84315 10.6548C9.69979 10.4688 9.55635 10.2769 9.42083 10.0889C9.08277 9.62011 8.83228 9.22865 8.73693 9.02408C8.56195 8.64864 8.11575 8.48614 7.74031 8.66112C7.36487 8.8361 7.20237 9.2823 7.37735 9.65774C7.53915 10.0049 7.86723 10.499 8.20417 10.9663C8.42079 11.2667 8.65691 11.5776 8.8854 11.8645C7.97949 12.9335 7.01185 13.8918 6.1352 14.6979C5.8303 14.9783 5.81041 15.4528 6.09078 15.7577C6.37115 16.0626 6.84561 16.0824 7.15051 15.8021C8.01369 15.0083 8.97743 14.0581 9.89731 12.9894L11.2452 14.3906C11.5323 14.6891 12.0071 14.6984 12.3057 14.4112C12.6042 14.1241 12.6134 13.6493 12.3262 13.3508L10.8489 11.8149C11.8627 10.479 12.7641 8.98013 13.3033 7.37931H15.25C15.6642 7.37931 16 7.04352 16 6.62931C16 6.2151 15.6642 5.87931 15.25 5.87931L10.5 5.87931V5.25Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M10.3072 2.29058e-07H10.1928C8.00212 -1.31257e-05 6.28144 -2.37375e-05 4.93802 0.180594C3.56137 0.365681 2.46911 0.752715 1.61091 1.61091C0.752715 2.46911 0.365681 3.56137 0.180594 4.93802C-2.37375e-05 6.28144 -1.31257e-05 8.00212 2.29058e-07 10.1928V10.3072C-1.31257e-05 12.4979 -2.37375e-05 14.2186 0.180594 15.562C0.365681 16.9386 0.752715 18.0309 1.61091 18.8891C2.46911 19.7473 3.56137 20.1343 4.93802 20.3194C6.28144 20.5 8.0021 20.5 10.1928 20.5H10.3072C12.4979 20.5 14.2186 20.5 15.562 20.3194C16.9386 20.1343 18.0309 19.7473 18.8891 18.8891C19.7473 18.0309 20.1343 16.9386 20.3194 15.562C20.5 14.2186 20.5 12.4979 20.5 10.3072V10.1928C20.5 8.00214 20.5 6.28144 20.3194 4.93802C20.1343 3.56137 19.7473 2.46911 18.8891 1.61091C18.0309 0.752715 16.9386 0.365681 15.562 0.180594C14.2186 -2.37375e-05 12.4979 -1.31257e-05 10.3072 2.29058e-07ZM2.67157 2.67157C3.20462 2.13853 3.92757 1.82994 5.1379 1.66722C6.36979 1.50159 7.98963 1.5 10.25 1.5C12.5104 1.5 14.1302 1.50159 15.3621 1.66722C16.5724 1.82994 17.2954 2.13853 17.8284 2.67157C18.3615 3.20462 18.6701 3.92757 18.8328 5.1379C18.9984 6.36979 19 7.98963 19 10.25C19 12.5104 18.9984 14.1302 18.8328 15.3621C18.6701 16.5724 18.3615 17.2954 17.8284 17.8284C17.2954 18.3615 16.5724 18.6701 15.3621 18.8328C14.1302 18.9984 12.5104 19 10.25 19C7.98963 19 6.36979 18.9984 5.1379 18.8328C3.92757 18.6701 3.20462 18.3615 2.67157 17.8284C2.13853 17.2954 1.82994 16.5724 1.66722 15.3621C1.50159 14.1302 1.5 12.5104 1.5 10.25C1.5 7.98963 1.50159 6.36979 1.66722 5.1379C1.82994 3.92757 2.13853 3.20462 2.67157 2.67157Z"
        fill="currentColor"
      />
    </svg>
  );
}


export default function LanguageSwitcher() {
  const t = useTranslations("language");
  const locale = useLocale();
  const pathname = usePathname();
  const router = useRouter();
  const searchParams = useSearchParams();
  const [isOpen, setIsOpen] = useState(false);

  const handleLanguageChange = (newLocale: "ar" | "en") => {
    setIsOpen(false);
    const queryString = searchParams.toString();
    const nextPath = queryString ? `${pathname}?${queryString}` : pathname;

    router.replace(nextPath, { locale: newLocale });
  };

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 hover:bg-muted/50 transition-colors rounded-md px-2 py-1"
        aria-label={t("switch")}
        suppressHydrationWarning
      >
        <LanguageSquareIcon className="size-6 shrink-0 text-foreground" />
        <span className="text-base font-normal text-foreground">
          {locale === "ar" ? "العربية" : "English"}
        </span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className={`transition-transform ${isOpen ? "rotate-180" : ""}`}
        >
          <path d="m6 9 6 6 6-6" />
        </svg>
      </button>

      {isOpen && (
        <>
          {/* Backdrop */}
          <div
            className="fixed inset-0 z-10"
            onClick={() => setIsOpen(false)}
          />
          {/* Dropdown */}
          <div className="absolute top-full mt-2 z-20 min-w-[160px] bg-card border border-border rounded-lg shadow-lg overflow-hidden">
            <button
              onClick={() => handleLanguageChange("ar")}
              disabled={locale === "ar"}
              className={`w-full px-4 py-3 text-right hover:bg-muted transition-colors flex items-center gap-3 disabled:cursor-not-allowed ${
                locale === "ar" ? "bg-primary/10 text-primary" : ""
              }`}
            >
              <span className="flex-1 text-base font-normal">{t("ar")}</span>
              {locale === "ar" && (
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="M20 6 9 17l-5-5" />
                </svg>
              )}
            </button>
            <button
              onClick={() => handleLanguageChange("en")}
              disabled={locale === "en"}
              className={`w-full px-4 py-3 text-left hover:bg-muted transition-colors flex items-center gap-3 disabled:cursor-not-allowed ${
                locale === "en" ? "bg-primary/10 text-primary" : ""
              }`}
            >
              <span className="flex-1 text-base font-normal">{t("en")}</span>
              {locale === "en" && (
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="M20 6 9 17l-5-5" />
                </svg>
              )}
            </button>
          </div>
        </>
      )}
    </div>
  );
}