import { router } from "expo-router";
import { ScrollView, View } from "react-native";
import { Button } from "@/components/ui/Button";
import { Card } from "@/components/ui/Card";
import { AppHeader } from "@/components/ui/Header";
import { Screen } from "@/components/ui/Screen";
import { Text } from "@/components/ui/Text";
import { PaymentMethodList } from "@/components/checkout/PaymentMethodList";
import { routes } from "@/lib/routes";
import { useLocationStore, type PaymentMethod } from "@/lib/stores/locationStore";
import { colors, gutter } from "@/lib/theme";

const ALL: PaymentMethod[] = [
  "chapa",
  "arifpay",
  "telebirr",
  "mpesa",
  "bank",
  "cod",
  "pay_at_branch",
];

export default function PaymentMethodsScreen() {
  const payment = useLocationStore((s) => s.paymentPreference);
  const setPayment = useLocationStore((s) => s.setPaymentPreference);

  return (
    <Screen>
      <AppHeader title="Payment methods" subtitle="Preferred checkout channel" />
      <ScrollView
        contentContainerStyle={{
          paddingHorizontal: gutter,
          paddingBottom: 40,
          gap: 14,
        }}
      >
        <Card elevated={false}>
          <Text variant="bodySm" color={colors.muted}>
            Saved preference is pre-selected at checkout. Card/wallet tokens are not
            stored in this demo — gateway handoff happens at pay time.
          </Text>
        </Card>
        <PaymentMethodList
          methods={ALL}
          selected={payment}
          onSelect={setPayment}
          title="Preferred method"
        />
        <Button title="Done" onPress={() => router.back()} />
        <Button
          title="Go to checkout"
          variant="outline"
          onPress={() => router.push(routes.checkout)}
        />
      </ScrollView>
    </Screen>
  );
}