import React, { ReactNode, useState } from 'react';
import { router, Head } from '@inertiajs/react';
import AdminLayout from '@admin/layouts/admin/admin-layout';
import { Button } from '@admin/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@admin/components/ui/card';
import { Badge } from '@admin/components/ui/badge';
import { ChevronDown, ChevronRight, Package as PackageIcon, Zap, Layers, Edit, ArrowLeft, DollarSign } from 'lucide-react';
import { cn } from '@admin/lib/utils';

interface Feature {
    id: number;
    name: string;
    slug: string;
    price_per_tenant: number;
    price_per_user: number;
    selected: boolean;
    is_required: boolean;
}

interface Module {
    name: string;
    features: Feature[];
    is_required: boolean;
}

interface App {
    name: string;
    modules: Module[];
}

export interface PackageData {
    id: number;
    name: string;
    slug: string;
    status: boolean;
    package_type?: number;
    pricing_type?: number;
    user_count?: number;
    hierarchy: App[];
    price_per_tenant: number;
    price_per_user: number;
}

interface Props {
    package: PackageData;
}

const PricingType = {
    PER_TENANT: 1,
    PER_USER: 2,
} as const;

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

function InfoField({ label, value }: { label: string; value?: string | number | boolean }) {
    if (value === undefined || value === null || value === '') return null;

    return (
        <div className="space-y-1">
            <label className="text-xs font-medium text-gray-500 uppercase">{label}</label>
            <p className="text-sm font-medium text-gray-900">{typeof value === 'boolean' ? (value ? 'Yes' : 'No') : value}</p>
        </div>
    );
}

// Feature Item Component (Read-only)
const FeatureItem = ({ feature, pricingType }: { feature: Feature; pricingType?: number }) => {
    const price = pricingType === PricingType.PER_TENANT ? feature.price_per_tenant : feature.price_per_user;
    const isRequired = feature.is_required;

    return (
        <div
            className={cn(
                'flex items-center justify-between rounded-lg border bg-white px-3 py-2.5',
                feature.selected && 'border-emerald-200 bg-emerald-50/30',
                isRequired && 'border-amber-200 bg-amber-50/20',
            )}
        >
            <div className="flex flex-1 items-center gap-2.5">
                <Zap className={cn('h-3.5 w-3.5', feature.selected ? 'text-emerald-600' : 'text-gray-300')} />
                <span className={cn('text-xs font-medium', feature.selected ? 'text-gray-900' : 'text-gray-500')}>
                    {feature.name}
                    {isRequired && <span className="ml-1.5 text-[10px] font-bold text-amber-600">(Required)</span>}
                </span>
            </div>
            {price > 0 && (
                <span className="rounded-md px-2 py-0.5 font-mono text-xs font-semibold bg-emerald-100 text-emerald-700">
                    ${price.toFixed(2)}
                </span>
            )}
        </div>
    );
};

// Module Card Component (Read-only)
const ModuleCard = ({ module, pricingType }: { module: Module; pricingType?: number }) => {
    const [isExpanded, setIsExpanded] = useState(true);
    const selectedCount = module.features.filter((f) => f.selected).length;
    const hasAnySelected = selectedCount > 0;
    const isRequired = module.is_required;

    return (
        <Card className={cn('overflow-hidden border bg-white', isRequired && 'border-amber-300')}>
            <div className={cn('flex items-center justify-between border-b bg-gray-50/50 p-3', isRequired && 'bg-amber-50/50')}>
                <div className="flex flex-1 items-center gap-2.5">
                    <Layers className={cn('h-4 w-4', hasAnySelected ? 'text-blue-600' : 'text-gray-300')} />
                    <h4 className={cn('text-sm font-semibold', hasAnySelected ? 'text-gray-900' : 'text-gray-500')}>
                        {module.name}
                        {isRequired && <span className="ml-1.5 text-[10px] font-bold text-amber-600">(Required)</span>}
                    </h4>
                    <span className="text-[10px] text-gray-500">
                        ({selectedCount}/{module.features.length})
                    </span>
                </div>
                <Button variant="ghost" size="sm" className="h-7 w-7 p-0 hover:bg-gray-100" onClick={() => setIsExpanded(!isExpanded)}>
                    {isExpanded ? <ChevronDown className="h-4 w-4 text-gray-600" /> : <ChevronRight className="h-4 w-4 text-gray-600" />}
                </Button>
            </div>

            {isExpanded && (
                <div className="space-y-2 bg-gray-50/30 p-3">
                    {module.features.map((feature) => (
                        <FeatureItem key={feature.id} feature={feature} pricingType={pricingType} />
                    ))}
                </div>
            )}
        </Card>
    );
};

