"use client";

import { useState } from "react";
import { Sidebar } from "@/components/dashboard/sidebar";
import { useBankingData } from "@/lib/hooks";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Plus,
  MoreVertical,
  Pencil,
  Trash2,
  Folder,
  FolderOpen,
  ChevronRight,
  ChevronDown,
  Building2,
  RefreshCw,
} from "lucide-react";
import {
  addFolder,
  updateFolder,
  deleteFolder,
  updateAccount,
} from "@/lib/store-db";
import type { Folder as FolderType, Account } from "@/lib/types";
import { cn } from "@/lib/utils";
import Link from "next/link";

const folderColors = [
  { value: "#6366f1", label: "Indigo" },
  { value: "#22c55e", label: "Vert" },
  { value: "#f59e0b", label: "Orange" },
  { value: "#ec4899", label: "Rose" },
  { value: "#3b82f6", label: "Bleu" },
  { value: "#ef4444", label: "Rouge" },
];

interface FolderTreeItemProps {
  folder: FolderType;
  accounts: Account[];
  allFolders: FolderType[];
  level: number;
  onEdit: (folder: FolderType) => void;
  onDelete: (folderId: string) => void;
  onEditAccount: (account: Account) => void;
  formatCurrency: (amount: number) => string;
}

function FolderTreeItem({
  folder,
  accounts,
  allFolders,
  level,
  onEdit,
  onDelete,
  onEditAccount,
  formatCurrency,
}: FolderTreeItemProps) {
  const [isExpanded, setIsExpanded] = useState(true);

  // Pour le dossier "Mes Comptes" (folder-root), inclure aussi les comptes sans dossier
  const folderAccounts = accounts.filter(
    (a) =>
      a.folderId === folder.id ||
      (folder.id === "folder-root" && a.folderId === null),
  );
  const childFolders = allFolders.filter((f) => f.parentId === folder.id);
  const hasChildren = childFolders.length > 0 || folderAccounts.length > 0;

  const folderTotal = folderAccounts.reduce((sum, a) => sum + a.balance, 0);

  return (
    <div>
      <div
        className={cn(
          "flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 group",
          level > 0 && "ml-6",
        )}
      >
        <button
          onClick={() => setIsExpanded(!isExpanded)}
          className="p-1 hover:bg-muted rounded"
          disabled={!hasChildren}
        >
          {hasChildren ? (
            isExpanded ? (
              <ChevronDown className="w-4 h-4 text-muted-foreground" />
            ) : (
              <ChevronRight className="w-4 h-4 text-muted-foreground" />
            )
          ) : (
            <div className="w-4 h-4" />
          )}
        </button>

        <div
          className="w-6 h-6 rounded flex items-center justify-center"
          style={{ backgroundColor: `${folder.color}20` }}
        >
          {isExpanded ? (
            <FolderOpen className="w-4 h-4" style={{ color: folder.color }} />
          ) : (
            <Folder className="w-4 h-4" style={{ color: folder.color }} />
          )}
        </div>

        <span className="flex-1 font-medium text-sm">{folder.name}</span>

        {folderAccounts.length > 0 && (
          <span
            className={cn(
              "text-sm font-semibold tabular-nums",
              folderTotal >= 0 ? "text-emerald-600" : "text-red-600",
            )}
          >
            {formatCurrency(folderTotal)}
          </span>
        )}

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="h-7 w-7 opacity-0 group-hover:opacity-100"
            >
              <MoreVertical className="w-4 h-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem onClick={() => onEdit(folder)}>
              <Pencil className="w-4 h-4 mr-2" />
              Modifier
            </DropdownMenuItem>
            {folder.id !== "folder-root" && (
              <DropdownMenuItem
                onClick={() => onDelete(folder.id)}
                className="text-red-600"
              >
                <Trash2 className="w-4 h-4 mr-2" />
                Supprimer
              </DropdownMenuItem>
            )}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      {isExpanded && (
        <div>
          {folderAccounts.map((account) => (
            <div
              key={account.id}
              className={cn(
                "flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 group",
                "ml-12",
              )}
            >
              <Building2 className="w-4 h-4 text-muted-foreground" />
              <Link
                href={`/transactions?accountId=${account.id}`}
                className="flex-1 text-sm hover:text-primary hover:underline"
              >
                {account.name}
              </Link>
              <span
                className={cn(
                  "text-sm tabular-nums",
                  account.balance >= 0 ? "text-emerald-600" : "text-red-600",
                )}
              >
                {formatCurrency(account.balance)}
              </span>
              <Button
                variant="ghost"
                size="icon"
                className="h-7 w-7 opacity-0 group-hover:opacity-100"
                onClick={() => onEditAccount(account)}
              >
                <Pencil className="w-4 h-4" />
              </Button>
            </div>
          ))}

          {childFolders.map((child) => (
            <FolderTreeItem
              key={child.id}
              folder={child}
              accounts={accounts}
              allFolders={allFolders}
              level={level + 1}
              onEdit={onEdit}
              onDelete={onDelete}
              onEditAccount={onEditAccount}
              formatCurrency={formatCurrency}
            />
          ))}
        </div>
      )}
    </div>
  );
}

