// WithdrawSection.tsx
import React, { useState } from "react";
import Card from "./Card";
import Button from "../Button";
import { FaPlus } from "react-icons/fa6";
import { WithdrawReview } from "./WithdrawReview";

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

interface WithdrawSectionProps {
  bankDetails?: BankDetails | null;
  onContinue?: (data: { amount: string; pin: string; narration: string }) => void;
  onCancel?: () => void;
}

export const WithdrawSection: React.FC<WithdrawSectionProps> = ({
  bankDetails,
  onContinue,
  onCancel,
}) => {
  const [amount, setAmount] = useState("");
  const [pin, setPin] = useState("");
  const [narration, setNarration] = useState("");
  const processingFee = 2 / 100 * (parseFloat(amount.replace(/[₦,]/g, "")) || 0);
  const [isAmountFocused, setIsAmountFocused] = useState(false)

  // Calculate total amount
  const calculateTotal = () => {
    const numAmount = parseFloat(amount.replace(/[₦,]/g, "")) || 0;
    return numAmount + processingFee;
  };

  const formatCurrency = (value: number) => {
    return `₦${value.toLocaleString("en-NG", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    })}`;
  };

  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value.replace(/[₦,]/g, "");
    if (!isNaN(Number(value)) || value === "") {
      setAmount(value);
    }
  };

  const handlePinChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value.replace(/\D/g, ""); // Only allow digits
    if (value.length <= 4) {
      setPin(value);
    }
  };

  const handleNarrationChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setNarration(e.target.value);
  };

  return (
    <div id="withdraw" className="scroll-mt-0 mt-0">
      <Card title="Withdraw">
          <p className="text-gray-500 mb-4">
              Withdrawal takes 2 business days to be processed to avoid losing
              money to fraud.
        </p>
        
              <div className="bg-purple-50 p-4 rounded-lg flex items-center mb-4">
                <span className="text-purple-600 text-xl mr-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                </span>
                <p className="text-purple-800">
                  Withdrawals can only be made to bank accounts that match the name
                  on your SUBA Capital account.
                </p>
              </div>
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 p-2">
                {/* Left side - Form */}
                <div className="lg:col-span-2">
                  <div className="bg-white rounded-lg">

                    {/* Bank details display */}
                    {bankDetails ? (
                      <div className="bg-[#541592] text-white p-4 rounded-lg mb-8">
                        <div className="flex items-center">
                          <div className="bg-white p-2 rounded-full">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 24 24"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M9.51002 4.23001L18.07 8.51001C21.91 10.43 21.91 13.57 18.07 15.49L9.51002 19.77C3.75002 22.65 1.35002 20.25 4.23002 14.49L5.31002 12.33C5.37002 12.21 5.37002 11.79 5.31002 11.67L4.23002 9.51001C1.35002 3.75001 3.75002 1.35001 9.51002 4.23001Z"
                                stroke="#521392"
                                strokeWidth="1.5"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                              <path
                                d="M5.42004 12H10.82"
                                stroke="#521392"
                                strokeWidth="1.5"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                            </svg>
                          </div>
                          <div className="ml-4">
                            <h3 className="font-bold">{bankDetails.accountName}</h3>
                            <p className="text-sm">{bankDetails.accountNumber}</p>
                            <p className="text-sm">{bankDetails.bankName}</p>
                          </div>
                        </div>
                      </div>
                    ) : (
                      <p className="text-gray-500 mb-8">No bank account details found.</p>
                    )}

                    {/* Amount input */}
                    <div className="mb-6">
                      <label
                        htmlFor="amount"
                        className="block text-sm font-medium text-gray-700 mb-2"
                      >
                        Enter amount to send to recipient
                      </label>
                      <div className="mt-1">
                        <input
                          type="text"
                          name="amount"
                          id="amount"
                          value={isAmountFocused ? amount : (amount ? formatCurrency(parseFloat(amount)) : "")}
                          onChange={handleAmountChange}
                          onFocus={() => setIsAmountFocused(true)}
                          onBlur={() => setIsAmountFocused(false)}
                          className="block w-full border text-gray-500 rounded-3xl shadow-sm sm:text-sm p-4 focus:outline-purple-500"
                          placeholder="₦5,000.00"
                        />
                      </div>
                    </div>
                    <div className="mb-6">
                      <label
                        htmlFor="pin"
                        className="block text-sm font-medium text-gray-700 mb-2"
                      >
                        Enter withdrawal pin
                      </label>
                      <div className="mt-1">
                        <input
                          type="password"
                          name="pin"
                          id="pin"
                          value={pin}
                          onChange={handlePinChange}
                          maxLength={4}
                          className="block w-full border text-gray-500 rounded-3xl shadow-sm sm:text-sm p-4 focus:outline-purple-500"
                          placeholder="••••"
                        />
                      </div>
                      <p className="text-xs text-gray-500 mt-1">Enter your 4-digit PIN</p>
                    </div>

                    {/* Narration input */}
                    <div>
                      <label
                        htmlFor="narration"
                        className="block text-sm font-medium text-gray-700 mb-2"
                      >
                        Narration (Optional)
                      </label>
                      <div className="mt-1">
                        <input
                          type="text"
                          name="narration"
                          id="narration"
                          value={narration}
                          onChange={handleNarrationChange}
                          maxLength={100}
                          className="block w-full border text-gray-500 rounded-3xl shadow-sm sm:text-sm p-4 focus:outline-purple-500"
                          placeholder="Enter transaction description"
                        />
                      </div>
                      <p className="text-xs text-gray-500 mt-1">Add a note for this withdrawal (max 100 characters)</p>
                    </div>

                    {/* Fee breakdown (hidden on mobile, shown in review component) */}
                    <div className="mt-8 space-y-4 lg:hidden">
                      <div className="flex justify-between items-center bg-[#EEE8F5] p-4 rounded-full">
                        <p className="text-gray-500">Processing fee</p>
                        <p className="font-bold text-purple-500">{formatCurrency(processingFee)}</p>
                      </div>
                      <div className="flex justify-between items-center bg-[#EEE8F5] p-4 rounded-full">
                        <p className="text-gray-500">Amount</p>
                        <p className="font-bold text-purple-500">
                          {amount ? formatCurrency(parseFloat(amount)) : "₦0.00"}
                        </p>
                      </div>
                    </div>

                    {/* Total amount (hidden on desktop, shown in review) */}
                    <div className="mt-8 lg:hidden">
                      <label
                        htmlFor="total-amount"
                        className="block text-sm font-medium text-gray-700 mb-2"
                      >
                        Total amount to send
                      </label>
                      <div className="mt-1">
                        <input
                          type="text"
                          name="total-amount"
                          id="total-amount"
                          value={formatCurrency(calculateTotal())}
                          readOnly
                          className="block w-full rounded-3xl shadow-sm bg-[#EEE8F5] sm:text-sm p-4 text-purple-500"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                {/* Right side - Review component (hidden on mobile) */}
                <div className="hidden lg:block lg:col-span-1">
                  <WithdrawReview
                    bankDetails={bankDetails}
                    amount={amount ? formatCurrency(parseFloat(amount)) : "₦0.00"}
                    processingFee={formatCurrency(processingFee)}
                    totalAmount={formatCurrency(calculateTotal())}
                  />
                </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({ amount, pin, narration })}
                  disabled={!amount || parseFloat(amount) <= 0 || pin.length !== 4}
                >
                  <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>
  );
};