// App Section Component (Read-only)
const AppSection = ({ app, pricingType }: { app: App; pricingType?: number }) => {
    const [isExpanded, setIsExpanded] = useState(true);
    const totalFeatures = app.modules.reduce((sum, m) => sum + m.features.length, 0);
    const selectedFeatures = app.modules.reduce((sum, m) => sum + m.features.filter((f) => f.selected).length, 0);
    const hasAnySelected = selectedFeatures > 0;

    return (
        <div className={cn('overflow-hidden rounded-xl border bg-white shadow-sm', hasAnySelected && 'border-indigo-300')}>
            <div className="flex items-center justify-between border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-5 py-4">
                <div className="flex flex-1 items-center gap-3">
                    <div className={cn('rounded-lg border bg-white p-2 shadow-sm', hasAnySelected ? 'border-indigo-300' : 'border-gray-200')}>
                        <Layers className={cn('h-5 w-5', hasAnySelected ? 'text-indigo-600' : 'text-gray-300')} />
                    </div>
                    <div>
                        <div className="flex items-center gap-2">
                            <h3 className={cn('text-base font-bold', hasAnySelected ? 'text-gray-900' : 'text-gray-500')}>{app.name}</h3>
                        </div>
                        <p className="text-xs font-medium text-gray-500">
                            {selectedFeatures}/{totalFeatures} features selected
                        </p>
                    </div>
                </div>
                <Button variant="ghost" size="sm" onClick={() => setIsExpanded(!isExpanded)} className="hover:bg-gray-100">
                    {isExpanded ? <ChevronDown className="h-5 w-5 text-gray-600" /> : <ChevronRight className="h-5 w-5 text-gray-600" />}
                </Button>
            </div>

            {isExpanded && (
                <div className="grid gap-4 bg-gray-50/30 p-5 sm:grid-cols-2 lg:grid-cols-3">
                    {app.modules.map((module, idx) => (
                        <ModuleCard key={idx} module={module} pricingType={pricingType} />
                    ))}
                </div>
            )}
        </div>
    );
};

