"use client";

import { useState, useMemo, useCallback } from "react";
import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
import {
  RuleGroupCard,
  RuleCreateDialog,
  RulesSearchBar,
} from "@/components/rules";
import { useBankingData } from "@/lib/hooks";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Sparkles, RefreshCw } from "lucide-react";
import { updateCategory, autoCategorize, updateTransaction } from "@/lib/store-db";
import {
  normalizeDescription,
  suggestKeyword,
} from "@/components/rules/constants";
import type { Transaction, Category } from "@/lib/types";

interface TransactionGroup {
  key: string;
  displayName: string;
  transactions: Transaction[];
  totalAmount: number;
  suggestedKeyword: string;
}

export default function RulesPage() {
  const { data, isLoading, refresh } = useBankingData();
  const [searchQuery, setSearchQuery] = useState("");
  const [sortBy, setSortBy] = useState<"count" | "amount" | "name">("count");
  const [filterMinCount, setFilterMinCount] = useState(2);
  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
  const [selectedGroup, setSelectedGroup] = useState<TransactionGroup | null>(
    null
  );
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [isAutoCategorizing, setIsAutoCategorizing] = useState(false);

  // Group uncategorized transactions by normalized description
  const transactionGroups = useMemo(() => {
    if (!data?.transactions) return [];

    const uncategorized = data.transactions.filter((t) => !t.categoryId);
    const groups: Record<string, Transaction[]> = {};

    uncategorized.forEach((transaction) => {
      const key = normalizeDescription(transaction.description);
      if (!groups[key]) {
        groups[key] = [];
      }
      groups[key].push(transaction);
    });

    // Convert to array with metadata
    const groupArray: TransactionGroup[] = Object.entries(groups).map(
      ([key, transactions]) => {
        const descriptions = transactions.map((t) => t.description);
        return {
          key,
          displayName: transactions[0].description, // Use first transaction's description as display name
          transactions,
          totalAmount: transactions.reduce((sum, t) => sum + t.amount, 0),
          suggestedKeyword: suggestKeyword(descriptions),
        };
      }
    );

    // Filter by search query
    let filtered = groupArray;
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      filtered = groupArray.filter(
        (g) =>
          g.displayName.toLowerCase().includes(query) ||
          g.key.includes(query) ||
          g.suggestedKeyword.toLowerCase().includes(query)
      );
    }

    // Filter by minimum count
    filtered = filtered.filter((g) => g.transactions.length >= filterMinCount);

    // Sort
    filtered.sort((a, b) => {
      switch (sortBy) {
        case "count":
          return b.transactions.length - a.transactions.length;
        case "amount":
          return Math.abs(b.totalAmount) - Math.abs(a.totalAmount);
        case "name":
          return a.displayName.localeCompare(b.displayName);
        default:
          return 0;
      }
    });

    return filtered;
  }, [data?.transactions, searchQuery, sortBy, filterMinCount]);

  const uncategorizedCount = useMemo(() => {
    if (!data?.transactions) return 0;
    return data.transactions.filter((t) => !t.categoryId).length;
  }, [data?.transactions]);

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

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

  const toggleExpand = useCallback((key: string) => {
    setExpandedGroups((prev) => {
      const next = new Set(prev);
      if (next.has(key)) {
        next.delete(key);
      } else {
        next.add(key);
      }
      return next;
    });
  }, []);

  const handleCreateRule = useCallback((group: TransactionGroup) => {
    setSelectedGroup(group);
    setIsDialogOpen(true);
  }, []);

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

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

      // Check if keyword already exists
      const keywordExists = category.keywords.some(
        (k) => 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) {
        const transactions = data.transactions.filter((t) =>
          ruleData.transactionIds.includes(t.id)
        );

        await Promise.all(
          transactions.map((t) =>
            updateTransaction({ ...t, categoryId: ruleData.categoryId })
          )
        );
      }

      refresh();
    },
    [data, refresh]
  );

  const handleAutoCategorize = useCallback(async () => {
    if (!data) return;

    setIsAutoCategorizing(true);
    try {
      const uncategorized = data.transactions.filter((t) => !t.categoryId);
      let categorizedCount = 0;

      for (const transaction of uncategorized) {
        const categoryId = autoCategorize(
          transaction.description + " " + (transaction.memo || ""),
          data.categories
        );
        if (categoryId) {
          await updateTransaction({ ...transaction, categoryId });
          categorizedCount++;
        }
      }

      refresh();
      alert(`${categorizedCount} transaction(s) catégorisée(s) automatiquement`);
    } catch (error) {
      console.error("Error auto-categorizing:", error);
      alert("Erreur lors de la catégorisation automatique");
    } finally {
      setIsAutoCategorizing(false);
    }
  }, [data, refresh]);

  if (isLoading || !data) {
    return <LoadingState />;
  }

  return (
    <PageLayout>
      <PageHeader
        title="Règles de catégorisation"
        description={
          <span className="flex items-center gap-2">
            {transactionGroups.length} groupe
            {transactionGroups.length > 1 ? "s" : ""} de transactions similaires
            <Badge variant="secondary">{uncategorizedCount} non catégorisées</Badge>
          </span>
        }
        actions={
          uncategorizedCount > 0 && (
            <Button
              variant="outline"
              onClick={handleAutoCategorize}
              disabled={isAutoCategorizing}
            >
              {isAutoCategorizing ? (
                <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
              ) : (
                <Sparkles className="h-4 w-4 mr-2" />
              )}
              Auto-catégoriser
            </Button>
          )
        }
      />

      <RulesSearchBar
        searchQuery={searchQuery}
        onSearchChange={setSearchQuery}
        sortBy={sortBy}
        onSortChange={setSortBy}
        filterMinCount={filterMinCount}
        onFilterMinCountChange={setFilterMinCount}
      />

      {transactionGroups.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-center">
          <Sparkles className="h-12 w-12 text-muted-foreground mb-4" />
          <h3 className="text-lg font-medium text-foreground mb-2">
            {uncategorizedCount === 0
              ? "Toutes les transactions sont catégorisées !"
              : "Aucun groupe trouvé"}
          </h3>
          <p className="text-sm text-muted-foreground max-w-md">
            {uncategorizedCount === 0
              ? "Continuez à importer des transactions pour voir les suggestions de règles."
              : filterMinCount > 1
                ? `Essayez de réduire le filtre minimum à ${filterMinCount - 1}+ transactions.`
                : "Modifiez vos critères de recherche."}
          </p>
        </div>
      ) : (
        <div className="space-y-3">
          {transactionGroups.map((group) => (
            <RuleGroupCard
              key={group.key}
              group={group}
              isExpanded={expandedGroups.has(group.key)}
              onToggleExpand={() => toggleExpand(group.key)}
              onCreateRule={() => handleCreateRule(group)}
              categories={data.categories}
              formatCurrency={formatCurrency}
              formatDate={formatDate}
            />
          ))}
        </div>
      )}

      <RuleCreateDialog
        open={isDialogOpen}
        onOpenChange={setIsDialogOpen}
        group={selectedGroup}
        categories={data.categories}
        onSave={handleSaveRule}
      />
    </PageLayout>
  );
}