"use client";

import React, { useState } from "react";
import { Plus, Minus, X, CircleFadingPlus } from "lucide-react";
import Button from "../Button";

interface TopUpInvestmentModalProps {
  isOpen: boolean;
  onClose: () => void;
  onContinue?: (amount: number) => void;
}

export default function TopUpInvestmentModal({ 
  isOpen, 
  onClose, 
  onContinue 
}: TopUpInvestmentModalProps) {
  const [amount, setAmount] = useState(9507);

  if (!isOpen) return null;

  const handleIncrement = () => {
    setAmount(prev => prev + 1000);
  };

  const handleDecrement = () => {
    setAmount(prev => Math.max(0, prev - 1000));
  };

  const handleContinue = () => {
    if (onContinue) {
      onContinue(amount);
    }
  };

  const formatAmount = (value: number) => {
    return new Intl.NumberFormat('en-NG', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    }).format(value);
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-3xl shadow-2xl max-w-3xl w-full p-12 relative">
        {/* Title */}
        <h2 className="text-2xl font-semibold text-gray-900 text-center mb-3">
          Top up investment
        </h2>
        <p className="text-gray-600 text-center mb-12">
          Enter the amount to add to your investment
        </p>

        {/* Amount Control */}
        <div className="flex items-center justify-center gap-6 mb-12">
          {/* Increment Button */}
          <button
            onClick={handleIncrement}
            className="w-24 h-24 rounded-2xl border-2 border-gray-200 hover:border-gray-300 transition flex items-center justify-center"
          >
            <Plus size={32} className="text-gray-700" strokeWidth={2} />
          </button>

          {/* Amount Display */}
          <div className="flex-1 max-w-md">
            <div className="text-center py-6 px-8 rounded-2xl border-2 border-gray-200 bg-white">
              <span className="text-4xl font-semibold text-gray-900">
                N{formatAmount(amount)}
              </span>
            </div>
          </div>

          {/* Decrement Button */}
          <button
            onClick={handleDecrement}
            className="w-24 h-24 rounded-2xl border-2 border-gray-200 hover:border-gray-300 transition flex items-center justify-center"
          >
            <Minus size={32} className="text-gray-700" strokeWidth={2} />
          </button>
        </div>

        {/* Info Text */}
        <p className="text-gray-600 text-center mb-8 px-8 leading-relaxed">
          Add funds from your wallet directly to your available balance. Please ensure
          sufficient funds is in the linked wallet for a successful transfer.
        </p>

        {/* Action Buttons */}
       <div className="flex items-center justify-center gap-4">
          <Button
            type="button"
            bgColor="bg-white"
            textColor="text-black"
            width="25%"
            onClick={handleContinue}
          >
            <div className="flex items-center justify-center gap-2">
              <CircleFadingPlus size={16} strokeWidth={3} />
              <h4 className="text-xs sm:text-sm md:text-base">Continue</h4>
            </div>
          </Button>

          <Button
            type="button"
            border="border border-white"
            width="25%"
            onClick={onClose}
          >
            <div className="flex items-center justify-center gap-2">
              <X size={20} />
              <h4 className="text-xs sm:text-sm md:text-base">Cancel</h4>
            </div>
          </Button>
        </div> 
              
      </div>
    </div>
  );
}

// Demo wrapper to show how to use it
export function TopUpDemo() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
      <button
        onClick={() => setIsOpen(true)}
        className="px-6 py-3 bg-purple-700 text-white rounded-lg hover:bg-purple-800 transition"
      >
        Open Top Up Modal
      </button>

      <TopUpInvestmentModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onContinue={(amount) => {
          alert(`Adding ${amount} to investment`);
          setIsOpen(false);
        }}
      />
    </div>
  );
}