import React from "react";
import { View, ScrollView, Pressable } from "react-native";
import { router } from "expo-router";
import { Text } from "@/components/ui/text";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { MOCK_PAYMENTS } from "@/lib/mock-data";
import { ScanLine, CheckCircle2, Wallet, ChevronRight } from "@/lib/icons";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { StandardHeader } from "@/components/StandardHeader";

const PRIMARY = "#ea580c";

export default function PaymentsScreen() {
  const matched = MOCK_PAYMENTS.filter((p) => p.matched);
  const pending = MOCK_PAYMENTS.filter((p) => !p.matched);

  return (
    <ScreenWrapper className="bg-background">
      <StandardHeader />
      <ScrollView
        className="flex-1"
        contentContainerStyle={{ padding: 20, paddingBottom: 150 }}
        showsVerticalScrollIndicator={false}
      >
        <Button className="mb-4 h-10 rounded-[10px] bg-primary shadow-lg shadow-primary/30">
          <ScanLine color="#ffffff" size={18} strokeWidth={2.5} />
          <Text className=" text-white text-xs font-semibold uppercase tracking-widest">
            Scan SMS
          </Text>
        </Button>

        <View className="mb-4 flex-row items-center gap-3">
          <Text variant="h4" className="text-foreground">
            Pending Match
          </Text>
        </View>

        <View className="gap-2">
          {pending.map((pay) => (
            <Pressable
              key={pay.id}
              onPress={() => router.push(`/payments/${pay.id}`)}
            >
              <Card className="rounded-[10px]  bg-card overflow-hidden">
                <View className="flex-row items-center p-3">
                  <View className="mr-2 rounded-[6px] bg-primary/10 p-2 border border-primary/5">
                    <Wallet color={PRIMARY} size={18} strokeWidth={2.5} />
                  </View>
                  <View className="flex-1 mt-[-15px]">
                    <Text variant="p" className="text-foreground font-bold">
                      ${pay.amount.toLocaleString()}
                    </Text>
                    <Text variant="muted" className="text-xs">
                      {pay.source} · {pay.date}
                    </Text>
                  </View>
                  <View className="bg-amber-500/10 px-4 py-2 rounded-[6px]">
                    <Text className="text-amber-700 text-[10px] font-semibold">
                      Match
                    </Text>
                  </View>
                </View>
              </Card>
            </Pressable>
          ))}
        </View>

        <View className="mb-4 mt-4 flex-row items-center gap-3">
          <Text variant="h4" className="text-foreground">
            Reconciled
          </Text>
        </View>

        <View className="gap-2">
          {matched.map((pay) => (
            <Card
              key={pay.id}
              className="rounded-[10px]  bg-card overflow-hidden opacity-80"
            >
              <View className="flex-row items-center p-3">
                <View className="mr-2 rounded-[6px] bg-emerald-500/10 p-2 border border-emerald-500/5">
                  <CheckCircle2 color="#10b981" size={18} strokeWidth={2.5} />
                </View>
                <View className="flex-1 mt-[-15px]">
                  <Text variant="p" className="text-foreground font-bold">
                    ${pay.amount.toLocaleString()}
                  </Text>
                  <Text variant="muted" className="text-xs">
                    {pay.source} · {pay.date}
                  </Text>
                </View>
                <ChevronRight
                  className="text-foreground"
                  size={18}
                  strokeWidth={2}
                  color="#000"
                />
              </View>
            </Card>
          ))}
        </View>
      </ScrollView>
    </ScreenWrapper>
  );
}