"use client";

import { Loader2, MapPin, Navigation } from "lucide-react";
import { useLocation } from "@/context/LocationContext";

type LocationButtonVariant = "header" | "hero" | "footer" | "mobile";

const variantClasses: Record<LocationButtonVariant, string> = {
  header:
    "flex items-center gap-2 rounded-xl border border-emerald-500/25 bg-emerald-500/15 px-4 py-2.5 text-sm font-semibold text-emerald-100 transition-all hover:border-emerald-400/40 hover:bg-emerald-500/25 hover:text-white disabled:opacity-60",
  hero: "flex items-center justify-center gap-2 rounded-xl px-5 py-4 text-sm font-semibold transition-all sm:min-w-[160px] disabled:opacity-60",
  footer:
    "mt-6 inline-flex items-center gap-2 rounded-xl bg-white px-8 py-3.5 text-base font-bold text-emerald-700 shadow-lg transition-all hover:bg-emerald-50 active:scale-[0.98] disabled:opacity-60",
  mobile:
    "mt-2 flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 to-emerald-600 px-4 py-3 text-sm font-semibold text-white disabled:opacity-60",
};

interface LocationButtonProps {
  variant?: LocationButtonVariant;
  className?: string;
  onLocated?: () => void;
}

export default function LocationButton({
  variant = "header",
  className = "",
  onLocated,
}: LocationButtonProps) {
  const { status, requestLocation, shortLabel } = useLocation();
  const isLoading = status === "loading";
  const isSuccess = status === "success";

  const handleClick = () => {
    if (isLoading) return;
    requestLocation();
    onLocated?.();
  };

  const heroClasses = isSuccess
    ? "bg-emerald-500 text-white shadow-lg shadow-emerald-500/30"
    : "border border-white/10 bg-white/5 text-slate-200 hover:border-emerald-500/30 hover:bg-emerald-500/10";

  const label =
    variant === "hero"
      ? isLoading
        ? "Alınıyor..."
        : isSuccess
          ? shortLabel
            ? shortLabel.split(",")[0].trim()
            : "Konum Alındı"
          : "Konumum"
      : isLoading
        ? "Konum alınıyor..."
        : isSuccess && shortLabel
          ? shortLabel
          : variant === "footer"
            ? "Konumumu Kullan ve Ara"
            : "Konumumu Kullan";

  const Icon = variant === "hero" ? Navigation : MapPin;

  return (
    <button
      type="button"
      onClick={handleClick}
      disabled={isLoading}
      className={`${variantClasses[variant]} ${variant === "hero" ? heroClasses : ""} ${className}`}
      title={isSuccess && shortLabel ? shortLabel : undefined}
    >
      {isLoading ? (
        <Loader2 className="h-4 w-4 animate-spin" />
      ) : (
        <Icon
          className={`h-4 w-4 shrink-0 ${
            variant === "footer"
              ? ""
              : variant === "hero" && isSuccess
                ? "text-white"
                : "text-emerald-400"
          } ${variant === "hero" && isSuccess ? "animate-pulse" : ""}`}
        />
      )}
      <span
        className={
          variant === "hero"
            ? "max-w-[120px] truncate sm:max-w-[140px]"
            : variant === "header" && isSuccess
              ? "max-w-[180px] truncate"
              : ""
        }
      >
        {label}
      </span>
    </button>
  );
}