import type { Ionicons } from "@expo/vector-icons";
import { Card } from "@/components/ui/Card";
import { OptionRow } from "@/components/ui/Field";
import { Text } from "@/components/ui/Text";
import type { PaymentMethod } from "@/lib/stores/locationStore";
import { colors } from "@/lib/theme";
import { View } from "react-native";

const META: Record<
  PaymentMethod,
  { title: string; hint: string; icon: keyof typeof Ionicons.glyphMap }
> = {
  chapa: { title: "Chapa", hint: "Card / mobile money via Chapa", icon: "card-outline" },
  arifpay: { title: "ArifPay", hint: "Local digital checkout", icon: "wallet-outline" },
  telebirr: { title: "Telebirr", hint: "Ethio telecom Telebirr", icon: "phone-portrait-outline" },
  mpesa: { title: "M-Pesa", hint: "Safaricom M-Pesa", icon: "cash-outline" },
  bank: { title: "Bank transfer", hint: "Transfer + upload receipt later", icon: "business-outline" },
  pay_at_branch: {
    title: "Pay at branch",
    hint: "Cash or POS when you collect",
    icon: "storefront-outline",
  },
  cod: { title: "Cash on delivery", hint: "Pay the rider on arrival", icon: "bicycle-outline" },
};

export function PaymentMethodList({
  methods,
  selected,
  onSelect,
  title = "Payment",
  footnote,
}: {
  methods: PaymentMethod[];
  selected: PaymentMethod;
  onSelect: (m: PaymentMethod) => void;
  title?: string;
  footnote?: string;
}) {
  return (
    <Card elevated={false} padded={false}>
      <View style={{ padding: 16, paddingBottom: 8 }}>
        <Text variant="h3">{title}</Text>
        {footnote ? (
          <Text variant="caption" color={colors.subtle} style={{ marginTop: 4 }}>
            {footnote}
          </Text>
        ) : null}
      </View>
      {methods.map((m, i) => (
        <OptionRow
          key={m}
          title={META[m].title}
          subtitle={META[m].hint}
          selected={selected === m}
          onPress={() => onSelect(m)}
          icon={META[m].icon}
          last={i === methods.length - 1}
        />
      ))}
    </Card>
  );
}

export function paymentLabel(m: PaymentMethod) {
  return META[m]?.title ?? m;
}