const accountTypeLabels = {
  CHECKING: "Compte courant",
  SAVINGS: "Épargne",
  CREDIT_CARD: "Carte de crédit",
  OTHER: "Autre",
};

export default function FoldersPage() {
  const { data, isLoading, refresh } = useBankingData();
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [editingFolder, setEditingFolder] = useState<FolderType | null>(null);
  const [formData, setFormData] = useState({
    name: "",
    parentId: "folder-root" as string | null,
    color: "#6366f1",
  });

  // Account editing state
  const [isAccountDialogOpen, setIsAccountDialogOpen] = useState(false);
  const [editingAccount, setEditingAccount] = useState<Account | null>(null);
  const [accountFormData, setAccountFormData] = useState({
    name: "",
    type: "CHECKING" as Account["type"],
    folderId: "folder-root",
  });

  if (isLoading || !data) {
    return (
      <div className="flex h-screen">
        <Sidebar />
        <main className="flex-1 flex items-center justify-center">
          <RefreshCw className="w-8 h-8 animate-spin text-muted-foreground" />
        </main>
      </div>
    );
  }

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

  const rootFolders = data.folders.filter((f) => f.parentId === null);

  const handleNewFolder = () => {
    setEditingFolder(null);
    setFormData({ name: "", parentId: "folder-root", color: "#6366f1" });
    setIsDialogOpen(true);
  };

  const handleEdit = (folder: FolderType) => {
    setEditingFolder(folder);
    setFormData({
      name: folder.name,
      parentId: folder.parentId || "folder-root",
      color: folder.color,
    });
    setIsDialogOpen(true);
  };

  const handleSave = async () => {
    const parentId =
      formData.parentId === "folder-root" ? null : formData.parentId;

    try {
      if (editingFolder) {
        await updateFolder({
          ...editingFolder,
          name: formData.name,
          parentId,
          color: formData.color,
        });
      } else {
        await addFolder({
          name: formData.name,
          parentId,
          color: formData.color,
          icon: "folder",
        });
      }
      refresh();
      setIsDialogOpen(false);
    } catch (error) {
      console.error("Error saving folder:", error);
      alert("Erreur lors de la sauvegarde du dossier");
    }
  };

  const handleDelete = async (folderId: string) => {
    if (
      !confirm(
        "Supprimer ce dossier ? Les comptes seront déplacés à la racine.",
      )
    )
      return;

    try {
      await deleteFolder(folderId);
      refresh();
    } catch (error) {
      console.error("Error deleting folder:", error);
      alert("Erreur lors de la suppression du dossier");
    }
  };

  const handleEditAccount = (account: Account) => {
    setEditingAccount(account);
    setAccountFormData({
      name: account.name,
      type: account.type,
      folderId: account.folderId || "folder-root",
    });
    setIsAccountDialogOpen(true);
  };

  const handleSaveAccount = async () => {
    if (!editingAccount) return;

    try {
      await updateAccount({
        ...editingAccount,
        name: accountFormData.name,
        type: accountFormData.type,
        folderId:
          accountFormData.folderId === "folder-root"
            ? null
            : accountFormData.folderId,
      });
      refresh();
      setIsAccountDialogOpen(false);
      setEditingAccount(null);
    } catch (error) {
      console.error("Error updating account:", error);
      alert("Erreur lors de la mise à jour du compte");
    }
  };

  return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <main className="flex-1 overflow-auto">
        <div className="p-6 space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-foreground">
                Organisation
              </h1>
              <p className="text-muted-foreground">
                Organisez vos comptes en dossiers
              </p>
            </div>
            <Button onClick={handleNewFolder}>
              <Plus className="w-4 h-4 mr-2" />
              Nouveau dossier
            </Button>
          </div>

          <Card>
            <CardHeader>
              <CardTitle>Arborescence des comptes</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-1">
                {rootFolders.map((folder) => (
                  <FolderTreeItem
                    key={folder.id}
                    folder={folder}
                    accounts={data.accounts}
                    allFolders={data.folders}
                    level={0}
                    onEdit={handleEdit}
                    onDelete={handleDelete}
                    onEditAccount={handleEditAccount}
                    formatCurrency={formatCurrency}
                  />
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </main>

      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>
              {editingFolder ? "Modifier le dossier" : "Nouveau dossier"}
            </DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>Nom du dossier</Label>
              <Input
                value={formData.name}
                onChange={(e) =>
                  setFormData({ ...formData, name: e.target.value })
                }
                placeholder="Ex: Comptes personnels"
              />
            </div>
            <div className="space-y-2">
              <Label>Dossier parent</Label>
              <Select
                value={formData.parentId || "root"}
                onValueChange={(v) =>
                  setFormData({
                    ...formData,
                    parentId: v === "root" ? null : v,
                  })
                }
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="root">Racine</SelectItem>
                  {data.folders
                    .filter((f) => f.id !== editingFolder?.id)
                    .map((folder) => (
                      <SelectItem key={folder.id} value={folder.id}>
                        {folder.name}
                      </SelectItem>
                    ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Couleur</Label>
              <div className="flex gap-2">
                {folderColors.map(({ value }) => (
                  <button
                    key={value}
                    onClick={() => setFormData({ ...formData, color: value })}
                    className={cn(
                      "w-8 h-8 rounded-full transition-transform",
                      formData.color === value &&
                        "ring-2 ring-offset-2 ring-primary scale-110",
                    )}
                    style={{ backgroundColor: value }}
                  />
                ))}
              </div>
            </div>
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                Annuler
              </Button>
              <Button onClick={handleSave} disabled={!formData.name.trim()}>
                {editingFolder ? "Enregistrer" : "Créer"}
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      <Dialog open={isAccountDialogOpen} onOpenChange={setIsAccountDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Modifier le compte</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>Nom du compte</Label>
              <Input
                value={accountFormData.name}
                onChange={(e) =>
                  setAccountFormData({
                    ...accountFormData,
                    name: e.target.value,
                  })
                }
              />
            </div>
            <div className="space-y-2">
              <Label>Type de compte</Label>
              <Select
                value={accountFormData.type}
                onValueChange={(v) =>
                  setAccountFormData({
                    ...accountFormData,
                    type: v as Account["type"],
                  })
                }
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(accountTypeLabels).map(([value, label]) => (
                    <SelectItem key={value} value={value}>
                      {label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Dossier</Label>
              <Select
                value={accountFormData.folderId}
                onValueChange={(v) =>
                  setAccountFormData({ ...accountFormData, folderId: v })
                }
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {data.folders.map((folder) => (
                    <SelectItem key={folder.id} value={folder.id}>
                      {folder.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="flex justify-end gap-2">
              <Button
                variant="outline"
                onClick={() => setIsAccountDialogOpen(false)}
              >
                Annuler
              </Button>
              <Button onClick={handleSaveAccount}>Enregistrer</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}