import { scrollViewWebProps } from '@/lib/ui/scroll-props';
import { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  Image,
  ActivityIndicator,
  TextInput,
  Platform,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useRouter, Stack } from "expo-router";
import {
  ChevronLeft,
  Search,
  Filter,
  CheckCircle,
  Clock,
  XCircle,
  TrendingUp,
  TrendingDown,
  Repeat,
  Bell,
  MoreVertical,
} from "lucide-react-native";

import Colors from "@/constants/colors";
import { trpc } from "@/lib/trpc";
import { useAuth } from "@/lib/auth-context";
import { showAlert } from "@/lib/utils/alert";
import { DropdownMenu } from "@/components/DropdownMenu";

type FilterType = "all" | "sent" | "received" | "pending" | "completed" | "failed";

export default function TransactionHistoryScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const { user } = useAuth();
  const reminderMutation = trpc.reminders.send.useMutation({
    onSuccess: () => showAlert("Reminder sent", "They'll get a notification about this request."),
    onError: () => showAlert("Couldn't send reminder", "Failed to send payment reminder."),
  });
  const [searchQuery, setSearchQuery] = useState("");
  const [filter, setFilter] = useState<FilterType>("all");
  const [showFilters, setShowFilters] = useState(false);

  const transactionsQuery = trpc.transactions.list.useQuery();
  const transactions = transactionsQuery.data || [];

  const filteredTransactions = transactions.filter((transaction) => {
    const isIncome = transaction.type === "receive" && transaction.to?.id === user?.id;
    const otherUser = isIncome ? transaction.from : transaction.to;
    
    const matchesSearch =
      !searchQuery ||
      otherUser?.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      otherUser?.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
      transaction.note?.toLowerCase().includes(searchQuery.toLowerCase());

    const matchesFilter =
      filter === "all" ||
      (filter === "sent" && !isIncome && transaction.type !== "request") ||
      (filter === "received" && isIncome) ||
      (filter === "pending" && transaction.status === "pending") ||
      (filter === "completed" && transaction.status === "completed") ||
      (filter === "failed" && transaction.status === "failed");

    return matchesSearch && matchesFilter;
  });

  const formatDate = (date: Date) => {
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    const hours = Math.floor(diff / (1000 * 60 * 60));
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));

    if (hours < 1) return "Just now";
    if (hours < 24) return `${hours}h ago`;
    if (days === 1) return "Yesterday";
    if (days < 7) return `${days}d ago`;
    return date.toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: date.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
    });
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "completed":
        return <CheckCircle color={Colors.dark.success} size={16} />;
      case "pending":
        return <Clock color={Colors.dark.warning} size={16} />;
      case "failed":
        return <XCircle color={Colors.dark.error} size={16} />;
      default:
        return <Clock color={Colors.dark.textTertiary} size={16} />;
    }
  };

  const renderTransaction = (transaction: typeof transactions[0]) => {
    const isIncome = transaction.type === "receive" && transaction.to?.id === user?.id;
    const isRequest = transaction.type === "request";
    const otherUser = isIncome ? transaction.from : transaction.to;

    if (!otherUser) return null;

    return (
      <View key={transaction.id} style={styles.transactionCard}>
        <TouchableOpacity
          style={styles.transactionRowTouchable}
          activeOpacity={0.7}
          onPress={() => router.push(`/transaction/${transaction.id}`)}
        >
          <Image
            source={{
              uri: otherUser.avatar || `https://i.pravatar.cc/150?u=${otherUser.id}`,
            }}
            style={styles.avatar}
          />

          <View style={styles.transactionContent}>
            <View style={styles.transactionHeader}>
              <Text style={styles.transactionName}>{otherUser.displayName}</Text>
              <Text
                style={[
                  styles.transactionAmount,
                  isIncome && styles.incomeAmount,
                  transaction.status === "failed" && styles.failedAmount,
                ]}
              >
                {isIncome ? "+" : isRequest ? "" : "-"}${transaction.amount.toFixed(2)}
              </Text>
            </View>

            <View style={styles.transactionMeta}>
              <View style={styles.transactionType}>
                {isIncome ? (
                  <TrendingUp color={Colors.dark.success} size={14} />
                ) : isRequest ? (
                  <Repeat color={Colors.dark.warning} size={14} />
                ) : (
                  <TrendingDown color={Colors.dark.primary} size={14} />
                )}
                <Text style={styles.transactionTypeText}>
                  {isIncome ? "Received" : isRequest ? "Requested" : "Sent"}
                </Text>
              </View>
              <Text style={styles.transactionDate}>{formatDate(transaction.createdAt)}</Text>
            </View>

            {transaction.note && (
              <Text style={styles.transactionNote} numberOfLines={1}>
                {transaction.note}
              </Text>
            )}

            <View style={styles.statusContainer}>
              {getStatusIcon(transaction.status)}
              <Text
                style={[
                  styles.statusText,
                  transaction.status === "completed" && styles.statusCompleted,
                  transaction.status === "pending" && styles.statusPending,
                  transaction.status === "failed" && styles.statusFailed,
                ]}
              >
                {transaction.status.charAt(0).toUpperCase() + transaction.status.slice(1)}
              </Text>
            </View>

            {isRequest && transaction.status === "pending" && transaction.to?.id === user?.id && (
              <TouchableOpacity
                style={styles.remindButton}
                onPress={(e) => {
                  e.stopPropagation();
                  reminderMutation.mutate({ transactionId: transaction.id });
                }}
                disabled={reminderMutation.isPending}
              >
                <Bell size={13} color={Colors.dark.primary} />
                <Text style={styles.remindButtonText}>Send Reminder</Text>
              </TouchableOpacity>
            )}
          </View>
        </TouchableOpacity>

        <DropdownMenu
          align="right"
          trigger={
            <View style={styles.overflowButton}>
              <MoreVertical size={18} color={Colors.dark.textSecondary} />
            </View>
          }
          items={[
            {
              label: "View Details",
              icon: Search,
              onPress: () => router.push(`/transaction/${transaction.id}`),
            },
            ...(isRequest && transaction.status === "pending" && transaction.to?.id === user?.id
              ? [
                  {
                    label: "Send Reminder",
                    icon: Bell,
                    onPress: () => reminderMutation.mutate({ transactionId: transaction.id }),
                  },
                ]
              : []),
            {
              label: "Report a Problem",
              icon: XCircle,
              destructive: true,
              onPress: () => router.push("/disputes"),
            },
          ]}
        />
      </View>
    );
  };

  const filterButtons: { key: FilterType; label: string; icon: typeof CheckCircle }[] = [
    { key: "all", label: "All", icon: Repeat },
    { key: "sent", label: "Sent", icon: TrendingDown },
    { key: "received", label: "Received", icon: TrendingUp },
    { key: "pending", label: "Pending", icon: Clock },
    { key: "completed", label: "Completed", icon: CheckCircle },
    { key: "failed", label: "Failed", icon: XCircle },
  ];

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <Stack.Screen options={{ headerShown: false }} />

      <View style={styles.header}>
        <TouchableOpacity
          onPress={() => router.back()}
          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
        >
          <ChevronLeft color={Colors.dark.text} size={24} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Transaction History</Text>
        <TouchableOpacity
          onPress={() => setShowFilters(!showFilters)}
          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
        >
          <Filter color={Colors.dark.primary} size={24} />
        </TouchableOpacity>
      </View>

      <View style={styles.searchContainer}>
        <Search color={Colors.dark.textSecondary} size={20} />
        <TextInput
          style={styles.searchInput}
          value={searchQuery}
          onChangeText={setSearchQuery}
          placeholder="Search transactions..."
          placeholderTextColor={Colors.dark.textTertiary}
        />
      </View>

      {showFilters && (
        <View style={styles.filtersContainer}>
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={scrollViewWebProps.showsHorizontalScrollIndicator}
            contentContainerStyle={styles.filtersContent}
          >
            {filterButtons.map(({ key, label, icon: Icon }) => (
              <TouchableOpacity
                key={key}
                style={[styles.filterButton, filter === key && styles.filterButtonActive]}
                onPress={() => setFilter(key)}
              >
                <Icon
                  color={filter === key ? Colors.dark.background : Colors.dark.textSecondary}
                  size={16}
                />
                <Text
                  style={[
                    styles.filterButtonText,
                    filter === key && styles.filterButtonTextActive,
                  ]}
                >
                  {label}
                </Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>
      )}

      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}
      >
        {transactionsQuery.isLoading ? (
          <View style={styles.loadingContainer}>
            <ActivityIndicator size="large" color={Colors.dark.primary} />
            <Text style={styles.loadingText}>Loading transactions...</Text>
          </View>
        ) : filteredTransactions.length > 0 ? (
          <View style={styles.transactionList}>
            {filteredTransactions.map(renderTransaction)}
          </View>
        ) : transactions.length === 0 ? (
          <View style={styles.emptyContainer}>
            <Repeat color={Colors.dark.textTertiary} size={64} />
            <Text style={styles.emptyTitle}>No Transactions Yet</Text>
            <Text style={styles.emptyText}>
              Your transaction history will appear here once you start sending or receiving money
            </Text>
          </View>
        ) : (
          <View style={styles.emptyContainer}>
            <Search color={Colors.dark.textTertiary} size={64} />
            <Text style={styles.emptyTitle}>No Results Found</Text>
            <Text style={styles.emptyText}>
              Try adjusting your search or filters
            </Text>
          </View>
        )}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark.background,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: Colors.dark.border,
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: "700" as const,
    color: Colors.dark.text,
  },
  searchContainer: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Colors.dark.surface,
    marginHorizontal: 20,
    marginVertical: 16,
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 12,
    gap: 12,
    borderWidth: 1,
    borderColor: Colors.dark.border,
  },
  searchInput: {
    flex: 1,
    fontSize: 16,
    color: Colors.dark.text,
    ...Platform.select({
      web: {
        outlineStyle: "none" as const,
      },
    }),
  },
  filtersContainer: {
    marginBottom: 16,
  },
  filtersContent: {
    paddingHorizontal: 20,
    gap: 8,
  },
  filterButton: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Colors.dark.surface,
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 20,
    gap: 6,
    borderWidth: 1,
    borderColor: Colors.dark.border,
  },
  filterButtonActive: {
    backgroundColor: Colors.dark.primary,
    borderColor: Colors.dark.primary,
  },
  filterButtonText: {
    fontSize: 14,
    fontWeight: "600" as const,
    color: Colors.dark.textSecondary,
  },
  filterButtonTextActive: {
    color: Colors.dark.background,
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    paddingBottom: 20,
  },
  transactionList: {
    paddingHorizontal: 20,
    gap: 12,
  },
  transactionCard: {
    flexDirection: "row",
    alignItems: "center" as const,
    backgroundColor: Colors.dark.surface,
    padding: 16,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    gap: 8,
  },
  transactionRowTouchable: {
    flex: 1,
    flexDirection: "row" as const,
    gap: 12,
  },
  overflowButton: {
    padding: 6,
    alignSelf: "flex-start" as const,
  },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: Colors.dark.surfaceElevated,
  },
  transactionContent: {
    flex: 1,
    gap: 6,
  },
  transactionHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  transactionName: {
    fontSize: 16,
    fontWeight: "600" as const,
    color: Colors.dark.text,
    flex: 1,
  },
  transactionAmount: {
    fontSize: 16,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    marginLeft: 12,
  },
  incomeAmount: {
    color: Colors.dark.success,
  },
  failedAmount: {
    color: Colors.dark.error,
    textDecorationLine: "line-through",
  },
  transactionMeta: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  transactionType: {
    flexDirection: "row",
    alignItems: "center",
    gap: 4,
  },
  transactionTypeText: {
    fontSize: 13,
    color: Colors.dark.textSecondary,
  },
  transactionDate: {
    fontSize: 12,
    color: Colors.dark.textTertiary,
  },
  transactionNote: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    lineHeight: 18,
  },
  statusContainer: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
    marginTop: 4,
  },
  statusText: {
    fontSize: 12,
    fontWeight: "600" as const,
  },
  statusCompleted: {
    color: Colors.dark.success,
  },
  statusPending: {
    color: Colors.dark.warning,
  },
  statusFailed: {
    color: Colors.dark.error,
  },
  remindButton: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    gap: 5,
    alignSelf: "flex-start" as const,
    backgroundColor: `${Colors.dark.primary}1A`,
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 8,
    marginTop: 8,
  },
  remindButtonText: {
    fontSize: 11,
    fontWeight: "700" as const,
    color: Colors.dark.primary,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 60,
    gap: 16,
  },
  loadingText: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
  },
  emptyContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 80,
    paddingHorizontal: 40,
    gap: 16,
  },
  emptyTitle: {
    fontSize: 20,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    marginTop: 16,
  },
  emptyText: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    textAlign: "center",
    lineHeight: 20,
  },
});