import React from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Loader2 } from "lucide-react";

interface BankDetailsModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
  editingBank: any;
  isSubmitting: boolean;
}

export const BankDetailsModal: React.FC<BankDetailsModalProps> = ({
  isOpen,
  onClose,
  onSubmit,
  editingBank,
  isSubmitting
}) => {
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>{editingBank ? 'Edit Bank Details' : 'Add Bank Account'}</DialogTitle>
          <DialogDescription>
            Enter the dealer's bank information for settlement transfers.
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={onSubmit} data-testid="onboarding-bank-details-form">
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="bankName" className="text-right text-xs">Bank Name</Label>
              <div className="col-span-3">
                <Input
                  id="bankName"
                  name="bankName"
                  defaultValue={editingBank?.bankName}
                  required
                  placeholder="e.g. HDFC Bank, ICICI Bank"
                  className="h-9"
                  data-testid="onboarding-bank-name-input"
                />
              </div>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="accountHolderName" className="text-right text-xs">Holder Name</Label>
              <div className="col-span-3">
                <Input
                  id="accountHolderName"
                  name="accountHolderName"
                  defaultValue={editingBank?.accountHolderName}
                  required
                  placeholder="Full name as per bank records"
                  className="h-9"
                  data-testid="onboarding-account-holder-name-input"
                />
              </div>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="accountNumber" className="text-right text-xs">A/C Number</Label>
              <div className="col-span-3">
                <Input
                  id="accountNumber"
                  name="accountNumber"
                  defaultValue={editingBank?.accountNumber}
                  required
                  placeholder="Enter account number"
                  className="h-9"
                  data-testid="onboarding-account-number-input"
                />
              </div>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="ifscCode" className="text-right text-xs">IFSC Code</Label>
              <div className="col-span-3">
                <Input
                  id="ifscCode"
                  name="ifscCode"
                  defaultValue={editingBank?.ifscCode}
                  required
                  placeholder="11-character code"
                  className="h-9"
                  data-testid="onboarding-ifsc-code-input"
                />
              </div>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="branchName" className="text-right text-xs">Branch</Label>
              <div className="col-span-3">
                <Input
                  id="branchName"
                  name="branchName"
                  defaultValue={editingBank?.branchName}
                  required
                  placeholder="Branch location"
                  className="h-9"
                  data-testid="onboarding-branch-name-input"
                />
              </div>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <div className="flex items-center gap-2 col-start-2 col-span-3">
                 <input 
                   type="checkbox" 
                   id="isPrimaryModal" 
                   name="isPrimary" 
                   defaultChecked={editingBank?.isPrimary} 
                   className="w-4 h-4 rounded border-slate-300 text-amber-600 focus:ring-amber-500"
                   data-testid="onboarding-is-primary-checkbox"
                 />
                 <Label htmlFor="isPrimaryModal" className="text-xs font-medium cursor-pointer">Set as primary account</Label>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="outline" size="sm" onClick={onClose} data-testid="onboarding-bank-details-cancel">Cancel</Button>
            <Button type="submit" disabled={isSubmitting} size="sm" className="bg-amber-600" data-testid="onboarding-bank-details-submit">
              {isSubmitting ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
              {editingBank ? 'Update Account' : 'Save Bank Details'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
};