function PackageView({ package: pkg }: Props) {
    const handleBackToList = () => {
        router.visit(route('admin.packages.index'));
    };

    const handleEdit = () => {
        router.visit(route('admin.packages.edit', pkg.id));
    };

    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 totalSelectedFeatures = pkg.hierarchy.reduce(
        (sum, app) => sum + app.modules.reduce((mSum, module) => mSum + module.features.filter((f) => f.selected).length, 0),
        0,
    );

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

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

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

    const displayPrice = pkg.pricing_type === PricingType.PER_USER 
        ? (pkg.price_per_user * (pkg.user_count || 1))
        : pkg.price_per_tenant;

    return (
        <>
            <Head title={`Package: ${pkg.name}`} />
            <div className="space-y-6 p-6">
                <Card className="overflow-hidden shadow-xl border-2 border-gray-200">
                    {/* Package Header - Sticky */}
                    <div className="sticky top-0 z-10 bg-gradient-to-r from-white via-gray-50 to-white border-b-2 border-gray-200 shadow-md">
                        <div className="flex items-center justify-between p-6">
                            <div className="flex items-center gap-4 flex-1">
                                <div className="p-3 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 shadow-lg">
                                    <PackageIcon className="h-7 w-7 text-white" />
                                </div>
                                <div>
                                    <div className="flex items-center gap-3 mb-1">
                                        <h2 className="text-2xl font-bold text-gray-900">{pkg.name}</h2>
                                        <Badge
                                            className={cn(
                                                'font-semibold text-xs px-2.5 py-1',
                                                pkg.status
                                                    ? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-100 border border-emerald-300'
                                                    : 'bg-gray-200 text-gray-600 hover:bg-gray-200 border border-gray-300',
                                            )}
                                        >
                                            {pkg.status ? 'Active' : 'Inactive'}
                                        </Badge>
                                    </div>
                                    <div className="flex items-center gap-4 text-sm font-medium text-gray-600">
                                        <span className="flex items-center gap-1">
                                            <DollarSign className="h-4 w-4 text-emerald-600" />
                                            <span className="font-bold text-emerald-600">
                                                ${displayPrice.toFixed(2)}
                                            </span>
                                            <span className="text-xs">
                                                ({pkg.pricing_type === PricingType.PER_USER ? 'Per User' : 'Per Tenant'})
                                            </span>
                                        </span>
                                        <span className="text-gray-400">|</span>
                                        <span>{totalAppsSelected} Apps</span>
                                        <span className="text-gray-400">|</span>
                                        <span>{totalModulesSelected} Modules</span>
                                        <span className="text-gray-400">|</span>
                                        <span>{totalSelectedFeatures} Features</span>
                                    </div>
                                </div>
                            </div>
                            <div className="flex items-center gap-3">
                                <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={handleEdit}
                                    className="bg-blue-600 text-white hover:bg-blue-700 border-blue-600"
                                >
                                    <Edit className="h-4 w-4 mr-1" />
                                    Edit
                                </Button>
                                <Button variant="outline" size="sm" onClick={handleBackToList} className="bg-white hover:bg-gray-50 border-gray-300">
                                    <ArrowLeft className="h-4 w-4 mr-1" />
                                    Back to List
                                </Button>
                            </div>
                        </div>
                    </div>

                    {/* Package Content */}
                    <CardContent className="p-6 bg-gray-50/50">
                        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
                            {/* Left Column - Features */}
                            <div className="space-y-6 lg:col-span-2">
                                <div>
                                    <h3 className="mb-4 flex items-center gap-2 text-lg font-semibold">
                                        <Zap className="h-5 w-5 text-emerald-600" />
                                        Selected Features
                                    </h3>
                                    {pkg.hierarchy.length === 0 ? (
                                        <div className="py-12 text-center text-gray-500">
                                            <p>No features available</p>
                                        </div>
                                    ) : (
                                        <div className="space-y-5">
                                            {pkg.hierarchy.map((app, idx) => (
                                                <AppSection key={idx} app={app} pricingType={pkg.pricing_type} />
                                            ))}
                                        </div>
                                    )}
                                </div>
                            </div>

                            {/* Right Column - Package Info */}
                            <div className="space-y-6">
                                {/* Package Details */}
                                <Card className="overflow-hidden border-0 shadow-lg">
                                    <CardHeader className="border-b bg-gradient-to-r from-blue-50 via-indigo-50 to-blue-50 px-6 py-5">
                                        <div className="flex items-center gap-3">
                                            <div className="rounded-xl bg-blue-500 p-2.5 shadow-md">
                                                <PackageIcon className="h-5 w-5 text-white" />
                                            </div>
                                            <div>
                                                <CardTitle className="text-lg font-bold text-gray-900">Package Details</CardTitle>
                                                <p className="text-xs text-gray-600">Configuration and pricing</p>
                                            </div>
                                        </div>
                                    </CardHeader>
                                    <CardContent className="space-y-5 p-6">
                                        <InfoField label="Package Name" value={pkg.name} />
                                        <InfoField label="Package Type" value={pkg.package_type === PackageType.DEFAULT ? 'Default' : 'Custom'} />
                                        <InfoField label="Pricing Type" value={pkg.pricing_type === PricingType.PER_USER ? 'Per User' : 'Per Tenant'} />
                                        
                                        {pkg.pricing_type === PricingType.PER_USER && (
                                            <>
                                                <InfoField label="Price Per User" value={`$${pkg.price_per_user.toFixed(2)}`} />
                                                <InfoField label="User Count" value={pkg.user_count} />
                                                <div className="rounded-lg border bg-blue-50 p-4">
                                                    <p className="text-xs font-medium text-gray-500 uppercase mb-1">Calculated Price</p>
                                                    <p className="text-2xl font-bold text-blue-600">
                                                        ${displayPrice.toFixed(2)}
                                                    </p>
                                                    <p className="text-xs text-gray-600 mt-1">
                                                        ${pkg.price_per_user.toFixed(2)} × {pkg.user_count || 1} users
                                                    </p>
                                                </div>
                                            </>
                                        )}
                                        
                                        {pkg.pricing_type === PricingType.PER_TENANT && (
                                            <div className="rounded-lg border bg-blue-50 p-4">
                                                <p className="text-xs font-medium text-gray-500 uppercase mb-1">Base Price</p>
                                                <p className="text-2xl font-bold text-blue-600">
                                                    ${pkg.price_per_tenant.toFixed(2)}
                                                </p>
                                                <p className="text-xs text-gray-600 mt-1">Per Tenant</p>
                                            </div>
                                        )}
                                    </CardContent>
                                </Card>

                                {/* Package Summary */}
                                <Card className="overflow-hidden border-0 shadow-lg">
                                    <CardHeader className="border-b bg-gradient-to-r from-emerald-50 via-green-50 to-emerald-50 px-6 py-5">
                                        <div className="flex items-center gap-3">
                                            <div className="rounded-xl bg-emerald-500 p-2.5 shadow-md">
                                                <Layers className="h-5 w-5 text-white" />
                                            </div>
                                            <div>
                                                <CardTitle className="text-lg font-bold text-gray-900">Package Summary</CardTitle>
                                                <p className="text-xs text-gray-600">Selection overview</p>
                                            </div>
                                        </div>
                                    </CardHeader>
                                    <CardContent className="p-6">
                                        <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>
                                        
                                        {totalFeaturesPrice > 0 && (
                                            <div className="mt-4 rounded-lg border-2 border-blue-200 bg-blue-50 p-4">
                                                <p className="text-xs font-medium text-gray-600 uppercase mb-1">Features Total</p>
                                                <p className="text-2xl font-bold text-blue-700">
                                                    ${totalFeaturesPrice.toFixed(2)}
                                                </p>
                                            </div>
                                        )}
                                    </CardContent>
                                </Card>
                            </div>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </>
    );
}

export default PackageView;

PackageView.layout = (page: ReactNode) => (
    <AdminLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Packages', href: route('admin.packages.index') },
            { title: 'View Details', href: '#' },
        ]}
    >
        {page}
    </AdminLayout>
);