"use client";

import { Globe } from "lucide-react";
import type { Region } from "@/lib/types";

const REGION_OPTIONS: { value: Region | ""; label: string }[] = [
  { value: "", label: "No region" },
  { value: "APAC", label: "APAC" },
  { value: "NA", label: "NA" },
  { value: "LATAM", label: "LATAM" },
  { value: "EMEA", label: "EMEA" },
  { value: "GLOBAL", label: "Global" },
];

export const REGION_BADGE_COLORS: Record<Region, { bg: string; text: string; border: string }> = {
  APAC: { bg: "bg-blue-100", text: "text-blue-700", border: "border-blue-300" },
  NA: { bg: "bg-green-100", text: "text-green-700", border: "border-green-300" },
  LATAM: { bg: "bg-purple-100", text: "text-purple-700", border: "border-purple-300" },
  EMEA: { bg: "bg-amber-100", text: "text-amber-700", border: "border-amber-300" },
  GLOBAL: { bg: "bg-gray-100", text: "text-gray-600", border: "border-gray-300" },
};

interface RegionSelectorProps {
  value: Region | "";
  onChange: (region: Region | "") => void;
  disabled?: boolean;
}

export function RegionSelector({ value, onChange, disabled }: RegionSelectorProps) {
  return (
    <div className="relative">
      <select
        value={value}
        onChange={(e) => onChange(e.target.value as Region | "")}
        disabled={disabled}
        className="w-full rounded-lg border border-gray-200 px-3 py-1.5 text-sm text-gray-700 disabled:opacity-50"
        data-testid="region-selector"
      >
        {REGION_OPTIONS.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
    </div>
  );
}

export function RegionBadge({ region }: { region: Region }) {
  const colors = REGION_BADGE_COLORS[region];
  return (
    <span
      className={`inline-flex items-center gap-0.5 rounded-full px-1.5 py-px text-[9px] font-semibold leading-none ${colors.bg} ${colors.text}`}
      data-testid="region-badge"
    >
      <Globe className="h-2 w-2" />
      {region}
    </span>
  );
}