"use client";

import { useState, useMemo, useEffect, useCallback } from "react";
import { useSearchParams } from "next/navigation";
import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
import {
  TransactionFilters,
  TransactionBulkActions,
  TransactionTable,
} from "@/components/transactions";
import { RuleCreateDialog } from "@/components/rules";
import { OFXImportDialog } from "@/components/import/ofx-import-dialog";
import { useBankingMetadata, useTransactions } from "@/lib/hooks";
import { updateCategory } from "@/lib/store-db";
import { useQueryClient } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Upload } from "lucide-react";
import type { Transaction } from "@/lib/types";
import type { TransactionsPaginatedParams } from "@/services/banking.service";
import {
  normalizeDescription,
  suggestKeyword,
} from "@/components/rules/constants";

type SortField = "date" | "amount" | "description";
type SortOrder = "asc" | "desc";
type Period = "1month" | "3months" | "6months" | "12months" | "custom" | "all";

const PAGE_SIZE = 100;

export default function TransactionsPage() {
  const searchParams = useSearchParams();
  const queryClient = useQueryClient();
  const { data: metadata, isLoading: isLoadingMetadata } = useBankingMetadata();
  const [searchQuery, setSearchQuery] = useState("");
  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState("");
  const [selectedAccounts, setSelectedAccounts] = useState<string[]>(["all"]);
  const [page, setPage] = useState(0);

  // Debounce search query
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedSearchQuery(searchQuery);
      setPage(0); // Reset to first page when search changes
    }, 300);
    return () => clearTimeout(timer);
  }, [searchQuery]);

  useEffect(() => {
    const accountId = searchParams.get("accountId");
    if (accountId) {
      setSelectedAccounts([accountId]);
      setPage(0);
    }
  }, [searchParams]);

  const [selectedCategories, setSelectedCategories] = useState<string[]>([
    "all",
  ]);
  const [showReconciled, setShowReconciled] = useState<string>("all");
  const [period, setPeriod] = useState<Period>("all");
  const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
    undefined
  );
  const [customEndDate, setCustomEndDate] = useState<Date | undefined>(
    undefined
  );
  const [isCustomDatePickerOpen, setIsCustomDatePickerOpen] = useState(false);
  const [sortField, setSortField] = useState<SortField>("date");
  const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
  const [selectedTransactions, setSelectedTransactions] = useState<Set<string>>(
    new Set()
  );
  const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
  const [ruleTransaction, setRuleTransaction] = useState<Transaction | null>(
    null
  );

  // Get start date based on period
  const startDate = useMemo(() => {
    const now = new Date();
    switch (period) {
      case "1month":
        return new Date(now.getFullYear(), now.getMonth() - 1, 1);
      case "3months":
        return new Date(now.getFullYear(), now.getMonth() - 3, 1);
      case "6months":
        return new Date(now.getFullYear(), now.getMonth() - 6, 1);
      case "12months":
        return new Date(now.getFullYear(), now.getMonth() - 12, 1);
      case "custom":
        return customStartDate || new Date(0);
      default:
        return new Date(0);
    }
  }, [period, customStartDate]);

  // Get end date (only for custom period)
  const endDate = useMemo(() => {
    if (period === "custom" && customEndDate) {
      return customEndDate;
    }
    return undefined;
  }, [period, customEndDate]);

  // Build transaction query params
  const transactionParams = useMemo(() => {
    const params: TransactionsPaginatedParams = {
      limit: PAGE_SIZE,
      offset: page * PAGE_SIZE,
      sortField,
      sortOrder,
    };

    if (startDate && period !== "all") {
      params.startDate = startDate.toISOString().split("T")[0];
    }
    if (endDate) {
      params.endDate = endDate.toISOString().split("T")[0];
    }
    if (!selectedAccounts.includes("all")) {
      params.accountIds = selectedAccounts;
    }
    if (!selectedCategories.includes("all")) {
      if (selectedCategories.includes("uncategorized")) {
        params.includeUncategorized = true;
      } else {
        params.categoryIds = selectedCategories;
      }
    }
    if (debouncedSearchQuery) {
      params.search = debouncedSearchQuery;
    }
    if (showReconciled !== "all") {
      params.isReconciled = showReconciled === "reconciled";
    }

    return params;
  }, [
    page,
    startDate,
    endDate,
    selectedAccounts,
    selectedCategories,
    debouncedSearchQuery,
    showReconciled,
    sortField,
    sortOrder,
    period,
  ]);

  // Fetch transactions with pagination
  const {
    data: transactionsData,
    isLoading: isLoadingTransactions,
    invalidate: invalidateTransactions,
  } = useTransactions(transactionParams, !!metadata);

  // Reset page when filters change
  useEffect(() => {
    setPage(0);
  }, [
    startDate,
    endDate,
    selectedAccounts,
    selectedCategories,
    debouncedSearchQuery,
    showReconciled,
    sortField,
    sortOrder,
  ]);

  // For filter comboboxes, we'll use empty arrays for now
  // They can be enhanced later with separate queries if needed
  const transactionsForAccountFilter: Transaction[] = [];
  const transactionsForCategoryFilter: Transaction[] = [];

  const handleCreateRule = useCallback((transaction: Transaction) => {
    setRuleTransaction(transaction);
    setRuleDialogOpen(true);
  }, []);

  // Create a virtual group for the rule dialog based on selected transaction
  // Note: This requires fetching similar transactions - simplified for now
  const ruleGroup = useMemo(() => {
    if (!ruleTransaction || !transactionsData) return null;

    // Use transactions from current page to find similar ones
    const normalizedDesc = normalizeDescription(ruleTransaction.description);
    const similarTransactions = transactionsData.transactions.filter(
      (t) => normalizeDescription(t.description) === normalizedDesc
    );

    if (similarTransactions.length === 0) return null;

    return {
      key: normalizedDesc,
      displayName: ruleTransaction.description,
      transactions: similarTransactions,
      totalAmount: similarTransactions.reduce((sum, t) => sum + t.amount, 0),
      suggestedKeyword: suggestKeyword(
        similarTransactions.map((t) => t.description)
      ),
    };
  }, [ruleTransaction, transactionsData]);

  const handleSaveRule = useCallback(
    async (ruleData: {
      keyword: string;
      categoryId: string;
      applyToExisting: boolean;
      transactionIds: string[];
    }) => {
      if (!metadata) return;

      // 1. Add keyword to category
      const category = metadata.categories.find(
        (c: { id: string }) => c.id === ruleData.categoryId
      );
      if (!category) {
        throw new Error("Category not found");
      }

      // Check if keyword already exists
      const keywordExists = category.keywords.some(
        (k: string) => k.toLowerCase() === ruleData.keyword.toLowerCase()
      );

      if (!keywordExists) {
        await updateCategory({
          ...category,
          keywords: [...category.keywords, ruleData.keyword],
        });
      }

      // 2. Apply to existing transactions if requested
      if (ruleData.applyToExisting) {
        await Promise.all(
          ruleData.transactionIds.map((id) =>
            fetch("/api/banking/transactions", {
              method: "PUT",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ id, categoryId: ruleData.categoryId }),
            })
          )
        );
      }

      // Invalidate queries
      queryClient.invalidateQueries({ queryKey: ["transactions"] });
      queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
      setRuleDialogOpen(false);
    },
    [metadata, queryClient]
  );

  const invalidateAll = useCallback(() => {
    invalidateTransactions();
    queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
  }, [invalidateTransactions, queryClient]);

  if (isLoadingMetadata || !metadata) {
    return <LoadingState />;
  }

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("fr-FR", {
      style: "currency",
      currency: "EUR",
    }).format(amount);
  };

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString("fr-FR", {
      day: "2-digit",
      month: "short",
      year: "numeric",
    });
  };

  const toggleReconciled = async (transactionId: string) => {
    if (!transactionsData) return;

    const transaction = transactionsData.transactions.find(
      (t) => t.id === transactionId
    );
    if (!transaction) return;

    const updatedTransaction = {
      ...transaction,
      isReconciled: !transaction.isReconciled,
    };

    try {
      await fetch("/api/banking/transactions", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(updatedTransaction),
      });
      invalidateTransactions();
    } catch (error) {
      console.error("Failed to update transaction:", error);
    }
  };

  const markReconciled = async (transactionId: string) => {
    if (!transactionsData) return;

    const transaction = transactionsData.transactions.find(
      (t) => t.id === transactionId
    );
    if (!transaction || transaction.isReconciled) return;

    const updatedTransaction = {
      ...transaction,
      isReconciled: true,
    };

    try {
      await fetch("/api/banking/transactions", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(updatedTransaction),
      });
      invalidateTransactions();
    } catch (error) {
      console.error("Failed to update transaction:", error);
    }
  };

  const setCategory = async (
    transactionId: string,
    categoryId: string | null
  ) => {
    if (!transactionsData) return;

    const transaction = transactionsData.transactions.find(
      (t) => t.id === transactionId
    );
    if (!transaction) return;

    const updatedTransaction = { ...transaction, categoryId };

    try {
      await fetch("/api/banking/transactions", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(updatedTransaction),
      });
      invalidateTransactions();
    } catch (error) {
      console.error("Failed to update transaction:", error);
    }
  };

  const bulkReconcile = async (reconciled: boolean) => {
    if (!transactionsData) return;

    const transactionsToUpdate = transactionsData.transactions.filter((t) =>
      selectedTransactions.has(t.id)
    );

    setSelectedTransactions(new Set());

    try {
      await Promise.all(
        transactionsToUpdate.map((t) =>
          fetch("/api/banking/transactions", {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ ...t, isReconciled: reconciled }),
          })
        )
      );
      invalidateTransactions();
    } catch (error) {
      console.error("Failed to update transactions:", error);
    }
  };

  const bulkSetCategory = async (categoryId: string | null) => {
    if (!transactionsData) return;

    const transactionsToUpdate = transactionsData.transactions.filter((t) =>
      selectedTransactions.has(t.id)
    );

    setSelectedTransactions(new Set());

    try {
      await Promise.all(
        transactionsToUpdate.map((t) =>
          fetch("/api/banking/transactions", {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ ...t, categoryId }),
          })
        )
      );
      invalidateTransactions();
    } catch (error) {
      console.error("Failed to update transactions:", error);
    }
  };

  const toggleSelectAll = () => {
    if (!transactionsData) return;
    if (selectedTransactions.size === transactionsData.transactions.length) {
      setSelectedTransactions(new Set());
    } else {
      setSelectedTransactions(
        new Set(transactionsData.transactions.map((t) => t.id))
      );
    }
  };

  const toggleSelectTransaction = (id: string) => {
    const newSelected = new Set(selectedTransactions);
    if (newSelected.has(id)) {
      newSelected.delete(id);
    } else {
      newSelected.add(id);
    }
    setSelectedTransactions(newSelected);
  };

  const handleSortChange = (field: SortField) => {
    if (sortField === field) {
      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
    } else {
      setSortField(field);
      setSortOrder(field === "date" ? "desc" : "asc");
    }
    setPage(0);
  };

  const deleteTransaction = async (transactionId: string) => {
    // Remove from selected if selected
    const newSelected = new Set(selectedTransactions);
    newSelected.delete(transactionId);
    setSelectedTransactions(newSelected);

    try {
      const response = await fetch(
        `/api/banking/transactions?id=${transactionId}`,
        {
          method: "DELETE",
        }
      );
      if (!response.ok) throw new Error("Failed to delete transaction");
      invalidateTransactions();
    } catch (error) {
      console.error("Failed to delete transaction:", error);
    }
  };

  const filteredTransactions = transactionsData?.transactions || [];
  const totalTransactions = transactionsData?.total || 0;
  const hasMore = transactionsData?.hasMore || false;

  return (
    <PageLayout>
      <PageHeader
        title="Transactions"
        description={`${totalTransactions} transaction${totalTransactions > 1 ? "s" : ""}`}
        actions={
          <OFXImportDialog onImportComplete={invalidateAll}>
            <Button>
              <Upload className="w-4 h-4 mr-2" />
              Importer OFX
            </Button>
          </OFXImportDialog>
        }
      />

      <TransactionFilters
        searchQuery={searchQuery}
        onSearchChange={setSearchQuery}
        selectedAccounts={selectedAccounts}
        onAccountsChange={(accounts) => {
          setSelectedAccounts(accounts);
          setPage(0);
        }}
        selectedCategories={selectedCategories}
        onCategoriesChange={(categories) => {
          setSelectedCategories(categories);
          setPage(0);
        }}
        showReconciled={showReconciled}
        onReconciledChange={(value) => {
          setShowReconciled(value);
          setPage(0);
        }}
        period={period}
        onPeriodChange={(p) => {
          setPeriod(p);
          setPage(0);
          if (p !== "custom") {
            setIsCustomDatePickerOpen(false);
          } else {
            setIsCustomDatePickerOpen(true);
          }
        }}
        customStartDate={customStartDate}
        customEndDate={customEndDate}
        onCustomStartDateChange={(date) => {
          setCustomStartDate(date);
          setPage(0);
        }}
        onCustomEndDateChange={(date) => {
          setCustomEndDate(date);
          setPage(0);
        }}
        isCustomDatePickerOpen={isCustomDatePickerOpen}
        onCustomDatePickerOpenChange={setIsCustomDatePickerOpen}
        accounts={metadata.accounts}
        folders={metadata.folders}
        categories={metadata.categories}
        transactionsForAccountFilter={transactionsForAccountFilter}
        transactionsForCategoryFilter={transactionsForCategoryFilter}
      />

      <TransactionBulkActions
        selectedCount={selectedTransactions.size}
        categories={metadata.categories}
        onReconcile={bulkReconcile}
        onSetCategory={bulkSetCategory}
      />

      {isLoadingTransactions ? (
        <LoadingState />
      ) : (
        <>
          <TransactionTable
            transactions={filteredTransactions}
            accounts={metadata.accounts}
            categories={metadata.categories}
            selectedTransactions={selectedTransactions}
            sortField={sortField}
            sortOrder={sortOrder}
            onSortChange={handleSortChange}
            onToggleSelectAll={toggleSelectAll}
            onToggleSelectTransaction={toggleSelectTransaction}
            onToggleReconciled={toggleReconciled}
            onMarkReconciled={markReconciled}
            onSetCategory={setCategory}
            onCreateRule={handleCreateRule}
            onDelete={deleteTransaction}
            formatCurrency={formatCurrency}
            formatDate={formatDate}
          />

          {/* Pagination controls */}
          {totalTransactions > PAGE_SIZE && (
            <div className="flex items-center justify-between mt-4">
              <div className="text-sm text-muted-foreground">
                Affichage de {page * PAGE_SIZE + 1} à{" "}
                {Math.min((page + 1) * PAGE_SIZE, totalTransactions)} sur{" "}
                {totalTransactions}
              </div>
              <div className="flex gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setPage((p) => Math.max(0, p - 1))}
                  disabled={page === 0}
                >
                  Précédent
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setPage((p) => p + 1)}
                  disabled={!hasMore}
                >
                  Suivant
                </Button>
              </div>
            </div>
          )}
        </>
      )}

      <RuleCreateDialog
        open={ruleDialogOpen}
        onOpenChange={setRuleDialogOpen}
        group={ruleGroup}
        categories={metadata.categories}
        onSave={handleSaveRule}
      />
    </PageLayout>
  );
}