import { useState, useEffect } from "react";
import { FaPlus } from "react-icons/fa";
import Button from "../Button";
import Card from "./Card";

interface Bank {
  id: string;
  bankname: string;
  bankcode: string;
}

interface BankDetails {
  bankName: string;
  bankcode: string;
  accountNumber: string;
  accountName: string;
}

interface AddBankSectionProps {
  onContinue?: (data: BankDetails) => void;
  onCancel?: () => void;
  fetchBanks?: () => Promise<Bank[]>; // API function to fetch banks
}

export const AddBankSection: React.FC<AddBankSectionProps> = ({
  onContinue,
  onCancel,
  fetchBanks,
}) => {
  const [bankName, setBankName] = useState("");
  const [accountNumber, setAccountNumber] = useState("");
  const [accountName, setAccountName] = useState("");
  const [banks, setBanks] = useState<Bank[]>([]);
  const [isLoadingBanks, setIsLoadingBanks] = useState(false);
  const [bankCode, setBankCode] = useState("");
  const [selectedBankJson, setSelectedBankJson] = useState("");


  // Fetch bank list on component mount
  useEffect(() => {
    const loadBanks = async () => {
      if (!fetchBanks) return;
      
      setIsLoadingBanks(true);
      try {
        const bankList = await fetchBanks();
        setBanks(bankList);
      } catch (error) {
        console.error("Failed to fetch banks:", error);
      } finally {
        setIsLoadingBanks(false);
      }
    };

    loadBanks();
  }, [fetchBanks]);

  const handleAccountNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value.replace(/\D/g, ""); // Only allow digits
    if (value.length <= 10) {
      setAccountNumber(value);
      // Clear account name when number changes
      if (accountName) setAccountName("");
    }
  };

  const isFormValid = bankName && accountNumber.length === 10 && accountName;

    return (
    <div id="withdraw" className="scroll-mt-0 mt-10 p-6">
    <Card title="Add Bank Account">
      {/* Bank Name Dropdown */}
      <div className="mb-6 mt-10"  >
        <label
          htmlFor="bankName"
          className="block text-sm font-medium text-gray-700 mb-2"
        >
          Bank Name
        </label>
        <div className="mt-1">
          <select
            name="bankName"
            id="bankName"
            value={selectedBankJson}
            onChange={(e) => {
                const selected = JSON.parse(e.target.value);
                setSelectedBankJson(e.target.value); 
                setBankName(selected.bankname);
                setBankCode(selected.bankcode);
              }}
            disabled={isLoadingBanks}
            className="block w-full border text-gray-500 rounded-3xl shadow-sm sm:text-sm p-4 focus:outline-purple-500 bg-white"
          >
            <option value="">
              {isLoadingBanks ? "Loading banks..." : "Select your bank"}
            </option>
            {banks.map((bank) => (
                <option
                    key={bank.bankcode}
                    value={JSON.stringify({ bankname: bank.bankname, bankcode: bank.bankcode })}
                >
                {bank.bankname}
              </option>
            ))}
          </select>
        </div>
      </div>

      {/* Account Number */}
      <div className="mb-6">
        <label
          htmlFor="accountNumber"
          className="block text-sm font-medium text-gray-700 mb-2"
        >
          Account Number
        </label>
        <div className="mt-1">
          <input
            type="text"
            name="accountNumber"
            id="accountNumber"
            value={accountNumber}
            onChange={handleAccountNumberChange}
            maxLength={10}
            className="block w-full border text-gray-500 rounded-3xl shadow-sm sm:text-sm p-4 focus:outline-purple-500"
            placeholder="0123456789"
          />
        </div>
        <p className="text-xs text-gray-500 mt-1">Enter your 10-digit account number</p>
      </div>

      {/* Account Name */}
      <div className="mb-6">
        <label
          htmlFor="accountName"
          className="block text-sm font-medium text-gray-700 mb-2"
        >
          Account Name
        </label>
        <div className="mt-1 relative">
          <input
            type="text"
            name="accountName"
            id="accountName"
            value={accountName}
            onChange={(e) => setAccountName(e.target.value)}
            className="block w-full border text-gray-500 rounded-3xl shadow-sm sm:text-sm p-4 focus:outline-purple-500 bg-gray-50"
            placeholder={"Account name will appear here"}
          />
        </div>
      </div>

      {/* Action buttons */}
      <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4 mt-8">
        <Button
          width="200px"
          onClick={() => onContinue && onContinue({ bankName, bankcode: bankCode, accountName, accountNumber })}
          disabled={!isFormValid}
        >
          <span className="flex items-center justify-center">
            <FaPlus className="mr-2" /> Continue
          </span>
        </Button>
        <Button
          width="200px"
          bgColor="transparent"
          textColor="text-gray-700"
          border="border"
          borderColor="#D0D5DD"
          hover="hover:bg-gray-100"
          onClick={onCancel}
        >
          Cancel
        </Button>
      </div>
           
            </Card>
    </div>
  );
};