import { View, ScrollView, Pressable } from "react-native";
import { useSirouRouter, useSirouParams } from "@sirou/react-native";
import { AppRoutes } from "@/lib/routes";
import { Stack } from "expo-router";
import { Text } from "@/components/ui/text";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { ArrowLeft, Wallet, Link2, Clock } from "@/lib/icons";
import { ScreenWrapper } from "@/components/ScreenWrapper";

export default function PaymentDetailScreen() {
  const nav = useSirouRouter<AppRoutes>();
  const { id } = useSirouParams<AppRoutes, "payments/[id]">();

  return (
    <ScreenWrapper className="bg-background">
      <Stack.Screen options={{ headerShown: false }} />

      <View className="px-6 pt-4 flex-row justify-between items-center">
        <Pressable
          onPress={() => nav.back()}
          className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
        >
          <ArrowLeft color="#0f172a" size={20} />
        </Pressable>
        <Text variant="h4" className="text-foreground font-semibold">
          Payment Match
        </Text>
        <View className="w-9" />
      </View>

      <ScrollView
        className="flex-1"
        contentContainerStyle={{ padding: 16, paddingBottom: 120 }}
        showsVerticalScrollIndicator={false}
      >
        <Card className=" overflow-hidden rounded-[6px] border-0 bg-primary">
          <View className="p-5">
            <View className="flex-row items-center justify-between mb-3">
              <View className="bg-white/20 p-1.5 rounded-[6px]">
                <Wallet color="white" size={18} strokeWidth={2.5} />
              </View>
              <View className="bg-amber-500/20 px-3 py-1 rounded-[6px] border border-white/10">
                <Text className={`text-[10px] font-bold text-white`}>
                  Pending Match
                </Text>
              </View>
            </View>

            <Text variant="small" className="text-white/70 mb-0.5">
              Received Amount
            </Text>
            <Text variant="h3" className="text-white font-bold mb-3">
              $2,000.00
            </Text>

            <View className="flex-row items-center gap-3 border-t border-white/40 pt-3">
              <View className="flex-row items-center gap-1.5">
                <Text className="text-white/90 text-xs font-semibold">
                  TXN-9982734
                </Text>
              </View>
              <View className="h-3 w-[1px] bg-white/60" />
              <Text className="text-white/90 text-xs font-semibold">
                Telebirr SMS
              </Text>
            </View>
          </View>
        </Card>

        {/* Transaction Details */}

        <Text variant="h4" className="text-foreground mt-4 mb-2">
          Transaction Details
        </Text>

        <Card className="bg-card rounded-[6px] mb-3">
          <View className="p-4">
            <View className="flex-row items-center justify-between">
              <View className="flex-row items-center gap-2">
                <Clock color="#000" size={13} />
                <Text variant="muted" className="text-sm">
                  Received On
                </Text>
              </View>
              <Text variant="p" className="text-foreground text-sm">
                Sep 11, 2022 · 14:30
              </Text>
            </View>
            <View className="h-[1px] bg-border/70 my-3" />
            <View className="flex-row items-center justify-between py-1">
              <View className="flex-row items-center gap-2">
                <Link2 color="#000" size={13} />
                <Text variant="muted" className="text-sm">
                  Status
                </Text>
              </View>
              <View className="bg-amber-500/10 px-2.5 py-1 rounded-[4px]">
                <Text className="text-amber-600 text-xs font-semibold">
                  Awaiting Link
                </Text>
              </View>
            </View>
          </View>
        </Card>

        {/* SMS Message */}
        <Card className="bg-card rounded-[6px] mb-6">
          <View className="p-4">
            <Text variant="muted" className="mb-3 font-semibold">
              Original SMS
            </Text>
            <Text className="text-foreground/70 font-medium leading-6 text-sm">
              "Payment received from Elnatan Jansen for order #2322 via
              Telebirr. Amount: $2,000. Ref: B88-22X7."
            </Text>
          </View>
        </Card>

        {/* Action */}

        <Button className="mb-4 h-10 rounded-[10px] bg-primary shadow-lg shadow-primary/30">
          <Link2 color="white" size={18} strokeWidth={2.5} />
          <Text className=" text-white text-xs font-semibold uppercase tracking-widest">
            Associate to Invoice
          </Text>
        </Button>
      </ScrollView>
    </ScreenWrapper>
  );
}