import React from "react";
import { View, ScrollView } from "react-native";
import { useSirouRouter } from "@sirou/react-native";
import { useLocalSearchParams, Stack } from "expo-router";
import { AppRoutes } from "@/lib/routes";
import { Text } from "@/components/ui/text";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { CheckCircle2, AlertCircle } from "@/lib/icons";
interface VerificationData {
  payerName: string;
  payerTelebirrNo: string;
  creditedPartyName: string;
  creditedPartyAccountNo: string;
  receiptNo: string;
  paymentDate: string;
  transactionStatus: string;
  totalPaidAmount: string;
  settledAmount: string;
  serviceFee: string;
  serviceFeeVAT: string;
  bankName: string;
  customerNote: string;
}

export default function VerifyPaymentResultScreen() {
  const nav = useSirouRouter<AppRoutes>();
  const { data } = useLocalSearchParams<{ data: string }>();

  let parsed: VerificationData | null = null;
  try {
    parsed = data ? JSON.parse(data) : null;
  } catch {}

  const d = parsed;

  const isCompleted = d?.transactionStatus === "Completed";

  const rows: { label: string; value: string }[] = [
    { label: "Payer", value: d?.payerName ?? "" },
    { label: "Payer Number", value: d?.payerTelebirrNo ?? "" },
    { label: "Credited Party", value: d?.creditedPartyName ?? "" },
    { label: "Credited Account", value: d?.creditedPartyAccountNo ?? "" },
    { label: "Receipt No", value: d?.receiptNo ?? "" },
    { label: "Payment Date", value: d?.paymentDate ?? "" },
    { label: "Status", value: d?.transactionStatus ?? "" },
    { label: "Total Paid", value: d?.totalPaidAmount ?? "" },
    { label: "Settled Amount", value: d?.settledAmount ?? "" },
    { label: "Service Fee", value: d?.serviceFee ?? "" },
    { label: "Service Fee VAT", value: d?.serviceFeeVAT ?? "" },
    { label: "Bank", value: d?.bankName ?? "" },
    { label: "Note", value: d?.customerNote ?? "" },
  ].filter((r) => r.value);

  return (
    <ScreenWrapper className="bg-background">
      <Stack.Screen options={{ headerShown: false }} />
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ padding: 16, paddingBottom: 40 }}
      >
        <View className="items-center mb-8">
          <View className="h-14 w-14 rounded-full bg-card items-center justify-center mb-4">
            {isCompleted ? (
              <CheckCircle2 size={50} color="#22c55e" />
            ) : (
              <AlertCircle size={28} color="#ef4444" />
            )}
          </View>
          <Text
            variant="h3"
            className="text-foreground font-sans-bold text-center"
          >
            Payment Verification
          </Text>
          <Text variant="muted" className="text-sm text-center">
            {isCompleted
              ? "Transaction completed"
              : (d?.transactionStatus ?? "Unknown status")}
          </Text>
        </View>

        <Card>
          <CardContent className="p-0">
            {rows.map((row, i) => (
              <View
                key={row.label}
                className={`flex-row items-center px-4 py-3 ${
                  i < rows.length - 1 ? "border-b border-border/40" : ""
                }`}
              >
                <Text className="text-sm text-muted-foreground flex-1 font-sans-medium">
                  {row.label}
                </Text>
                <Text
                  className={`text-sm font-sans-bold text-right max-w-[55%] ${
                    row.label === "Status"
                      ? isCompleted
                        ? "text-green-600"
                        : "text-red-500"
                      : "text-foreground"
                  }`}
                >
                  {row.value}
                </Text>
              </View>
            ))}
          </CardContent>
        </Card>

        <Button
          className="h-12 bg-primary rounded-[10px] mt-8"
          onPress={() => nav.back()}
        >
          <Text className="text-white font-sans-bold text-base">
            Verify Another
          </Text>
        </Button>
      </ScrollView>
    </ScreenWrapper>
  );
}