"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Banknote, Save, X } from "lucide-react";
import {
  useGetBankDetailsQuery,
  useCreateBankDetailsMutation,
  useUpdateBankDetailsMutation,
} from "@/redux/apis/bankApi";

export default function BankDetailsForm({ onClose }: { onClose?: () => void }) {
  const router = useRouter();
  const { data, isLoading } = useGetBankDetailsQuery();
  const [createBankDetails] = useCreateBankDetailsMutation();
  const [updateBankDetails] = useUpdateBankDetailsMutation();

  const [formData, setFormData] = useState({
    accountHolderName: "",
    accountNumber: "",
    bankName: "",
    ifscCode: "",
    city: "",
    pinCode: "",
  });

  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    if (data?.success && data.data) {
      setFormData({
        accountHolderName: data.data.accountHolderName || "",
        accountNumber: data.data.accountNumber || "",
        bankName: data.data.bankName || "",
        ifscCode: data.data.ifscCode || "",
        city: data.data.city || "",
        pinCode: data.data.pinCode || "",
      });
    }
  }, [data]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      if (data?.success && data.data?.id) {
        await updateBankDetails(formData).unwrap();
      } else {
        await createBankDetails(formData).unwrap();
      }
      if (onClose) onClose();
      router.refresh();
    } catch (error) {
      console.error("Error saving bank details:", error);
      alert("Failed to save bank details");
    } finally {
      setIsSubmitting(false);
    }
  };

  if (isLoading) {
    return <div className="text-center py-4">Loading...</div>;
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-theme-secondary mb-1">
          Account Holder Name
        </label>
        <input
          type="text"
          name="accountHolderName"
          value={formData.accountHolderName}
          onChange={handleChange}
          required
          placeholder="As per bank records"
          className="w-full px-4 py-2 rounded-xl bg-theme-input border border-primary-500/20 text-theme-primary focus:border-primary-500 focus:outline-none"
        />
      </div>


      <div>
        <label className="block text-sm font-medium text-theme-secondary mb-1">
          Account Number
        </label>
        <input
          type="text"
          name="accountNumber"
          value={formData.accountNumber}
          onChange={handleChange}
          required
          className="w-full px-4 py-2 rounded-xl bg-theme-input border border-primary-500/20 text-theme-primary focus:border-primary-500 focus:outline-none"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-theme-secondary mb-1">
          Bank Name
        </label>
        <input
          type="text"
          name="bankName"
          value={formData.bankName}
          onChange={handleChange}
          required
          className="w-full px-4 py-2 rounded-xl bg-theme-input border border-primary-500/20 text-theme-primary focus:border-primary-500 focus:outline-none"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-theme-secondary mb-1">
          IFSC Code
        </label>
        <input
          type="text"
          name="ifscCode"
          value={formData.ifscCode}
          onChange={handleChange}
          required
          className="w-full px-4 py-2 rounded-xl bg-theme-input border border-primary-500/20 text-theme-primary focus:border-primary-500 focus:outline-none"
        />
      </div>

      <div className="grid md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-theme-secondary mb-1">
            City
          </label>
          <input
            type="text"
            name="city"
            value={formData.city}
            onChange={handleChange}
            required
            className="w-full px-4 py-2 rounded-xl bg-theme-input border border-primary-500/20 text-theme-primary focus:border-primary-500 focus:outline-none"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-theme-secondary mb-1">
            Pin Code
          </label>
          <input
            type="text"
            name="pinCode"
            value={formData.pinCode}
            onChange={handleChange}
            required
            className="w-full px-4 py-2 rounded-xl bg-theme-input border border-primary-500/20 text-theme-primary focus:border-primary-500 focus:outline-none"
          />
        </div>
      </div>

      <div className="flex gap-3 pt-4">
        <button
          type="submit"
          disabled={isSubmitting}
          className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-primary-500 text-white rounded-xl hover:bg-primary-600 transition-colors disabled:opacity-50"
        >
          <Save className="w-4 h-4" />
          {isSubmitting ? "Saving..." : "Save"}
        </button>
        {onClose && (
          <button
            type="button"
            onClick={onClose}
            className="px-4 py-2 bg-theme-input border border-primary-500/20 text-theme-secondary rounded-xl hover:bg-primary-500/10 transition-colors"
          >
            <X className="w-4 h-4" />
          </button>
        )}
      </div>
    </form>
  );
}