import { Button } from '@admin/components/ui/button';
import { Card, CardContent } from '@admin/components/ui/card';
import { Input } from '@admin/components/ui/input';
import { Label } from '@admin/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@admin/components/ui/select';
import { Switch } from '@admin/components/ui/switch';
import { cn } from '@admin/lib/utils';
import { router } from '@inertiajs/react';
import { ChevronDown, ChevronRight, DollarSign, Layers, Package as PackageIcon, Save, Zap } from 'lucide-react';
import { useEffect, useState } from 'react';
import { toast } from 'sonner';
import { usePackageFormState, AppSection } from './completeToggleSystem';




interface Feature {
    id: number;
    name: string;
    slug: string;
    price_per_tenant: number;
    price_per_user: number;
    selected: boolean;
    is_required: boolean;
    status: number;
    enabled?: boolean; // Tracks if feature is enabled in pivot table
    inPackage?: boolean; // Tracks if feature should be saved to pivot table
}

interface Module {
    id: number;
    name: string;
    features: Feature[];
    is_required: boolean;
    status: number;
    selected?: boolean;
    inPackage?: boolean;
}

interface App {
    id: number;
    name: string;
    modules: Module[];
    is_required: boolean;
    status: number;
    enabled?: boolean;
    inPackage?: boolean;
}

export interface PackageData {
    id?: number;
    name: string;
    slug: string;
    price: number;
    status: boolean;
    package_type?: number; // 1 = DEFAULT, 2 = CUSTOM
    pricing_type?: number; // 1 = PER_TENANT, 2 = PER_USER
    user_count?: number;
    hierarchy: App[];
    price_per_tenant: number;
    price_per_user: number;
}

// Pricing type enum matching backend
const PricingType = {
    PER_TENANT: 1,
    PER_USER: 2,
} as const;

const PackageType = {
    DEFAULT: 1,
    CUSTOM: 2,
    ADD_ON: 3,
} as const;

interface Props {
    package?: PackageData;
    isEdit?: boolean;
    isAddon?: boolean;
}

// Components (FeatureItem, ModuleCard, AppSection) are imported from completeToggleSystem.tsx

