import { router } from "expo-router";
import { useState } from "react";
import {
  Alert,
  Pressable,
  RefreshControl,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from "react-native";

import { AppBackground } from "@/components/AppBackground";
import { FilterChip } from "@/components/FilterChip";
import { FloatingActionButton } from "@/components/FloatingActionButton";
import { GlassSurface } from "@/components/GlassSurface";
import { LoadingScreen } from "@/components/LoadingScreen";
import { PageHeader } from "@/components/PageHeader";
import { SwipeableRow } from "@/components/SwipeableRow";
import { StatusBadge } from "@/components/StatusBadge";
import { TabPage } from "@/components/TabPage";
import { TabScrollView } from "@/components/TabScrollView";
import { fonts, spacing } from "@/constants/theme";
import { useAppTheme } from "@/contexts/ThemeContext";
import { formatCurrency, formatDate } from "@/lib/format";
import type { ThemeColors } from "@/lib/theme-palette";
import { useThemedStyles } from "@/lib/use-themed-styles";
import { getInvoiceStatus, type InvoiceStatus } from "@/lib/invoice-status";
import { formatTrpcErrorMessage } from "@/lib/trpc-errors";
import { api } from "@/lib/trpc";

const filters: Array<{ label: string; value?: InvoiceStatus | "all" }> = [
  { label: "All", value: "all" },
  { label: "Draft", value: "draft" },
  { label: "Sent", value: "sent" },
  { label: "Paid", value: "paid" },
  { label: "Overdue", value: "overdue" },
];

export default function InvoicesScreen() {
  const { colors } = useAppTheme();
  const styles = useThemedStyles(createInvoicesStyles);
  const [filter, setFilter] = useState<(typeof filters)[number]["value"]>("all");
  const utils = api.useUtils();
  const invoicesQuery = api.invoices.getAll.useQuery();
  const updateStatus = api.invoices.updateStatus.useMutation({
    onSuccess: () => {
      utils.invoices.getAll.invalidate();
      utils.dashboard.getStats.invalidate();
    },
    onError: (err) => Alert.alert("Update failed", err.message),
  });

  const deleteInvoice = api.invoices.delete.useMutation({
    onSuccess: () => {
      utils.invoices.getAll.invalidate();
      utils.dashboard.getStats.invalidate();
    },
    onError: (err) => Alert.alert("Delete failed", err.message),
  });

  if (invoicesQuery.isLoading) {
    return <LoadingScreen message="Loading invoices…" />;
  }

  if (invoicesQuery.error) {
    return (
      <AppBackground>
        <TabPage>
          <View style={styles.errorBox}>
            <Text style={styles.errorTitle}>Could not load invoices</Text>
            <Text style={styles.errorText}>{formatTrpcErrorMessage(invoicesQuery.error)}</Text>
          </View>
        </TabPage>
      </AppBackground>
    );
  }

  const invoices = (invoicesQuery.data ?? []).filter((invoice) => {
    if (filter === "all") return true;
    return getInvoiceStatus(invoice) === filter;
  });

  function promptStatusChange(invoiceId: string, current: InvoiceStatus) {
    const options: Array<{ label: string; status: "draft" | "sent" | "paid" }> = [];

    if (current !== "draft") options.push({ label: "Mark as draft", status: "draft" });
    if (current !== "sent" && current !== "overdue") {
      options.push({ label: "Mark as sent", status: "sent" });
    }
    if (current !== "paid") options.push({ label: "Mark as paid", status: "paid" });

    if (options.length === 0) return;

    Alert.alert("Update status", "Choose a new status", [
      ...options.map((option) => ({
        text: option.label,
        onPress: () => {
          updateStatus.mutate({ id: invoiceId, status: option.status });
        },
      })),
      { text: "Cancel", style: "cancel" },
    ]);
  }

  function confirmDelete(invoiceId: string, label: string) {
    Alert.alert("Delete invoice?", `Remove ${label}? This cannot be undone.`, [
      { text: "Cancel", style: "cancel" },
      {
        text: "Delete",
        style: "destructive",
        onPress: () => deleteInvoice.mutate({ id: invoiceId }),
      },
    ]);
  }

  return (
    <AppBackground>
      <TabPage>
        <TabScrollView
          header={
            <PageHeader title="Invoices" subtitle="Review status, amounts, and due dates" />
          }
          refreshControl={
            <RefreshControl
              refreshing={invoicesQuery.isRefetching}
              onRefresh={() => invoicesQuery.refetch()}
              tintColor={colors.primary}
            />
          }
        >
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            style={styles.filterScroll}
            contentContainerStyle={styles.filters}
          >
            {filters.map((item) => (
              <FilterChip
                key={item.label}
                label={item.label}
                active={filter === item.value}
                onPress={() => setFilter(item.value)}
              />
            ))}
          </ScrollView>

          {invoices.length === 0 ? (
            <View style={styles.empty}>
              <Text style={styles.emptyTitle}>No invoices found</Text>
              <Text style={styles.emptyText}>
                Tap + to create your first invoice, or pull to refresh.
              </Text>
            </View>
          ) : (
            invoices.map((invoice) => {
              const status = getInvoiceStatus(invoice);
              const label = `${invoice.invoicePrefix}${invoice.invoiceNumber}`;
              const actions = [
                {
                  key: "open",
                  label: "Open",
                  icon: "open-outline" as const,
                  color: "#fff",
                  backgroundColor: colors.primary,
                  onPress: () => router.push(`/(app)/invoices/${invoice.id}`),
                },
                ...(status === "draft"
                  ? [
                      {
                        key: "edit",
                        label: "Edit",
                        icon: "create-outline" as const,
                        color: "#fff",
                        backgroundColor: colors.mutedForeground,
                        onPress: () => router.push(`/(app)/invoices/edit/${invoice.id}`),
                      },
                      {
                        key: "send",
                        label: "Send",
                        icon: "send-outline" as const,
                        color: "#fff",
                        backgroundColor: colors.success,
                        onPress: () => router.push(`/(app)/invoices/send/${invoice.id}`),
                      },
                      {
                        key: "delete",
                        label: "Delete",
                        icon: "trash-outline" as const,
                        color: "#fff",
                        backgroundColor: colors.destructive,
                        onPress: () => confirmDelete(invoice.id, label),
                      },
                    ]
                  : [
                      {
                        key: "status",
                        label: "Status",
                        icon: "flag-outline" as const,
                        color: "#fff",
                        backgroundColor: colors.warning,
                        onPress: () => promptStatusChange(invoice.id, status),
                      },
                    ]),
              ];

              return (
                <SwipeableRow key={invoice.id} actions={actions} backgroundColor={colors.cardGlass}>
                  <Pressable
                    onPress={() => router.push(`/(app)/invoices/${invoice.id}`)}
                    onLongPress={() => promptStatusChange(invoice.id, status)}
                  >
                    <GlassSurface style={styles.card}>
                      <View style={styles.cardInner}>
                        <View style={styles.cardTop}>
                          <View style={styles.cardMeta}>
                            <Text style={styles.invoiceNumber}>{label}</Text>
                            <Text style={styles.clientName}>
                              {invoice.client?.name ?? "Client"}
                            </Text>
                          </View>
                          <Text style={styles.amount}>
                            {formatCurrency(invoice.totalAmount, invoice.currency)}
                          </Text>
                        </View>
                        <View style={styles.cardBottom}>
                          <Text style={styles.date}>Due {formatDate(invoice.dueDate)}</Text>
                          <StatusBadge status={status} />
                        </View>
                      </View>
                    </GlassSurface>
                  </Pressable>
                </SwipeableRow>
              );
            })
          )}
        </TabScrollView>
        <FloatingActionButton
          accessibilityLabel="Create invoice"
          onPress={() => {
            Alert.alert("Create invoice", "Choose how to start", [
              { text: "Cancel", style: "cancel" },
              {
                text: "With line items",
                onPress: () => router.push("/(app)/invoices/new"),
              },
              {
                text: "Blank (for timer)",
                onPress: () => router.push("/(app)/invoices/new?blank=1"),
              },
            ]);
          }}
        />
      </TabPage>
    </AppBackground>
  );
}

const createInvoicesStyles = (colors: ThemeColors, _isDark: boolean) =>
  StyleSheet.create({
  filterScroll: {
    flexGrow: 0,
    marginBottom: spacing.sm,
  },
  filters: {
    gap: spacing.sm,
    paddingRight: spacing.md,
  },
  card: {},
  cardInner: {
    padding: spacing.md,
    gap: spacing.md,
  },
  cardTop: {
    flexDirection: "row",
    justifyContent: "space-between",
    gap: spacing.md,
  },
  cardMeta: {
    flex: 1,
    gap: 4,
  },
  invoiceNumber: {
    fontSize: 16,
    fontFamily: fonts.bodySemiBold,
    color: colors.foreground,
  },
  clientName: {
    color: colors.mutedForeground,
    fontSize: 14,
    fontFamily: fonts.body,
  },
  amount: {
    fontSize: 16,
    fontFamily: fonts.bodySemiBold,
    color: colors.foreground,
  },
  cardBottom: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  date: {
    color: colors.mutedForeground,
    fontSize: 13,
    fontFamily: fonts.body,
  },
  empty: {
    padding: spacing.lg,
    alignItems: "center",
    gap: spacing.sm,
  },
  emptyTitle: {
    fontSize: 18,
    fontFamily: fonts.bodySemiBold,
    color: colors.foreground,
  },
  emptyText: {
    textAlign: "center",
    color: colors.mutedForeground,
    fontFamily: fonts.body,
    lineHeight: 20,
  },
  errorBox: {
    flex: 1,
    justifyContent: "center",
    padding: spacing.lg,
    gap: spacing.sm,
  },
  errorTitle: {
    fontSize: 18,
    fontFamily: fonts.bodySemiBold,
    color: colors.foreground,
  },
  errorText: {
    color: colors.mutedForeground,
    fontFamily: fonts.body,
    lineHeight: 20,
  },
});