import { X } from "lucide-react";
import { useState } from "react";
import toast from "react-hot-toast";

import { usePortfolioSelector } from "../../hooks/usePortfolio";
import { Investment } from "../../types";

interface EditInvestmentModalProps {
    investment: Investment;
    assetId: string;
    onClose: () => void;
}

export const EditInvestmentModal = ({ investment, assetId, onClose }: EditInvestmentModalProps) => {
    const { updateInvestment } = usePortfolioSelector((state) => ({
        updateInvestment: state.updateInvestment,
    }));
    const [amount, setAmount] = useState(investment.amount.toString());

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        try {
            updateInvestment(assetId, investment.id, {
                ...investment,
                amount: parseFloat(amount),
            });
            toast.success('Investment updated successfully');
            onClose();
        } catch (error:any) {
            toast.error('Failed to update investment' + String(error?.message || error));
        }
    };

    return (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="bg-white rounded-lg p-6 w-full max-w-md">
                <div className="flex justify-between items-center mb-4">
                    <h2 className="text-xl font-bold">Edit Investment</h2>
                    <button onClick={onClose} className="p-2">
                        <X className="w-6 h-6" />
                    </button>
                </div>

                <form onSubmit={handleSubmit}>
                    <div className="mb-4">
                        <label className="block text-sm font-medium mb-1">
                            Investment Amount
                        </label>
                        <input
                            type="number"
                            value={amount}
                            onChange={(e) => setAmount(e.target.value)}
                            className="w-full p-2 border rounded"
                            step="0.01"
                            min="0"
                            required
                        />
                    </div>

                    {investment.type === 'periodic' && (
                        <div className="mb-4">
                            <p className="text-sm text-gray-600">
                                Note: Editing a periodic investment will affect all future investments.
                            </p>
                        </div>
                    )}

                    <div className="flex justify-end gap-2">
                        <button
                            type="button"
                            onClick={onClose}
                            className="px-4 py-2 border rounded hover:bg-gray-50"
                        >
                            Cancel
                        </button>
                        <button
                            type="submit"
                            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
                        >
                            Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};
