fintrack/components/rules/rule-create-dialog.tsx

"use client";

import { useState, useMemo, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { CategoryIcon } from "@/components/ui/category-icon";
import { Tag, AlertCircle, CheckCircle2 } from "lucide-react";
import type { Category, Transaction } from "@/lib/types";

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

interface RuleCreateDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  group: TransactionGroup | null;
  categories: Category[];
  onSave: (data: {
    keyword: string;
    categoryId: string;
    applyToExisting: boolean;
    transactionIds: string[];
  }) => Promise<void>;
}

export function RuleCreateDialog({
  open,
  onOpenChange,
  group,
  categories,
  onSave,
}: RuleCreateDialogProps) {
  const [keyword, setKeyword] = useState("");
  const [categoryId, setCategoryId] = useState<string>("");
  const [applyToExisting, setApplyToExisting] = useState(true);
  const [isLoading, setIsLoading] = useState(false);

  // Reset form when group changes
  useEffect(() => {
    if (group) {
      setKeyword(group.suggestedKeyword);
      setCategoryId("");
      setApplyToExisting(true);
    }
  }, [group]);

  // Organize categories by parent
  const { parentCategories, childrenByParent } = useMemo(() => {
    const parents = categories.filter((c) => c.parentId === null);
    const children: Record<string, Category[]> = {};

    categories
      .filter((c) => c.parentId !== null)
      .forEach((child) => {
        if (!children[child.parentId!]) {
          children[child.parentId!] = [];
        }
        children[child.parentId!].push(child);
      });

    return { parentCategories: parents, childrenByParent: children };
  }, [categories]);

  // Check if keyword already exists in any category
  const existingCategory = useMemo(() => {
    if (!keyword) return null;
    const lowerKeyword = keyword.toLowerCase();
    return categories.find((c) =>
      c.keywords.some((k) => k.toLowerCase() === lowerKeyword)
    );
  }, [keyword, categories]);

  const selectedCategory = categories.find((c) => c.id === categoryId);

  const handleSave = async () => {
    if (!keyword || !categoryId || !group) return;

    setIsLoading(true);
    try {
      await onSave({
        keyword,
        categoryId,
        applyToExisting,
        transactionIds: group.transactions.map((t) => t.id),
      });
      onOpenChange(false);
    } catch (error) {
      console.error("Failed to create rule:", error);
    } finally {
      setIsLoading(false);
    }
  };

  if (!group) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>Créer une règle de catégorisation</DialogTitle>
          <DialogDescription>
            Associez un mot-clé à une catégorie pour catégoriser automatiquement
            les transactions similaires.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-6 py-4">
          {/* Group info */}
          <div className="p-3 rounded-lg bg-muted/50 border border-border">
            <div className="text-sm font-medium text-foreground mb-1">
              {group.displayName}
            </div>
            <div className="text-xs text-muted-foreground">
              {group.transactions.length} transaction
              {group.transactions.length > 1 ? "s" : ""} seront catégorisées
            </div>
          </div>

          {/* Keyword input */}
          <div className="space-y-2">
            <Label htmlFor="keyword">Mot-clé de détection</Label>
            <div className="relative">
              <Tag className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                id="keyword"
                value={keyword}
                onChange={(e) => setKeyword(e.target.value)}
                placeholder="ex: spotify, carrefour, sncf..."
                className="pl-10"
              />
            </div>
            <p className="text-xs text-muted-foreground">
              Les transactions contenant ce mot-clé seront automatiquement
              catégorisées.
            </p>
            {existingCategory && (
              <div className="flex items-center gap-2 text-xs text-amber-600 dark:text-amber-400">
                <AlertCircle className="h-3 w-3" />
                <span>
                  Ce mot-clé existe déjà dans &quot;{existingCategory.name}&quot;
                </span>
              </div>
            )}
          </div>

          {/* Category select */}
          <div className="space-y-2">
            <Label htmlFor="category">Catégorie</Label>
            <Select value={categoryId} onValueChange={setCategoryId}>
              <SelectTrigger>
                <SelectValue placeholder="Sélectionner une catégorie" />
              </SelectTrigger>
              <SelectContent>
                {parentCategories.map((parent) => (
                  <div key={parent.id}>
                    <SelectItem value={parent.id} className="font-medium">
                      <div className="flex items-center gap-2">
                        <CategoryIcon
                          icon={parent.icon}
                          color={parent.color}
                          size={16}
                        />
                        <span>{parent.name}</span>
                      </div>
                    </SelectItem>
                    {childrenByParent[parent.id]?.map((child) => (
                      <SelectItem key={child.id} value={child.id}>
                        <div className="flex items-center gap-2 pl-4">
                          <CategoryIcon
                            icon={child.icon}
                            color={child.color}
                            size={16}
                          />
                          <span>{child.name}</span>
                        </div>
                      </SelectItem>
                    ))}
                  </div>
                ))}
              </SelectContent>
            </Select>
            {selectedCategory && (
              <div className="flex items-center gap-2 flex-wrap">
                <span className="text-xs text-muted-foreground">
                  Mots-clés actuels:
                </span>
                {selectedCategory.keywords.length > 0 ? (
                  selectedCategory.keywords.map((k, i) => (
                    <Badge key={i} variant="outline" className="text-xs">
                      {k}
                    </Badge>
                  ))
                ) : (
                  <span className="text-xs text-muted-foreground italic">
                    Aucun
                  </span>
                )}
              </div>
            )}
          </div>

          {/* Apply to existing checkbox */}
          <div className="flex items-start space-x-3">
            <Checkbox
              id="apply-existing"
              checked={applyToExisting}
              onCheckedChange={(checked) =>
                setApplyToExisting(checked as boolean)
              }
            />
            <div className="space-y-1">
              <Label
                htmlFor="apply-existing"
                className="text-sm font-medium cursor-pointer"
              >
                Appliquer aux transactions existantes
              </Label>
              <p className="text-xs text-muted-foreground">
                Catégoriser immédiatement les {group.transactions.length}{" "}
                transaction
                {group.transactions.length > 1 ? "s" : ""} de ce groupe
              </p>
            </div>
          </div>

          {/* Preview */}
          {keyword && categoryId && (
            <div className="p-3 rounded-lg bg-success/10 border border-success/20">
              <div className="flex items-center gap-2 text-sm text-success">
                <CheckCircle2 className="h-4 w-4" />
                <span>
                  Le mot-clé &quot;<strong>{keyword}</strong>&quot; sera ajouté à la
                  catégorie &quot;<strong>{selectedCategory?.name}</strong>&quot;
                </span>
              </div>
            </div>
          )}
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Annuler
          </Button>
          <Button
            onClick={handleSave}
            disabled={!keyword || !categoryId || isLoading}
          >
            {isLoading ? "Création..." : "Créer la règle"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}