export default function PackageForm({ package: pkg, isEdit = false, isAddon = false }: Props) {
    const isCreateMode = !pkg?.id; // No ID means create mode
    
    // Use the hook from completeToggleSystem.tsx
    const {
        hierarchy,
        handleFeatureChange,
        handleModuleToggle,
        handleAppToggle,
    } = usePackageFormState(pkg);

    // Helper function to get the correct price based on pricing type
    const getFeaturePrice = (feature: Feature, pricingType?: number): number => {
        if (!pricingType) return 0;
        return pricingType === PricingType.PER_TENANT ? feature.price_per_tenant : feature.price_per_user;
    };

    const [formData, setFormData] = useState(() => {
        const pricingType = pkg?.pricing_type || PricingType.PER_TENANT;
        const pricePerTenant = Number(pkg?.price_per_tenant) || 0;
        const pricePerUser = Number(pkg?.price_per_user) || 0;
        const userCount = Number(pkg?.user_count) || 1;

        // Calculate initial price based on pricing type
        const initialPrice = pricingType === PricingType.PER_USER ? pricePerUser * userCount : pricePerTenant;

        return {
            name: pkg?.name || '',
            slug: pkg?.slug || '',
            price: initialPrice,
            price_per_tenant: pricePerTenant,
            status: pkg?.status ?? true,
            pricing_type: pricingType,
            package_type: pkg?.package_type || PackageType.DEFAULT,
            price_per_user: pricePerUser,
            user_count: userCount,
        };
    });

    const handleSave = () => {
        // CRITICAL: We must send ALL items that exist in the pivot table (inPackage=true)
        // This ensures sync() updates the status instead of deleting records
        // The pivot table should contain all records, only the status changes
        
        const appsData: Record<number, number> = {};
        const modulesData: Record<number, number> = {};
        const featuresData: Record<number, number> = {};

        hierarchy.forEach((app) => {
            // Determine if app has any features in package (selected or already in package)
            let hasPackageContent = false;

            app.modules.forEach((module) => {
                let moduleHasFeatures = false;

                module.features.forEach((feature) => {
                    // Include feature if it's selected OR already in the package
                    if (feature.selected || feature.inPackage) {
                        const isAppEnabled = app.enabled === true;
                        const isModuleEnabled = module.selected === true;
                        const isFeatureSelected = feature.selected === true;
                        const featureStatus = (isAppEnabled && isModuleEnabled && isFeatureSelected) ? 1 : 0;
                        
                        featuresData[feature.id] = featureStatus;
                        moduleHasFeatures = true;
                        hasPackageContent = true;
                    }
                });

                // Include module if it has features OR is already in package OR is currently selected
                // (modules with no features, e.g. Inventory, must be saved when user enables them)
                if (moduleHasFeatures || module.inPackage || module.selected) {
                    const isAppEnabled = app.enabled === true;
                    const isModuleEnabled = module.selected === true;
                    const moduleStatus = (isAppEnabled && isModuleEnabled) ? 1 : 0;

                    modulesData[module.id] = moduleStatus;
                    if (module.selected) hasPackageContent = true;
                }
            });

            // CRITICAL: Include app if it has content OR is already in package OR is currently enabled
            // This ensures feature-less apps (e.g. Inventory) are saved when user enables them
            if (hasPackageContent || app.inPackage || app.enabled) {
                const appStatus = app.enabled === true ? 1 : 0;
                appsData[app.id] = appStatus;
            }
        });

        const payload = {
            name: formData.name,
            price_per_tenant: formData.price_per_tenant,
            status: formData.status ? 1 : 0,
            price_per_user: formData.price_per_user || 0,
            pricing_type: formData.pricing_type,
            package_type: formData.package_type,
            user_count: formData.user_count || 1,
            features: featuresData,
            modules: modulesData,
            apps: appsData,
        };

        console.log(payload);

        if (isCreateMode) {
            const routeName = isAddon ? 'admin.packages-addon.store' : 'admin.packages.store';
            const successMessage = isAddon ? 'Add-On Package created successfully' : 'Package created successfully';
            const errorMessage = isAddon ? 'Failed to create add-on package' : 'Failed to create package';
            
            router.post(route(routeName), payload, {
                preserveScroll: true,
                onSuccess: () => {
                    router.visit(route('admin.packages.index'));
                },
                onError: (errors) => {
                    console.error(errorMessage, errors);
                    toast.error(errorMessage);
                },
            });
        } else {
            router.put(route('admin.packages.update', pkg!.id), payload, {
                preserveScroll: true,
                onSuccess: () => {
                    router.visit(route('admin.packages.index'));
                },
                onError: (errors) => {
                    console.error('Failed to update package:', errors);
                    toast.error('Failed to update package');
                },
            });
        }
    };

    const totalSelectedFeatures = hierarchy.reduce(
        (sum, app) => sum + app.modules.reduce((mSum, module) => mSum + module.features.filter((f) => f.selected).length, 0),
        0,
    );

    const totalFeaturesPrice = hierarchy.reduce(
        (sum, app) =>
            sum +
            app.modules.reduce(
                (mSum, module) =>
                    mSum + module.features.filter((f) => f.selected).reduce((fSum, f) => fSum + getFeaturePrice(f, formData.pricing_type), 0),
                0,
            ),
        0,
    );

    const totalAppsSelected = hierarchy.filter((app) => app.modules.some((module) => module.features.some((f) => f.selected))).length;

    const totalModulesSelected = hierarchy.reduce(
        (sum, app) => sum + app.modules.filter((module) => module.features.some((f) => f.selected)).length,
        0,
    );

    const totalApps = hierarchy.length;
    const totalModules = hierarchy.reduce((sum, app) => sum + app.modules.length, 0);
    const totalFeatures = hierarchy.reduce((sum, app) => sum + app.modules.reduce((mSum, module) => mSum + module.features.length, 0), 0);

    // Auto-update price based on pricing type
    useEffect(() => {
        if (formData.pricing_type === PricingType.PER_USER) {
            // When per-user pricing is enabled, price is based on user count
            const basePrice = Number(formData.price_per_user) || 0;
            const minUsers = Number(formData.user_count) || 1;
            const calculatedPrice = basePrice * minUsers;
            setFormData((prev) => ({ ...prev, price: calculatedPrice }));
        } else if (formData.pricing_type === PricingType.PER_TENANT) {
            // When switching to per-tenant, restore the price_per_tenant value
            const tenantPrice = Number(formData.price_per_tenant) || 0;
            setFormData((prev) => ({ ...prev, price: tenantPrice }));
        }
    }, [formData.pricing_type, formData.price_per_user, formData.user_count, formData.price_per_tenant]);

    const pageTitle = isCreateMode 
        ? (isAddon ? 'Create New Add-On Package' : 'Create New Package')
        : `Edit Package: ${pkg?.name}`;
    const pageDescription = isCreateMode 
        ? (isAddon ? 'Configure a new add-on package with features' : 'Configure a new package with features')
        : 'Update package configuration and features';

    return (
        <div className="space-y-6">
            {/* Package Basic Info */}
            <Card className="overflow-hidden border-0 shadow-lg">
                <div className="border-b bg-white p-6">
                <h3 className="mb-4 flex items-center gap-2 text-lg font-semibold">
                    <PackageIcon className="h-5 w-5 text-blue-600" />
                    Package Details
                </h3>
                <div className={`grid grid-cols-1 gap-6 ${formData.pricing_type !== PricingType.PER_USER ? 'md:grid-cols-2' : 'md:grid-cols-3'}`}>
                    {/* Package Name */}
                    <div className="space-y-2">
                        <Label htmlFor="name">Package Name *</Label>
                        <Input
                            id="name"
                            value={formData.name}
                            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                            placeholder="Enter package name"
                        />
                    </div>

                    {/* Package Type */}
                    <div className="space-y-2">
                        <Label htmlFor="package_type">Package Type *</Label>
                        <Select
                            value={formData.package_type.toString()}
                            onValueChange={(value) => {
                                const package_type = parseInt(value);
                                setFormData({
                                    ...formData,
                                    package_type: package_type,
                                });
                            }}
                            disabled={isAddon}
                        >
                            <SelectTrigger>
                                <SelectValue placeholder="Select package type" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value={PackageType.DEFAULT.toString()}>Default</SelectItem>
                                <SelectItem value={PackageType.CUSTOM.toString()}>Custom</SelectItem>
                                <SelectItem value={PackageType.ADD_ON.toString()}>Add-On</SelectItem>
                            </SelectContent>
                        </Select>
                        {isAddon && (
                            <p className="text-xs text-purple-600 font-medium">
                                🔒 Package type is locked to Add-On for this creation flow
                            </p>
                        )}
                    </div>

                    {/* Pricing Type */}
                    <div className="space-y-2">
                        <Label htmlFor="pricing_type">Pricing Type *</Label>
                        <Select
                            value={formData.pricing_type.toString()}
                            onValueChange={(value) => {
                                const pricingType = parseInt(value);
                                setFormData({
                                    ...formData,
                                    pricing_type: pricingType,
                                });
                            }}
                        >
                            <SelectTrigger>
                                <SelectValue placeholder="Select pricing type" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value={PricingType.PER_TENANT.toString()}>Per Tenant</SelectItem>
                                <SelectItem value={PricingType.PER_USER.toString()}>Per User</SelectItem>
                            </SelectContent>
                        </Select>
                        <p className="text-xs text-gray-500">
                            {formData.pricing_type === PricingType.PER_TENANT ? 'Features charged per tenant' : 'Features charged per user'}
                        </p>
                    </div>

                    {/* Base Price */}
                    {formData.pricing_type !== PricingType.PER_USER && (
                        <div className="space-y-2">
                            <Label htmlFor="price">Price *</Label>
                            <div className="relative">
                                <DollarSign className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-500" />
                                <Input
                                    id="price"
                                    type="number"
                                    step="0.01"
                                    min="0"
                                    value={formData.price}
                                    onChange={(e) =>
                                        setFormData({
                                            ...formData,
                                            price_per_tenant: parseFloat(e.target.value) || 0,
                                            price: parseFloat(e.target.value) || 0,
                                            price_per_user: 0,
                                        })
                                    }
                                    placeholder="0.00"
                                    className="pl-9"
                                />
                            </div>
                            <p className="text-xs text-gray-500">
                                {formData.pricing_type === PricingType.PER_USER
                                    ? `Auto-calculated: $${(Number(formData.price_per_user) || 0).toFixed(2)} × ${Number(formData.user_count) || 1} users = $${(Number(formData.price) || 0).toFixed(2)}`
                                    : `💡 Reference: Sum of selected features = $${(totalFeaturesPrice || 0).toFixed(2)}`}
                            </p>
                        </div>
                    )}

                    {/* Status */}
                    <div className="space-y-2">
                        <Label>Status</Label>
                        <div className="flex h-10 items-center gap-3">
                            <Switch checked={formData.status} onCheckedChange={(checked) => setFormData({ ...formData, status: checked })} />
                            <span className="text-sm text-gray-600">{formData.status ? 'Active' : 'Inactive'}</span>
                        </div>
                    </div>
                </div>

                {/* Per-User Pricing Fields - Show when Pricing Type is PER_USER */}
                {formData.pricing_type === PricingType.PER_USER && (
                    <div className="mt-4 rounded-lg border p-4">
                        <h4 className="mb-3 text-sm font-semibold text-blue-900">Per-User Pricing Configuration</h4>
                        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                            <div className="space-y-2">
                                <Label htmlFor="price_per_user">Price Per User *</Label>
                                <div className="relative">
                                    <DollarSign className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-500" />
                                    <Input
                                        id="price_per_user"
                                        type="number"
                                        step="0.01"
                                        min="0"
                                        value={formData.price_per_user}
                                        onChange={(e) => {
                                            const val = e.target.value;
                                            if (val === '' || val === '-') {
                                                setFormData({ ...formData, price_per_user: 0 });
                                            } else {
                                                const numValue = parseFloat(val);
                                                if (!isNaN(numValue) && numValue >= 0) {
                                                    setFormData({ ...formData, price_per_user: numValue, price_per_tenant: 0 });
                                                }
                                            }
                                        }}
                                        onBlur={(e) => {
                                            if (e.target.value === '') {
                                                setFormData({ ...formData, price_per_user: 0 });
                                            }
                                        }}
                                        placeholder="0.00"
                                        className="pl-9"
                                    />
                                </div>
                                <p className="text-xs text-gray-500">Base price charged per user</p>
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="user_count">User Count *</Label>
                                <Input
                                    id="user_count"
                                    type="number"
                                    min="1"
                                    step="1"
                                    value={formData.user_count}
                                    onChange={(e) => {
                                        const val = e.target.value;
                                        if (val === '' || val === '-') {
                                            setFormData({ ...formData, user_count: 1 });
                                        } else {
                                            const numValue = parseInt(val);
                                            if (!isNaN(numValue) && numValue >= 1) {
                                                setFormData({ ...formData, user_count: numValue });
                                            }
                                        }
                                    }}
                                    onBlur={(e) => {
                                        if (e.target.value === '' || parseInt(e.target.value) < 1) {
                                            setFormData({ ...formData, user_count: 1 });
                                        }
                                    }}
                                />
                                <p className="text-xs text-gray-500">Number of users for this package</p>
                            </div>
                        </div>
                        <div className="mt-4 rounded-md">
                            <p className="text-xs font-medium text-gray-500">
                                💡 Calculated Price: ${(Number(formData.price_per_user) || 0).toFixed(2)} per user ×{' '}
                                {Number(formData.user_count) || 1} users ={' '}
                                <span className="font-bold">
                                    ${((Number(totalFeaturesPrice) || 0) * (Number(formData.user_count) || 1)).toFixed(2)}
                                </span>
                            </p>
                        </div>
                    </div>
                )}

                {/* Package Summary */}
                <div className="mt-6 space-y-3">
                    {/* Price Summary */}
                    <div className="rounded-lg border-2 border-blue-200 bg-linear-to-r from-blue-50 to-purple-50 p-4">
                        <div className="flex items-center justify-between">
                            <div className="flex-1">
                                <p className="text-sm font-semibold text-gray-700">Package Pricing</p>
                                {formData.pricing_type === PricingType.PER_USER ? (
                                    <p className="mt-1 text-xs text-gray-600">
                                        💰 Per-user pricing: ${(Number(formData.price_per_user) || 0).toFixed(2)} × {Number(formData.user_count) || 1}{' '}
                                        users
                                    </p>
                                ) : (
                                    <div className="mt-1 space-y-0.5">
                                        {totalFeaturesPrice > 0 && (
                                            <p className="text-xs text-gray-500">💡 Features suggestion: ${totalFeaturesPrice.toFixed(2)}</p>
                                        )}
                                        <p className="text-xs font-medium text-amber-600">✏️ Base price is manually editable</p>
                                    </div>
                                )}
                            </div>
                            <div className="text-right">
                                <p className="text-xs font-medium text-gray-600">
                                    {formData.pricing_type === PricingType.PER_USER ? 'Calculated Price' : 'Base Price'}
                                </p>
                                <p className="text-3xl font-bold text-blue-600">${(Number(formData.price) || 0).toFixed(2)}</p>
                            </div>
                        </div>
                    </div>

                    {/* Selection Stats */}
                    <div className="grid grid-cols-3 gap-3">
                        <div className="rounded-lg border p-3">
                            <p className="text-xs font-medium text-indigo-600">Apps</p>
                            <p className="text-lg font-bold text-indigo-900">
                                {totalAppsSelected}/{totalApps}
                            </p>
                        </div>
                        <div className="rounded-lg border p-3">
                            <p className="text-xs font-medium text-blue-600">Modules</p>
                            <p className="text-lg font-bold text-blue-900">
                                {totalModulesSelected}/{totalModules}
                            </p>
                        </div>
                        <div className="rounded-lg border p-3">
                            <p className="text-xs font-medium text-emerald-600">Features</p>
                            <p className="text-lg font-bold text-emerald-900">
                                {totalSelectedFeatures}/{totalFeatures}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {/* Features Selection */}
            <CardContent className="bg-gray-50/50 p-6">
                <h3 className="mb-4 flex items-center gap-2 text-lg font-semibold">
                    <Zap className="h-5 w-5 text-emerald-600" />
                    Select Features
                </h3>
                {hierarchy.length === 0 ? (
                    <div className="py-12 text-center text-gray-500">
                        <p>No features available</p>
                    </div>
                ) : (
                    <div className="space-y-5">
                         {hierarchy.map((app, idx) => (
                            <AppSection
                            key={idx}
                            app={app}
                            onAppToggle={handleAppToggle}
                            onModuleToggle={handleModuleToggle}
                            onFeatureChange={handleFeatureChange}
                            pricingType={formData.pricing_type}
                            />
                        ))}
                    </div>
                )}
            </CardContent>

            {/* Action Buttons */}
            <div className="flex items-center justify-end gap-3 rounded-lg border-t bg-white p-6 shadow-sm">
                <Button
                    variant="secondary"
                    size="lg"
                    className="border border-gray-300 bg-white px-6 font-semibold text-gray-700 shadow-sm hover:bg-gray-100"
                    onClick={() => router.visit(route('admin.packages.index'))}
                >
                    Cancel
                </Button>
                <Button
                    type="button"
                    variant="default"
                    size="lg"
                    className="flex items-center gap-2 bg-blue-600 px-8 font-bold text-white shadow-md hover:bg-blue-700"
                    onClick={handleSave}
                >
                    <Save className="mr-2 h-5 w-5" />
                    {isCreateMode ? 'Create Package' : 'Save Changes'}
                </Button>
            </div>
            </Card>
        </div>
    );
}