import React, { useState } from 'react';
import { router } from '@inertiajs/react';
import { PackageCard } from './PackageCard';
import { Button } from '@admin/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@admin/components/ui/card';
import { Input } from '@admin/components/ui/input';
import { Label } from '@admin/components/ui/label';

interface Package {
    id: number;
    name: string;
    slug: string;
    price: number;
    is_per_user_pricing: boolean;
    base_price_per_user: number;
    min_users: number;
    max_users: number;
    features: Array<{ id: number; name: string; slug: string }>;
}

interface PackageComparisonProps {
    packages: Package[];
    currentPackageId?: number;
}

export const PackageComparison: React.FC<PackageComparisonProps> = ({ 
    packages, 
    currentPackageId 
}) => {
    const [userCount, setUserCount] = useState(1);
    const [loading, setLoading] = useState(false);

    const handleSelectPackage = (pkg: Package) => {
        if (pkg.id === currentPackageId) return;

        setLoading(true);
        router.post('/subscription/change-plan', {
            package_id: pkg.id,
            user_count: userCount,
        }, {
            onFinish: () => setLoading(false),
        });
    };

    return (
        <div className="space-y-6">
            <Card>
                <CardHeader>
                    <CardTitle>Calculate Pricing</CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="flex items-end gap-4">
                        <div className="flex-1">
                            <Label htmlFor="userCount">Number of Users</Label>
                            <Input
                                id="userCount"
                                type="number"
                                min="1"
                                value={userCount}
                                onChange={(e) => setUserCount(parseInt(e.target.value) || 1)}
                            />
                        </div>
                    </div>
                </CardContent>
            </Card>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {packages.map((pkg) => (
                    <PackageCard
                        key={pkg.id}
                        package={pkg}
                        isActive={pkg.id === currentPackageId}
                        onSelect={handleSelectPackage}
                    />
                ))}
            </div>
        </div>
    );
};