"use client";

import { Button } from "@/components/ui/button";
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 type { Account, Folder } from "@/lib/types";
import { accountTypeLabels } from "./constants";

interface AccountFormData {
  name: string;
  type: Account["type"];
  folderId: string;
}

interface AccountFolderDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  formData: AccountFormData;
  onFormDataChange: (data: AccountFormData) => void;
  folders: Folder[];
  onSave: () => void;
}

export function AccountFolderDialog({
  open,
  onOpenChange,
  formData,
  onFormDataChange,
  folders,
  onSave,
}: AccountFolderDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <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={formData.name}
              onChange={(e) =>
                onFormDataChange({
                  ...formData,
                  name: e.target.value,
                })
              }
            />
          </div>
          <div className="space-y-2">
            <Label>Type de compte</Label>
            <Select
              value={formData.type}
              onValueChange={(v) =>
                onFormDataChange({
                  ...formData,
                  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={formData.folderId}
              onValueChange={(v) =>
                onFormDataChange({ ...formData, folderId: v })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {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={() => onOpenChange(false)}>
              Annuler
            </Button>
            <Button onClick={onSave}>Enregistrer</Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}