"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;
  externalUrl: string;
  initialBalance: number;
}

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

export function AccountEditDialog({
  open,
  onOpenChange,
  formData,
  onFormDataChange,
  folders,
  onSave,
}: AccountEditDialogProps) {
  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="space-y-2">
            <Label>Solde initial</Label>
            <Input
              type="number"
              step="0.01"
              value={formData.initialBalance}
              onChange={(e) =>
                onFormDataChange({
                  ...formData,
                  initialBalance: parseFloat(e.target.value) || 0,
                })
              }
              placeholder="0.00"
            />
            <p className="text-xs text-muted-foreground">
              Solde de départ pour équilibrer le compte
            </p>
          </div>
          <div className="space-y-2">
            <Label>Lien externe (portail banque)</Label>
            <Input
              value={formData.externalUrl}
              onChange={(e) =>
                onFormDataChange({ ...formData, externalUrl: e.target.value })
              }
              placeholder="https://..."
            />
            <p className="text-xs text-muted-foreground">
              URL personnalisée vers le portail de votre banque
            </p>
          </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>
  );
}