import React from "react";
import { View, ScrollView, Pressable } from "react-native";
import { router } from "expo-router";
import { Text } from "@/components/ui/text";
import { Card } from "@/components/ui/card";
import {
  FileText,
  Wallet,
  ChevronRight,
  TrendingUp,
  TrendingDown,
  Clock,
} from "@/lib/icons";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { ShadowWrapper } from "@/components/ShadowWrapper";
import { StandardHeader } from "@/components/StandardHeader";
import { MOCK_INVOICES, MOCK_PAYMENTS } from "@/lib/mock-data";

export default function HistoryScreen() {
  // Combine and sort by date (mocking real activity)
  const activity = [
    ...MOCK_INVOICES.map((inv) => ({
      id: `inv-${inv.id}`,
      type: "Invoice Sent",
      title: inv.recipient,
      amount: inv.amount,
      date: inv.createdAt,
      icon: <FileText size={16} color="#ea580c" />,
    })),
    ...MOCK_PAYMENTS.map((pay) => ({
      id: `pay-${pay.id}`,
      type: "Payment Received",
      title: pay.source,
      amount: pay.amount,
      date: pay.date,
      icon: <Wallet size={16} color="#10b981" />,
    })),
  ].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());

  return (
    <ScreenWrapper className="bg-background">
      <StandardHeader />
      <ScrollView
        className="flex-1"
        contentContainerStyle={{ padding: 16, paddingBottom: 150 }}
        showsVerticalScrollIndicator={false}
      >
        <View className="flex-row gap-2 mb-10">
          <ShadowWrapper className="flex-1">
            <View className="bg-card  rounded-[10px] p-3">
              <View className="h-8 w-8 bg-emerald-500/10 rounded-[6px] items-center justify-center mb-1">
                <TrendingUp color="#10b981" size={16} />
              </View>
              <Text variant="muted" className="font-semibold">
                Inflow
              </Text>
              <Text variant="h3" className="text-foreground">
                $4,120
              </Text>
            </View>
          </ShadowWrapper>
          <ShadowWrapper className="flex-1">
            <View className="bg-card  rounded-[10px] p-3">
              <View className="h-8 w-8 bg-amber-500/10 rounded-[6px] items-center justify-center mb-1">
                <TrendingDown color="#f59e0b" size={16} />
              </View>
              <Text variant="muted" className="font-semibold">
                Pending
              </Text>
              <Text variant="h3" className="text-foreground">
                $1,540
              </Text>
            </View>
          </ShadowWrapper>
        </View>

        <Text variant="h4" className="text-foreground mb-2">
          Recent Activity
        </Text>

        <View className="gap-2">
          {activity.map((item) => (
            <ShadowWrapper key={item.id} level="xs">
              <Card className="rounded-[6px] bg-card overflow-hidden">
                <View className="flex-row items-center p-3">
                  <View className="bg-secondary/50 p-1 rounded-[6px] mr-4 border border-border/10">
                    {item.icon}
                  </View>
                  <View className="flex-1 mt-[-10px]">
                    <Text variant="p" className="text-foreground font-semibold">
                      {item.title}
                    </Text>
                    <Text variant="muted" className="text-xs font-medium">
                      {item.type} · {item.date}
                    </Text>
                  </View>
                  <View className="items-end mt-[-10px]">
                    <Text variant="p" className="text-foreground font-semibold">
                      {item.type.includes("Payment") ? "+" : ""}$
                      {item.amount.toLocaleString()}
                    </Text>
                    <View className="flex-row items-center gap-1">
                      <Clock color="#000" size={12} />
                      <Text className="text-[10px] text-foreground font-semibold">
                        Success
                      </Text>
                    </View>
                  </View>
                </View>
              </Card>
            </ShadowWrapper>
          ))}
        </View>
      </ScrollView>
    </ScreenWrapper>
  );
}