import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Text, TouchableOpacity, View } from "react-native";

import { SERVICES } from "@/constants/services";
import { useT } from "@/lib/i18n";
import { useServiceAvailability } from "@/lib/use-service-availability";
import { useLocationStore, useServiceStore } from "@/store";

/**
 * Service picker: Car / Moto / Courier / My Car.
 *
 * Four equal tiles across the row rather than a scroller — with only four
 * services, anything off-screen is a service riders won't discover. Selection
 * styling matches the role picker on sign-up so the two read as the same
 * control.
 *
 * Each tile also carries live availability. The map only ever draws the
 * selected service, so picking one with nobody on it produced an empty map and
 * no explanation — the rider couldn't tell "no drivers tonight" from "no motos,
 * but four cars are around the corner". Showing the count on the tile makes
 * that visible before they choose, instead of after they've given up.
 */
export const ServiceSelector = () => {
  const { service, setService } = useServiceStore();
  const { userLatitude, userLongitude } = useLocationStore();
  const t = useT();

  const { counts, loading } = useServiceAvailability(
    userLatitude,
    userLongitude,
  );

  const selected = SERVICES.find((item) => item.id === service);

  return (
    <View>
      <View className="flex-row gap-2">
        {SERVICES.map((item) => {
          const active = item.id === service;

          return (
            <TouchableOpacity
              key={item.id}
              onPress={() => setService(item.id)}
              activeOpacity={0.8}
              accessibilityRole="button"
              accessibilityState={{ selected: active }}
              className={`flex-1 items-center rounded-2xl border py-3 ${
                active
                  ? "border-primary-500 bg-primary-500/10"
                  : "border-neutral-100 bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-800"
              }`}
            >
              <MaterialCommunityIcons
                name={item.icon}
                size={24}
                color={active ? "#0286ff" : "#858585"}
              />

              <Text
                numberOfLines={1}
                className={`mt-1.5 text-xs font-JakartaBold ${
                  active ? "text-primary-500" : "text-black dark:text-white"
                }`}
              >
                {t(item.labelKey)}
              </Text>

              {/* Availability. Hidden until the first count lands so the tiles
                  don't flash "none nearby" while the request is still out. */}
              <Text
                numberOfLines={1}
                className={`mt-0.5 text-[10px] font-JakartaMedium ${
                  loading
                    ? "text-transparent"
                    : counts[item.id] > 0
                      ? "text-emerald-600 dark:text-emerald-400"
                      : "text-general-200 dark:text-neutral-500"
                }`}
              >
                {counts[item.id] > 0
                  ? t("services.nearbyCount", { n: counts[item.id] })
                  : t("services.noneNearby")}
              </Text>
            </TouchableOpacity>
          );
        })}
      </View>

      {selected ? (
        <Text className="mt-3 text-sm font-Jakarta text-general-200 dark:text-neutral-400">
          {t(selected.taglineKey)}
        </Text>
      ) : null}
    </View>
  );
};