import { scrollViewWebProps } from '@/lib/ui/scroll-props';
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  ActivityIndicator,
  Modal,
  TextInput,
} from "react-native";
import { Stack, useRouter } from "expo-router";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Colors from "@/constants/colors";
import { trpc } from "@/lib/trpc";
import { showAlert } from "@/lib/utils/alert";
import { useState } from "react";
import {
  ChevronLeft,
  AlertCircle,
  CheckCircle2,
  Clock,
  XCircle,
  FileText,
  Plus,
} from "lucide-react-native";

type DisputeReason = "unauthorized" | "not_received" | "defective" | "not_as_described" | "duplicate" | "other";

const disputeReasons: { value: DisputeReason; label: string }[] = [
  { value: "unauthorized", label: "Unauthorized Transaction" },
  { value: "not_received", label: "Service/Product Not Received" },
  { value: "defective", label: "Defective Product" },
  { value: "not_as_described", label: "Not As Described" },
  { value: "duplicate", label: "Duplicate Charge" },
  { value: "other", label: "Other Issue" },
];

export default function DisputesScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [selectedTransaction, setSelectedTransaction] = useState("");
  const [reason, setReason] = useState<DisputeReason>("unauthorized");
  const [description, setDescription] = useState("");

  const disputesQuery = trpc.disputes.list.useQuery();
  const transactionsQuery = trpc.transactions.list.useQuery();
  const createDisputeMutation = trpc.disputes.create.useMutation({
    onSuccess: (data) => {
      disputesQuery.refetch();
      setShowCreateModal(false);
      resetForm();
      // Instant Dispute Chat - head straight into the dispute instead of
      // an alert, since the chat there opens itself the moment it loads.
      router.push(`/dispute/${data.dispute.id}`);
    },
    onError: (error) => {
      showAlert("Error", "Failed to submit dispute.");
    },
  });

  const resetForm = () => {
    setSelectedTransaction("");
    setReason("unauthorized");
    setDescription("");
  };

  const handleSubmit = () => {
    if (!selectedTransaction || !description) {
      showAlert("Error", "Please select a transaction and provide a description");
      return;
    }

    createDisputeMutation.mutate({
      transactionId: selectedTransaction,
      reason,
      description,
    });
  };

  const getStatusInfo = (status: string) => {
    switch (status) {
      case "pending":
        return {
          icon: Clock,
          color: "#FFA500",
          text: "Pending Review",
        };
      case "investigating":
        return {
          icon: FileText,
          color: "#3B82F6",
          text: "Under Investigation",
        };
      case "resolved":
        return {
          icon: CheckCircle2,
          color: Colors.dark.success,
          text: "Resolved",
        };
      case "rejected":
        return {
          icon: XCircle,
          color: Colors.dark.error,
          text: "Rejected",
        };
      case "closed":
        return {
          icon: CheckCircle2,
          color: Colors.dark.textSecondary,
          text: "Closed",
        };
      default:
        return {
          icon: AlertCircle,
          color: Colors.dark.textSecondary,
          text: status,
        };
    }
  };

  const formatDate = (date: Date) => {
    return new Date(date).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });
  };

  const eligibleTransactions = transactionsQuery.data?.filter(
    (t) => t.status === "completed"
  ) || [];

  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 Disputes</Text>
        <TouchableOpacity
          onPress={() => setShowCreateModal(true)}
          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
        >
          <Plus color={Colors.dark.text} size={24} />
        </TouchableOpacity>
      </View>

      {disputesQuery.isLoading ? (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color={Colors.dark.tint} />
        </View>
      ) : (
        <ScrollView
          style={styles.scrollView}
          contentContainerStyle={styles.content}
          showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}
        >
          {disputesQuery.data && disputesQuery.data.length > 0 ? (
            disputesQuery.data.map((dispute) => {
              const statusInfo = getStatusInfo(dispute.status);
              const StatusIcon = statusInfo.icon;

              return (
                <TouchableOpacity
                  key={dispute.id}
                  style={styles.disputeCard}
                  activeOpacity={0.7}
                  onPress={() => router.push(`/dispute/${dispute.id}`)}
                >
                  <View style={styles.disputeHeader}>
                    <View
                      style={[
                        styles.statusBadge,
                        { backgroundColor: `${statusInfo.color}20` },
                      ]}
                    >
                      <StatusIcon size={16} color={statusInfo.color} />
                      <Text
                        style={[styles.statusText, { color: statusInfo.color }]}
                      >
                        {statusInfo.text}
                      </Text>
                    </View>
                    <Text style={styles.disputeDate}>
                      {formatDate(dispute.createdAt)}
                    </Text>
                  </View>

                  <Text style={styles.disputeReason}>
                    {disputeReasons.find((r) => r.value === dispute.reason)?.label}
                  </Text>
                  <Text style={styles.disputeDescription} numberOfLines={2}>
                    {dispute.description}
                  </Text>

                  {dispute.resolution && (
                    <View style={styles.resolution}>
                      <Text style={styles.resolutionLabel}>Resolution:</Text>
                      <Text style={styles.resolutionText}>
                        {dispute.resolution}
                      </Text>
                    </View>
                  )}

                  <View style={styles.disputeFooterRow}>
                    <Text style={styles.transactionId}>
                      {dispute.isFiler ? "You filed this" : `${dispute.counterparty?.displayName || "Someone"} filed this`}
                    </Text>
                    <Text style={styles.evidenceCount}>
                      {dispute.evidence.length} {dispute.evidence.length === 1 ? "item" : "items"} of evidence
                    </Text>
                  </View>
                </TouchableOpacity>
              );
            })
          ) : (
            <View style={styles.emptyState}>
              <FileText size={64} color={Colors.dark.textSecondary} />
              <Text style={styles.emptyTitle}>No Disputes</Text>
              <Text style={styles.emptyText}>
                You haven&apos;t filed any transaction disputes yet
              </Text>
              <TouchableOpacity
                style={styles.createButton}
                onPress={() => setShowCreateModal(true)}
              >
                <Plus size={20} color={Colors.dark.text} />
                <Text style={styles.createButtonText}>File a Dispute</Text>
              </TouchableOpacity>
            </View>
          )}
        </ScrollView>
      )}

      <Modal
        visible={showCreateModal}
        animationType="slide"
        transparent={true}
        onRequestClose={() => setShowCreateModal(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>File a Dispute</Text>

            <ScrollView
              style={styles.modalScroll}
              showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}
            >
              <View style={styles.inputGroup}>
                <Text style={styles.inputLabel}>Select Transaction</Text>
                <ScrollView
                  style={styles.transactionsList}
                  showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}
                >
                  {eligibleTransactions.length > 0 ? (
                    eligibleTransactions.map((transaction) => (
                      <TouchableOpacity
                        key={transaction.id}
                        style={[
                          styles.transactionOption,
                          selectedTransaction === transaction.id &&
                            styles.transactionOptionActive,
                        ]}
                        onPress={() => setSelectedTransaction(transaction.id)}
                      >
                        <View style={styles.transactionOptionInfo}>
                          <Text style={styles.transactionOptionAmount}>
                            ${transaction.amount.toFixed(2)}
                          </Text>
                          <Text style={styles.transactionOptionDate}>
                            {formatDate(transaction.createdAt)}
                          </Text>
                        </View>
                        {selectedTransaction === transaction.id && (
                          <CheckCircle2 size={20} color={Colors.dark.tint} />
                        )}
                      </TouchableOpacity>
                    ))
                  ) : (
                    <Text style={styles.noTransactionsText}>
                      No eligible transactions found
                    </Text>
                  )}
                </ScrollView>
              </View>

              <View style={styles.inputGroup}>
                <Text style={styles.inputLabel}>Reason for Dispute</Text>
                <View style={styles.reasonsList}>
                  {disputeReasons.map((r) => (
                    <TouchableOpacity
                      key={r.value}
                      style={[
                        styles.reasonOption,
                        reason === r.value && styles.reasonOptionActive,
                      ]}
                      onPress={() => setReason(r.value)}
                    >
                      <Text
                        style={[
                          styles.reasonOptionText,
                          reason === r.value && styles.reasonOptionTextActive,
                        ]}
                      >
                        {r.label}
                      </Text>
                    </TouchableOpacity>
                  ))}
                </View>
              </View>

              <View style={styles.inputGroup}>
                <Text style={styles.inputLabel}>Description *</Text>
                <TextInput
                  style={styles.textArea}
                  value={description}
                  onChangeText={setDescription}
                  placeholder="Please provide detailed information about the issue..."
                  placeholderTextColor={Colors.dark.textSecondary}
                  multiline
                  numberOfLines={4}
                  textAlignVertical="top"
                />
              </View>
            </ScrollView>

            <View style={styles.modalActions}>
              <TouchableOpacity
                style={styles.cancelButton}
                onPress={() => {
                  setShowCreateModal(false);
                  resetForm();
                }}
              >
                <Text style={styles.cancelButtonText}>Cancel</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[
                  styles.submitButton,
                  createDisputeMutation.isPending && styles.submitButtonDisabled,
                ]}
                onPress={handleSubmit}
                disabled={createDisputeMutation.isPending}
              >
                {createDisputeMutation.isPending ? (
                  <ActivityIndicator size="small" color={Colors.dark.text} />
                ) : (
                  <Text style={styles.submitButtonText}>Submit Dispute</Text>
                )}
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark.background,
  },
  header: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    justifyContent: "space-between" as const,
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: Colors.dark.border,
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: "700" as const,
    color: Colors.dark.text,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: "center" as const,
    alignItems: "center" as const,
  },
  scrollView: {
    flex: 1,
  },
  content: {
    padding: 20,
    gap: 16,
  },
  disputeCard: {
    backgroundColor: Colors.dark.card,
    borderRadius: 16,
    padding: 20,
  },
  disputeHeader: {
    flexDirection: "row" as const,
    justifyContent: "space-between" as const,
    alignItems: "center" as const,
    marginBottom: 16,
  },
  statusBadge: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    gap: 6,
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 12,
  },
  statusText: {
    fontSize: 12,
    fontWeight: "700" as const,
  },
  disputeDate: {
    fontSize: 12,
    color: Colors.dark.textSecondary,
  },
  disputeReason: {
    fontSize: 16,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    marginBottom: 8,
  },
  disputeDescription: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    lineHeight: 20,
    marginBottom: 12,
  },
  resolution: {
    backgroundColor: Colors.dark.background,
    borderRadius: 12,
    padding: 12,
    marginBottom: 12,
  },
  resolutionLabel: {
    fontSize: 12,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    marginBottom: 4,
  },
  resolutionText: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    lineHeight: 18,
  },
  transactionId: {
    fontSize: 11,
    color: Colors.dark.textSecondary,
    fontFamily: "monospace",
  },
  disputeFooterRow: {
    flexDirection: "row" as const,
    justifyContent: "space-between" as const,
    alignItems: "center" as const,
    marginTop: 8,
  },
  evidenceCount: {
    fontSize: 12,
    fontWeight: "600" as const,
    color: Colors.dark.primary,
  },
  emptyState: {
    flex: 1,
    justifyContent: "center" as const,
    alignItems: "center" as const,
    paddingVertical: 80,
    gap: 16,
  },
  emptyTitle: {
    fontSize: 20,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    marginTop: 16,
  },
  emptyText: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    textAlign: "center" as const,
    paddingHorizontal: 40,
  },
  createButton: {
    flexDirection: "row" as const,
    backgroundColor: Colors.dark.tint,
    borderRadius: 12,
    paddingHorizontal: 24,
    paddingVertical: 14,
    alignItems: "center" as const,
    gap: 8,
    marginTop: 16,
  },
  createButtonText: {
    fontSize: 16,
    fontWeight: "700" as const,
    color: Colors.dark.text,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    justifyContent: "flex-end" as const,
  },
  modalContent: {
    backgroundColor: Colors.dark.card,
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    padding: 24,
    maxHeight: "90%",
  },
  modalTitle: {
    fontSize: 24,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    marginBottom: 24,
  },
  modalScroll: {
    maxHeight: 500,
  },
  inputGroup: {
    marginBottom: 24,
  },
  inputLabel: {
    fontSize: 14,
    fontWeight: "600" as const,
    color: Colors.dark.text,
    marginBottom: 12,
  },
  transactionsList: {
    maxHeight: 200,
  },
  transactionOption: {
    flexDirection: "row" as const,
    justifyContent: "space-between" as const,
    alignItems: "center" as const,
    backgroundColor: Colors.dark.background,
    borderRadius: 12,
    padding: 16,
    marginBottom: 8,
    borderWidth: 2,
    borderColor: "transparent",
  },
  transactionOptionActive: {
    borderColor: Colors.dark.tint,
  },
  transactionOptionInfo: {
    flex: 1,
  },
  transactionOptionAmount: {
    fontSize: 16,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    marginBottom: 4,
  },
  transactionOptionDate: {
    fontSize: 12,
    color: Colors.dark.textSecondary,
  },
  noTransactionsText: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    textAlign: "center" as const,
    paddingVertical: 20,
  },
  reasonsList: {
    flexDirection: "row" as const,
    flexWrap: "wrap" as const,
    gap: 8,
  },
  reasonOption: {
    backgroundColor: Colors.dark.background,
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderWidth: 1,
    borderColor: Colors.dark.border,
  },
  reasonOptionActive: {
    backgroundColor: Colors.dark.tint,
    borderColor: Colors.dark.tint,
  },
  reasonOptionText: {
    fontSize: 12,
    fontWeight: "600" as const,
    color: Colors.dark.textSecondary,
  },
  reasonOptionTextActive: {
    color: Colors.dark.text,
  },
  textArea: {
    backgroundColor: Colors.dark.background,
    borderRadius: 12,
    padding: 16,
    fontSize: 16,
    color: Colors.dark.text,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    minHeight: 120,
  },
  modalActions: {
    flexDirection: "row" as const,
    gap: 12,
    marginTop: 24,
  },
  cancelButton: {
    flex: 1,
    backgroundColor: Colors.dark.background,
    borderRadius: 12,
    padding: 16,
    alignItems: "center" as const,
  },
  cancelButtonText: {
    fontSize: 16,
    fontWeight: "600" as const,
    color: Colors.dark.text,
  },
  submitButton: {
    flex: 1,
    backgroundColor: Colors.dark.tint,
    borderRadius: 12,
    padding: 16,
    alignItems: "center" as const,
  },
  submitButtonDisabled: {
    opacity: 0.5,
  },
  submitButtonText: {
    fontSize: 16,
    fontWeight: "700" as const,
    color: Colors.dark.text,
  },
});