import React, { useState } from 'react';
import { router } from '@inertiajs/react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';

interface Feature {
    id: number;
    name: string;
    slug: string;
    price: number;
    module: string;
}

interface FeatureGroup {
    [moduleName: string]: Feature[];
}

interface FeatureSelectorProps {
    availableFeatures: FeatureGroup;
    selectedFeatureIds?: number[];
    onSubmit?: (featureIds: number[]) => void;
}

export const FeatureSelector: React.FC<FeatureSelectorProps> = ({ 
    availableFeatures, 
    selectedFeatureIds = [],
    onSubmit 
}) => {
    const [selected, setSelected] = useState<Set<number>>(new Set(selectedFeatureIds));

    const toggleFeature = (featureId: number) => {
        const newSelected = new Set(selected);
        if (newSelected.has(featureId)) {
            newSelected.delete(featureId);
        } else {
            newSelected.add(featureId);
        }
        setSelected(newSelected);
    };

    const calculateTotal = () => {
        return Object.values(availableFeatures)
            .flat()
            .filter(f => selected.has(f.id))
            .reduce((sum, f) => sum + f.price, 0);
    };

    const handleSubmit = () => {
        if (onSubmit) {
            onSubmit(Array.from(selected));
        }
    };

    return (
        <div className="space-y-6">
            {Object.entries(availableFeatures).map(([moduleName, features]) => (
                <Card key={moduleName}>
                    <CardHeader>
                        <CardTitle className="text-lg">{moduleName}</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-3">
                        {features.map((feature) => (
                            <div key={feature.id} className="flex items-center justify-between">
                                <div className="flex items-center space-x-2">
                                    <Checkbox
                                        id={`feature-${feature.id}`}
                                        checked={selected.has(feature.id)}
                                        onCheckedChange={() => toggleFeature(feature.id)}
                                    />
                                    <label
                                        htmlFor={`feature-${feature.id}`}
                                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                    >
                                        {feature.name}
                                    </label>
                                </div>
                                <Badge variant="secondary">${feature.price}</Badge>
                            </div>
                        ))}
                    </CardContent>
                </Card>
            ))}

            <Card>
                <CardContent className="pt-6">
                    <div className="flex items-center justify-between">
                        <div>
                            <p className="text-sm text-muted-foreground">Total</p>
                            <p className="text-2xl font-bold">${calculateTotal().toFixed(2)}</p>
                        </div>
                        <Button onClick={handleSubmit}>
                            Create Custom Package
                        </Button>
                    </div>
                </CardContent>
            </Card>
        </div>
    );
};