import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
import AddPurchaseForm from '@/components/Transactions/AddPurchaseForm';
import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm';
import { cn } from '@/lib/utils';
import { X } from 'lucide-react';
import ComponentTitle from '@/components/ui/ComponentTitle';

interface InlineFormProps {
    type: 'purchase' | 'milestone' | 'price' | null;
    onClose: () => void;
    onPurchaseSuccess?: () => void;
    onMilestoneSuccess?: () => void;
    onPriceSuccess?: () => void;
    className?: string;
}

export default function InlineForm({
    type,
    onClose,
    onPurchaseSuccess,
    onMilestoneSuccess,
    onPriceSuccess,
    className
}: InlineFormProps) {
    if (!type) return null;

    const title = type === 'purchase' ? 'ADD PURCHASE' : type === 'milestone' ? 'ADD MILESTONE' : 'UPDATE PRICE';

    return (
        <div
            className={cn(
                "bg-black p-8",
                "transition-all duration-300",
                className
            )}
        >
            {/* Header */}
            <div className="w-full border-4 border-red-500 p-2 bg-black space-y-4">
                <div className="flex items-center justify-between mb-6">
                    <ComponentTitle>{title}</ComponentTitle>

                    <button
                        onClick={onClose}
                        className="text-red-400 hover:text-red-300 transition-colors p-1"
                        aria-label="Close form"
                    >
                        <X className="w-5 h-5" />
                    </button>
                </div>

                {/* Form Content */}
                <div className="flex justify-center">
                    {type === 'purchase' ? (
                        <AddPurchaseForm
                            onSuccess={() => {
                                if (onPurchaseSuccess) onPurchaseSuccess();
                                onClose();
                            }}
                        />
                    ) : type === 'milestone' ? (
                        <AddMilestoneForm
                            onSuccess={() => {
                                if (onMilestoneSuccess) onMilestoneSuccess();
                                onClose();
                            }}
                        />
                    ) : (
                        <UpdatePriceForm
                            onSuccess={() => {
                                if (onPriceSuccess) onPriceSuccess();
                                onClose();
                            }}
                        />
                    )}
                </div>
            </div>
        </div>
    );
}
