import React, { useState } from "react";
import { View, ScrollView, Pressable } from "react-native";
import { Text } from "@/components/ui/text";
import { Card, CardContent } from "@/components/ui/card";
import { EARNINGS_SUMMARY, MOCK_INVOICES } from "@/lib/mock-data";
import { router } from "expo-router";
import {
  Plus,
  Send,
  History as HistoryIcon,
  BarChart3,
  ChevronRight,
  Clock,
  DollarSign,
  FileText,
} from "@/lib/icons";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { ShadowWrapper } from "@/components/ShadowWrapper";
import { StandardHeader } from "@/components/StandardHeader";

const statusColor: Record<string, string> = {
  Waiting: "bg-amber-500/30 text-amber-600",
  Paid: "bg-emerald-500/30 text-emerald-600",
  Draft: "bg-secondary text-muted-foreground",
  Unpaid: "bg-red-500/30 text-red-600",
};

export default function HomeScreen() {
  const [activeFilter, setActiveFilter] = useState("All");

  const filteredInvoices =
    activeFilter === "All"
      ? MOCK_INVOICES
      : MOCK_INVOICES.filter((inv) => inv.status === activeFilter);

  return (
    <ScreenWrapper className="bg-background">
      <StandardHeader />

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{
          paddingHorizontal: 20,
          paddingTop: 10,
          paddingBottom: 150,
        }}
      >
        {/* Balance Card Section */}
        <View className="mb-4">
          <ShadowWrapper level="lg">
            <Card className="overflow-hidden rounded-[10px] border-0 bg-primary">
              <View className="p-4 relative">
                <View
                  className="absolute -top-10 -right-10 w-48 h-48 bg-white/10 rounded-full"
                  style={{ transform: [{ scale: 1.5 }] }}
                />

                <Text className="text-white/60 text-[14px] font-semibold">
                  Available Balance
                </Text>
                <View className="mt-2 flex-row items-baseline">
                  <Text className="text-white text-2xl font-medium">$</Text>
                  <Text className="ml-1 text-4xl font-bold text-white">
                    {EARNINGS_SUMMARY.balance.toLocaleString()}
                  </Text>
                </View>

                <View className="mt-4 flex-row gap-4">
                  <View className="flex-1 bg-white/15 rounded-[10px] p-2 border border-white/10 backdrop-blur-xl">
                    <View className="flex-row items-center gap-2">
                      <View className="p-1.5 bg-white/20 rounded-lg">
                        <Clock color="white" size={12} strokeWidth={2.5} />
                      </View>
                      <Text className="text-white text-[12px] font-semibold">
                        Pending
                      </Text>
                    </View>
                    <Text className="text-white font-bold text-xl mt-2">
                      ${EARNINGS_SUMMARY.waitingAmount.toLocaleString()}
                    </Text>
                  </View>
                  <View className="flex-1 bg-white/15 rounded-[10px] p-2 border border-white/10 backdrop-blur-xl">
                    <View className="flex-row items-center gap-2">
                      <View className="p-1.5 bg-white/20 rounded-lg">
                        <DollarSign color="white" size={12} strokeWidth={2.5} />
                      </View>
                      <Text className="text-white text-[12px] font-semibold">
                        Income
                      </Text>
                    </View>
                    <Text className="text-white font-bold text-xl mt-2">
                      ${EARNINGS_SUMMARY.paidThisMonth.toLocaleString()}
                    </Text>
                  </View>
                </View>
              </View>
            </Card>
          </ShadowWrapper>
        </View>

        {/* Circular Quick Actions Section */}
        <View className="mb-4 flex-row justify-around items-center px-2">
          <QuickAction
            icon={<Plus color="#000" size={20} strokeWidth={1.5} />}
            label="Scan"
            onPress={() => router.push("/(tabs)/scan")}
          />
          <QuickAction
            icon={<Send color="#000" size={20} strokeWidth={1.5} />}
            label="Send"
            onPress={() => router.push("/(tabs)/proforma")}
          />
          <QuickAction
            icon={<HistoryIcon color="#000" size={20} strokeWidth={1.5} />}
            label="History"
            onPress={() => router.push("/(tabs)/history")}
          />
          <QuickAction
            icon={<BarChart3 color="#000" size={20} strokeWidth={1.5} />}
            label="Analytics"
          />
        </View>

        {/* Recent Activity Header */}
        <View className="mb-4 flex-row justify-between items-center">
          <Text variant="h4" className="text-foreground tracking-tight">
            Recent Activity
          </Text>
          <Pressable className="px-4 py-2 rounded-full">
            <Text className="text-primary font-bold text-xs">View all</Text>
          </Pressable>
        </View>

        {/* Filters */}
        <View className="mb-6">
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={{ gap: 8 }}
          >
            {["All", "Paid", "Waiting", "Unpaid"].map((filter) => (
              <Pressable
                key={filter}
                onPress={() => setActiveFilter(filter)}
                className={`rounded-[4px] px-4 py-1.5 ${activeFilter === filter ? "bg-primary" : "bg-card border border-border"}`}
              >
                <Text
                  className={`text-xs font-bold ${
                    activeFilter === filter
                      ? "text-white"
                      : "text-muted-foreground"
                  }`}
                >
                  {filter}
                </Text>
              </Pressable>
            ))}
          </ScrollView>
        </View>

        {/* Transactions List */}
        <View className="gap-2">
          {filteredInvoices.length > 0 ? (
            filteredInvoices.map((inv) => (
              <Pressable
                key={inv.id}
                onPress={() => router.push(`/invoices/${inv.id}`)}
              >
                <Card className="overflow-hidden rounded-[6px] bg-card">
                  <CardContent className="flex-row items-center py-3 px-2">
                    <View className="bg-secondary/40 rounded-[6px] p-2 mr-2 border border-border/10">
                      <FileText
                        className="text-muted-foreground"
                        size={22}
                        strokeWidth={2}
                      />
                    </View>
                    <View className="flex-1 mt-[-20px]">
                      <Text
                        variant="p"
                        className="text-foreground font-semibold"
                      >
                        {inv.recipient}
                      </Text>
                      <Text
                        variant="muted"
                        className="mt-1 text-[11px] font-medium opacity-70"
                      >
                        {inv.dueDate} · Proforma
                      </Text>
                    </View>
                    <View className="items-end mt-[-20px]">
                      <Text
                        variant="p"
                        className="text-foreground font-semibold"
                      >
                        ${inv.amount.toLocaleString()}
                      </Text>
                      <View
                        className={`mt-1 rounded-[5px] px-3 py-1 border border-border/50 ${statusColor[inv.status]}`}
                      >
                        <Text className="text-[9px] font-semibold uppercase tracking-widest">
                          {inv.status}
                        </Text>
                      </View>
                    </View>
                  </CardContent>
                </Card>
              </Pressable>
            ))
          ) : (
            <View className="py-20 items-center">
              <Text variant="muted">No transactions found</Text>
            </View>
          )}
        </View>
      </ScrollView>
    </ScreenWrapper>
  );
}

function QuickAction({
  icon,
  label,
  onPress,
}: {
  icon: React.ReactNode;
  label: string;
  onPress?: () => void;
}) {
  return (
    <View className="items-center">
      <ShadowWrapper>
        <Pressable
          onPress={onPress}
          className="h-12 w-12 rounded-full bg-background items-center justify-center mb-2"
        >
          {icon}
        </Pressable>
      </ShadowWrapper>
      <Text className="text-foreground text-[12px] font-semibold tracking-tight opacity-90">
        {label}
      </Text>
    </View>
  );
}