import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import AdminLayout from '@/layouts/admin/admin-layout';
import { Head, router } from '@inertiajs/react';
import {
    Activity,
    ArrowLeft,
    Briefcase,
    Building2,
    Calendar,
    CheckCircle2,
    Clock,
    Database,
    DollarSign,
    Edit,
    FileText,
    Globe,
    HardDrive,
    Mail,
    MapPin,
    Package,
    Phone,
    Settings,
    UserCheck,
    Users,
    XCircle,
} from 'lucide-react';
import { ReactNode } from 'react';

// Types
interface StatusInfo {
    value: number;
    name: string;
    label: string;
    color: string;
}

interface BusinessInformation {
    business_type?: string;
    industry?: string;
    tax_id?: string;
    registration_number?: string;
}

interface Contact {
    id: number;
    name: string;
    email?: string;
    phone?: string;
    created_at?: string;
}

interface Settings {
    timezone: string;
    language: string;
    currency: string;
}

interface Metadata {
    notes?: string;
}

interface PackageInfo {
    id: number;
    name: string;
    slug: string;
    description?: string;
    pricing_type: number;
    price_per_tenant?: string;
    price_per_user?: string;
    features_count: number;
}

interface Subscription {
    id: number;
    subscription_type: number;
    subscription_name: string;
    user_count: number;
    total_price: string;
    started_at: string;
    expires_at: string;
    status: number;
    package: PackageInfo | null;
}

interface SubscriptionHistory {
    id: number;
    subscription_name: string;
    total_price: string;
    user_count: number;
    started_at: string;
    expires_at: string;
    status: number;
    package_name?: string;
}

interface Domain {
    id: number;
    domain: string;
    is_primary: boolean;
    is_custom: boolean;
    status: string;
    ssl_enabled: boolean;
    ssl_expires_at?: string;
    ssl_provider?: string;
    dns_status?: string;
    dns_verified_at?: string;
    force_https: boolean;
    created_at: string;
}

interface UsageStats {
    users_count: number;
    contacts_count: number;
    tasks_count: number;
    events_count: number;
    notes_count: number;
    reminders_count: number;
    storage_used_mb: number;
    last_activity?: string | null;
}

interface BillingInfo {
    current_plan: string;
    billing_cycle: string;
    next_billing_date?: string | null;
    total_amount: string;
    payment_status: string;
    total_revenue: string;
    subscriptions_count: number;
}

interface Tenant {
    id: number;
    uid: string;
    company_name: string;
    slug: string;
    database: string;
    email: string;
    phone?: string;
    address?: string;
    city?: string;
    state?: string;
    country?: string;
    zip_code?: string;
    status: number;
    status_info: StatusInfo;
    business_information?: BusinessInformation;
    contacts?: Contact[];
    settings?: Settings;
    metadata?: Metadata;
    subscription?: Subscription | null;
    subscriptions?: SubscriptionHistory[];
    domains?: Domain[];
    primary_domain?: string;
    usage_stats?: UsageStats;
    billing_info?: BillingInfo;
    created_at: string;
    updated_at: string;
    deleted_at?: string | null;
}

interface TenantShowProps {
    readonly tenant: Tenant;
}

// Reusable Components
function StatCard({ title, value, icon: Icon, description, color = 'blue' }: any) {
    const colorMap: Record<string, string> = {
        blue: 'from-blue-500 to-blue-600',
        green: 'from-green-500 to-green-600',
        purple: 'from-purple-500 to-purple-600',
        orange: 'from-orange-500 to-orange-600',
        red: 'from-red-500 to-red-600',
        cyan: 'from-cyan-500 to-cyan-600',
        indigo: 'from-indigo-500 to-indigo-600',
        pink: 'from-pink-500 to-pink-600',
    };

    return (
        <Card className="border-0 shadow-md transition-shadow hover:shadow-lg">
            <CardContent className="p-6">
                <div className="flex items-center justify-between">
                    <div className="flex-1">
                        <p className="text-sm font-medium text-muted-foreground">{title}</p>
                        <p className="mt-2 text-3xl font-bold">{value}</p>
                        {description && <p className="mt-1 text-xs text-muted-foreground">{description}</p>}
                    </div>
                    <div className={`rounded-xl bg-gradient-to-br p-4 ${colorMap[color]} shadow-md`}>
                        <Icon className="h-8 w-8 text-white" />
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}

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

    return (
        <div className="space-y-2">
            <label className="flex items-center gap-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
                {Icon && <Icon className="h-3.5 w-3.5" />}
                {label}
            </label>
            <p className="pl-5 text-sm font-medium text-foreground">{typeof value === 'boolean' ? (value ? 'Yes' : 'No') : value}</p>
        </div>
    );
}

function StatusBadge({ status }: { status: StatusInfo }) {
    const variantMap: Record<string, any> = {
        success: 'default',
        secondary: 'secondary',
        warning: 'outline',
        destructive: 'destructive',
    };

    return (
        <Badge variant={variantMap[status.color] || 'secondary'} className="px-3 py-1 font-semibold">
            {status.label}
        </Badge>
    );
}

// Main Component
export default function TenantShow({ tenant }: TenantShowProps) {
    const handleEdit = () => {
        router.visit(route('admin.tenants.edit', tenant.id));
    };

    const handleBackToList = () => {
        router.visit(route('admin.tenants.index'));
    };

    return (
        <>
            <Head title={`${tenant.company_name} - Tenant Details`} />

            <div className="space-y-4">
                {/* Header */}
                <Card className="border-0 shadow-md">
                    <CardContent className="p-4">
                        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                            <div className="flex flex-1 items-start gap-3">
                                <div className="rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 p-3 shadow">
                                    <Building2 className="h-6 w-6 text-white" />
                                </div>
                                <div className="flex-1">
                                    <div className="mb-1.5 flex flex-wrap items-center gap-2">
                                        <h1 className="text-2xl font-bold text-gray-900">{tenant.company_name}</h1>
                                        <StatusBadge status={tenant.status_info} />
                                        {tenant.deleted_at && (
                                            <Badge variant="destructive" className="px-2 py-0.5 text-xs">
                                                Deleted
                                            </Badge>
                                        )}
                                    </div>
                                    <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
                                        <span className="flex items-center gap-1.5 font-medium">
                                            <Mail className="h-3.5 w-3.5" />
                                            {tenant.email}
                                        </span>
                                        <span className="text-gray-400">•</span>
                                        <span className="flex items-center gap-1.5">
                                            <Database className="h-3.5 w-3.5" />
                                            <code className="rounded bg-gray-100 px-1.5 py-0.5 text-xs">{tenant.slug}</code>
                                        </span>
                                        {tenant.primary_domain && (
                                            <>
                                                <span className="text-gray-400">•</span>
                                                <span className="flex items-center gap-1.5">
                                                    <Globe className="h-3.5 w-3.5" />
                                                    <a
                                                        href={`https://${tenant.primary_domain}`}
                                                        target="_blank"
                                                        rel="noopener noreferrer"
                                                        className="text-blue-600 hover:underline"
                                                    >
                                                        {tenant.primary_domain}
                                                    </a>
                                                </span>
                                            </>
                                        )}
                                    </div>
                                </div>
                            </div>
                            <div className="flex items-center gap-2">
                                <Button onClick={handleEdit} size="sm" className="bg-blue-600 hover:bg-blue-700">
                                    <Edit className="mr-1.5 h-3.5 w-3.5" />
                                    Edit
                                </Button>
                                <Button variant="outline" size="sm" onClick={handleBackToList}>
                                    <ArrowLeft className="mr-1.5 h-3.5 w-3.5" />
                                    Back
                                </Button>
                            </div>
                        </div>
                    </CardContent>
                </Card>

                {/* Overview Section */}
                <div className="space-y-4">
                        {/* Stats Grid */}
                        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
                            <StatCard
                                title="Total Users"
                                value={tenant.usage_stats?.users_count || 0}
                                icon={Users}
                                description="Active users"
                                color="blue"
                            />
                            <StatCard
                                title="Storage Used"
                                value={`${tenant.usage_stats?.storage_used_mb || 0} MB`}
                                icon={HardDrive}
                                description="Database size"
                                color="purple"
                            />
                            <StatCard
                                title="Domains"
                                value={tenant.domains?.length || 0}
                                icon={Globe}
                                description="Configured domains"
                                color="green"
                            />
                            <StatCard
                                title="Total Revenue"
                                value={`$${tenant.billing_info?.total_revenue || '0.00'}`}
                                icon={DollarSign}
                                description="All-time revenue"
                                color="orange"
                            />
                        </div>

                        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
                            {/* Left Column */}
                            <div className="space-y-6 lg:col-span-2">
                                {/* Basic Information */}
                                <Card className="border-0 shadow-lg">
                                    <CardHeader className="border-b bg-gradient-to-r from-blue-50 to-indigo-50">
                                        <div className="flex items-center gap-3">
                                            <div className="rounded-lg bg-blue-500 p-2 shadow-md">
                                                <Building2 className="h-5 w-5 text-white" />
                                            </div>
                                            <div>
                                                <CardTitle>Company Information</CardTitle>
                                                <p className="mt-0.5 text-xs text-muted-foreground">Core business details and contact information</p>
                                            </div>
                                        </div>
                                    </CardHeader>
                                    <CardContent className="space-y-6 p-6">
                                        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                                            <InfoField label="Company Name" value={tenant.company_name} icon={Building2} />
                                            <InfoField label="Email Address" value={tenant.email} icon={Mail} />
                                            <InfoField label="Phone Number" value={tenant.phone} icon={Phone} />
                                            <InfoField label="Database Name" value={tenant.database} icon={Database} />
                                        </div>

                                        {tenant.address && (
                                            <div className="border-t pt-4">
                                                <h4 className="mb-4 flex items-center gap-2 text-sm font-semibold">
                                                    <MapPin className="h-4 w-4" />
                                                    Address Information
                                                </h4>
                                                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                                                    <div className="md:col-span-2">
                                                        <InfoField label="Street Address" value={tenant.address} />
                                                    </div>
                                                    <InfoField label="City" value={tenant.city} />
                                                    <InfoField label="State/Province" value={tenant.state} />
                                                    <InfoField label="Country" value={tenant.country} />
                                                    <InfoField label="Zip/Postal Code" value={tenant.zip_code} />
                                                </div>
                                            </div>
                                        )}

                                        {tenant.business_information && (
                                            <div className="border-t pt-4">
                                                <h4 className="mb-4 flex items-center gap-2 text-sm font-semibold">
                                                    <Briefcase className="h-4 w-4" />
                                                    Business Information
                                                </h4>
                                                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                                                    <InfoField label="Business Type" value={tenant.business_information.business_type} />
                                                    <InfoField label="Industry" value={tenant.business_information.industry} />
                                                    <InfoField label="Tax ID" value={tenant.business_information.tax_id} />
                                                    <InfoField label="Registration Number" value={tenant.business_information.registration_number} />
                                                </div>
                                            </div>
                                        )}
                                    </CardContent>
                                </Card>

                                {/* Settings */}
                                {tenant.settings && (
                                    <Card className="border-0 shadow-lg">
                                        <CardHeader className="border-b bg-gradient-to-r from-green-50 to-emerald-50">
                                            <div className="flex items-center gap-3">
                                                <div className="rounded-lg bg-green-500 p-2 shadow-md">
                                                    <Settings className="h-5 w-5 text-white" />
                                                </div>
                                                <div>
                                                    <CardTitle>Settings & Preferences</CardTitle>
                                                    <p className="mt-0.5 text-xs text-muted-foreground">Regional and localization settings</p>
                                                </div>
                                            </div>
                                        </CardHeader>
                                        <CardContent className="p-6">
                                            <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
                                                <InfoField label="Timezone" value={tenant.settings.timezone} />
                                                <InfoField label="Language" value={tenant.settings.language} />
                                                <InfoField label="Currency" value={tenant.settings.currency} />
                                            </div>
                                        </CardContent>
                                    </Card>
                                )}
                            </div>

                            {/* Right Column */}
                            <div className="space-y-6">
                                {/* Current Subscription */}
                                {tenant.subscription && (
                                    <Card className="border-0 shadow-lg">
                                        <CardHeader className="border-b bg-gradient-to-r from-purple-50 to-pink-50">
                                            <div className="flex items-center gap-3">
                                                <div className="rounded-lg bg-purple-500 p-2 shadow-md">
                                                    <Package className="h-5 w-5 text-white" />
                                                </div>
                                                <div>
                                                    <CardTitle>Current Subscription</CardTitle>
                                                    <p className="mt-0.5 text-xs text-muted-foreground">Active plan details</p>
                                                </div>
                                            </div>
                                        </CardHeader>
                                        <CardContent className="space-y-4 p-6">
                                            {tenant.subscription.package && (
                                                <div className="rounded-lg border-2 border-purple-200 bg-gradient-to-br from-purple-50 to-pink-50 p-4">
                                                    <h4 className="mb-1 text-lg font-bold">{tenant.subscription.package.name}</h4>
                                                    <p className="mb-2 text-3xl font-bold text-purple-600">${tenant.subscription.total_price}</p>
                                                    <p className="text-xs text-muted-foreground">
                                                        {tenant.subscription.package.features_count} features included
                                                    </p>
                                                </div>
                                            )}
                                            <div className="space-y-3">
                                                <InfoField label="User Count" value={tenant.subscription.user_count} icon={Users} />
                                                <InfoField
                                                    label="Started"
                                                    value={new Date(tenant.subscription.started_at).toLocaleDateString()}
                                                    icon={Calendar}
                                                />
                                                <InfoField
                                                    label="Expires"
                                                    value={new Date(tenant.subscription.expires_at).toLocaleDateString()}
                                                    icon={Clock}
                                                />
                                            </div>
                                        </CardContent>
                                    </Card>
                                )}

                                {/* Notes */}
                                {tenant.metadata?.notes && (
                                    <Card className="border-0 shadow-lg">
                                        <CardHeader className="border-b bg-gradient-to-r from-amber-50 to-yellow-50">
                                            <div className="flex items-center gap-3">
                                                <div className="rounded-lg bg-amber-500 p-2 shadow-md">
                                                    <FileText className="h-5 w-5 text-white" />
                                                </div>
                                                <CardTitle>Notes</CardTitle>
                                            </div>
                                        </CardHeader>
                                        <CardContent className="p-6">
                                            <p className="text-sm whitespace-pre-wrap text-muted-foreground">{tenant.metadata.notes}</p>
                                        </CardContent>
                                    </Card>
                                )}
                            </div>
                        </div>
                    </TabsContent>

                    {/* Domains Tab */}
                    <TabsContent value="domains" className="space-y-6">
                        <Card className="border-0 shadow-lg">
                            <CardHeader className="border-b">
                                <div className="flex items-center justify-between">
                                    <div className="flex items-center gap-3">
                                        <div className="rounded-lg bg-blue-500 p-2 shadow-md">
                                            <Globe className="h-5 w-5 text-white" />
                                        </div>
                                        <div>
                                            <CardTitle>Domain Configuration</CardTitle>
                                            <p className="mt-0.5 text-xs text-muted-foreground">Manage tenant domains and SSL certificates</p>
                                        </div>
                                    </div>
                                    <Badge variant="outline">{tenant.domains?.length || 0} domains</Badge>
                                </div>
                            </CardHeader>
                            <CardContent className="p-6">
                                {tenant.domains && tenant.domains.length > 0 ? (
                                    <div className="space-y-4">
                                        {tenant.domains.map((domain) => (
                                            <Card
                                                key={domain.id}
                                                className={`border-l-4 ${
                                                    domain.is_primary ? 'border-l-blue-500 bg-blue-50/30' : 'border-l-gray-300'
                                                }`}
                                            >
                                                <CardContent className="p-5">
                                                    <div className="mb-4 flex items-start justify-between">
                                                        <div className="flex-1">
                                                            <div className="mb-2 flex items-center gap-2">
                                                                <h4 className="text-lg font-bold">{domain.domain}</h4>
                                                                {domain.is_primary && (
                                                                    <Badge variant="default" className="text-xs">
                                                                        Primary
                                                                    </Badge>
                                                                )}
                                                                {domain.is_custom && (
                                                                    <Badge variant="secondary" className="text-xs">
                                                                        Custom
                                                                    </Badge>
                                                                )}
                                                            </div>
                                                            <p className="text-xs text-muted-foreground">
                                                                Added {new Date(domain.created_at).toLocaleDateString()}
                                                            </p>
                                                        </div>
                                                        <Badge variant={domain.status === 'active' ? 'default' : 'secondary'} className="text-xs">
                                                            {domain.status}
                                                        </Badge>
                                                    </div>

                                                    <div className="grid grid-cols-1 gap-4 border-t pt-4 md:grid-cols-3">
                                                        <div className="flex items-center gap-2">
                                                            {domain.ssl_enabled ? (
                                                                <CheckCircle2 className="h-4 w-4 text-green-600" />
                                                            ) : (
                                                                <XCircle className="h-4 w-4 text-red-600" />
                                                            )}
                                                            <div>
                                                                <p className="text-xs font-medium">SSL Certificate</p>
                                                                <p className="text-xs text-muted-foreground">
                                                                    {domain.ssl_enabled ? 'Enabled' : 'Disabled'}
                                                                </p>
                                                                {domain.ssl_expires_at && (
                                                                    <p className="text-xs text-muted-foreground">Expires: {domain.ssl_expires_at}</p>
                                                                )}
                                                            </div>
                                                        </div>

                                                        <div className="flex items-center gap-2">
                                                            {domain.dns_status === 'verified' ? (
                                                                <CheckCircle2 className="h-4 w-4 text-green-600" />
                                                            ) : (
                                                                <Clock className="h-4 w-4 text-yellow-600" />
                                                            )}
                                                            <div>
                                                                <p className="text-xs font-medium">DNS Status</p>
                                                                <p className="text-xs text-muted-foreground">{domain.dns_status || 'Pending'}</p>
                                                                {domain.dns_verified_at && (
                                                                    <p className="text-xs text-muted-foreground">
                                                                        Verified: {domain.dns_verified_at}
                                                                    </p>
                                                                )}
                                                            </div>
                                                        </div>

                                                        <div className="flex items-center gap-2">
                                                            {domain.force_https ? (
                                                                <CheckCircle2 className="h-4 w-4 text-green-600" />
                                                            ) : (
                                                                <XCircle className="h-4 w-4 text-gray-400" />
                                                            )}
                                                            <div>
                                                                <p className="text-xs font-medium">Force HTTPS</p>
                                                                <p className="text-xs text-muted-foreground">
                                                                    {domain.force_https ? 'Enabled' : 'Disabled'}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </CardContent>
                                            </Card>
                                        ))}
                                    </div>
                                ) : (
                                    <div className="py-12 text-center">
                                        <Globe className="mx-auto mb-4 h-12 w-12 text-muted-foreground" />
                                        <p className="text-sm text-muted-foreground">No domains configured</p>
                                    </div>
                                )}
                            </CardContent>
                        </Card>
                    </TabsContent>

                    {/* Contacts Tab */}
                    <TabsContent value="contacts" className="space-y-6">
                        <Card className="border-0 shadow-lg">
                            <CardHeader className="border-b">
                                <div className="flex items-center justify-between">
                                    <div className="flex items-center gap-3">
                                        <div className="rounded-lg bg-indigo-500 p-2 shadow-md">
                                            <Users className="h-5 w-5 text-white" />
                                        </div>
                                        <div>
                                            <CardTitle>Contact Persons</CardTitle>
                                            <p className="mt-0.5 text-xs text-muted-foreground">Primary contacts for this tenant</p>
                                        </div>
                                    </div>
                                    <Badge variant="outline">{tenant.contacts?.length || 0} contacts</Badge>
                                </div>
                            </CardHeader>
                            <CardContent className="p-6">
                                {tenant.contacts && tenant.contacts.length > 0 ? (
                                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                        {tenant.contacts.map((contact) => (
                                            <Card key={contact.id} className="border-l-4 border-l-indigo-400">
                                                <CardContent className="p-5">
                                                    <div className="flex items-start gap-4">
                                                        <div className="rounded-lg bg-indigo-100 p-3">
                                                            <UserCheck className="h-6 w-6 text-indigo-600" />
                                                        </div>
                                                        <div className="flex-1 space-y-3">
                                                            <h4 className="text-lg font-bold">{contact.name}</h4>
                                                            {contact.email && (
                                                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                                                    <Mail className="h-4 w-4" />
                                                                    <a
                                                                        href={`mailto:${contact.email}`}
                                                                        className="hover:text-blue-600 hover:underline"
                                                                    >
                                                                        {contact.email}
                                                                    </a>
                                                                </div>
                                                            )}
                                                            {contact.phone && (
                                                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                                                    <Phone className="h-4 w-4" />
                                                                    <a href={`tel:${contact.phone}`} className="hover:text-blue-600">
                                                                        {contact.phone}
                                                                    </a>
                                                                </div>
                                                            )}
                                                        </div>
                                                    </div>
                                                </CardContent>
                                            </Card>
                                        ))}
                                    </div>
                                ) : (
                                    <div className="py-12 text-center">
                                        <Users className="mx-auto mb-4 h-12 w-12 text-muted-foreground" />
                                        <p className="text-sm text-muted-foreground">No contact persons registered</p>
                                    </div>
                                )}
                            </CardContent>
                        </Card>
                    </TabsContent>

                    {/* Usage Tab */}
                    <TabsContent value="usage" className="space-y-6">
                        {tenant.usage_stats && (
                            <>
                                <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
                                    <StatCard title="Users" value={tenant.usage_stats.users_count} icon={Users} color="blue" />
                                    <StatCard title="Contacts" value={tenant.usage_stats.contacts_count} icon={UserCheck} color="green" />
                                    <StatCard title="Tasks" value={tenant.usage_stats.tasks_count} icon={CheckCircle2} color="purple" />
                                    <StatCard title="Events" value={tenant.usage_stats.events_count} icon={Calendar} color="orange" />
                                </div>

                                <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
                                    <StatCard title="Notes" value={tenant.usage_stats.notes_count} icon={FileText} color="cyan" />
                                    <StatCard title="Reminders" value={tenant.usage_stats.reminders_count} icon={Clock} color="indigo" />
                                    <StatCard
                                        title="Storage Used"
                                        value={`${tenant.usage_stats.storage_used_mb} MB`}
                                        icon={HardDrive}
                                        description="Database size"
                                        color="pink"
                                    />
                                </div>

                                {tenant.usage_stats.last_activity && (
                                    <Card className="border-0 shadow-lg">
                                        <CardHeader className="border-b">
                                            <CardTitle className="flex items-center gap-2">
                                                <Activity className="h-5 w-5" />
                                                Last Activity
                                            </CardTitle>
                                        </CardHeader>
                                        <CardContent className="p-6">
                                            <p className="text-sm text-muted-foreground">
                                                Last user activity:{' '}
                                                <span className="font-medium text-foreground">
                                                    {new Date(tenant.usage_stats.last_activity).toLocaleString()}
                                                </span>
                                            </p>
                                        </CardContent>
                                    </Card>
                                )}
                            </>
                        )}
                    </TabsContent>

                    {/* Billing Tab */}
                    <TabsContent value="billing" className="space-y-6">
                        {tenant.billing_info && (
                            <>
                                <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
                                    <StatCard title="Current Plan" value={tenant.billing_info.current_plan} icon={Package} color="purple" />
                                    <StatCard title="Billing Cycle" value={tenant.billing_info.billing_cycle} icon={Calendar} color="blue" />
                                    <StatCard title="Current Amount" value={`$${tenant.billing_info.total_amount}`} icon={DollarSign} color="green" />
                                    <StatCard
                                        title="Payment Status"
                                        value={tenant.billing_info.payment_status}
                                        icon={CreditCard}
                                        color={tenant.billing_info.payment_status === 'Paid' ? 'green' : 'orange'}
                                    />
                                </div>

                                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                    <Card className="border-0 shadow-lg">
                                        <CardHeader className="border-b bg-gradient-to-r from-green-50 to-emerald-50">
                                            <CardTitle className="flex items-center gap-2">
                                                <DollarSign className="h-5 w-5" />
                                                Revenue Summary
                                            </CardTitle>
                                        </CardHeader>
                                        <CardContent className="p-6">
                                            <div className="space-y-4">
                                                <div>
                                                    <p className="mb-1 text-sm text-muted-foreground">Total Revenue</p>
                                                    <p className="text-3xl font-bold text-green-600">${tenant.billing_info.total_revenue}</p>
                                                </div>
                                                <div>
                                                    <p className="mb-1 text-sm text-muted-foreground">Total Subscriptions</p>
                                                    <p className="text-xl font-semibold">{tenant.billing_info.subscriptions_count}</p>
                                                </div>
                                            </div>
                                        </CardContent>
                                    </Card>

                                    {tenant.billing_info.next_billing_date && (
                                        <Card className="border-0 shadow-lg">
                                            <CardHeader className="border-b bg-gradient-to-r from-blue-50 to-indigo-50">
                                                <CardTitle className="flex items-center gap-2">
                                                    <Calendar className="h-5 w-5" />
                                                    Next Billing
                                                </CardTitle>
                                            </CardHeader>
                                            <CardContent className="p-6">
                                                <div className="space-y-4">
                                                    <div>
                                                        <p className="mb-1 text-sm text-muted-foreground">Next Billing Date</p>
                                                        <p className="text-xl font-semibold">
                                                            {new Date(tenant.billing_info.next_billing_date).toLocaleDateString()}
                                                        </p>
                                                    </div>
                                                    <div>
                                                        <p className="mb-1 text-sm text-muted-foreground">Amount Due</p>
                                                        <p className="text-xl font-semibold">${tenant.billing_info.total_amount}</p>
                                                    </div>
                                                </div>
                                            </CardContent>
                                        </Card>
                                    )}
                                </div>

                                {/* Subscription History */}
                                {tenant.subscriptions && tenant.subscriptions.length > 0 && (
                                    <Card className="border-0 shadow-lg">
                                        <CardHeader className="border-b">
                                            <CardTitle className="flex items-center gap-2">
                                                <Clock className="h-5 w-5" />
                                                Subscription History
                                            </CardTitle>
                                        </CardHeader>
                                        <CardContent className="p-6">
                                            <div className="space-y-3">
                                                {tenant.subscriptions.map((sub) => (
                                                    <Card key={sub.id} className="border-l-4 border-l-blue-400">
                                                        <CardContent className="p-4">
                                                            <div className="flex items-center justify-between">
                                                                <div className="flex-1">
                                                                    <h5 className="mb-1 font-semibold">
                                                                        {sub.package_name || sub.subscription_name}
                                                                    </h5>
                                                                    <div className="flex items-center gap-4 text-xs text-muted-foreground">
                                                                        <span>{sub.started_at}</span>
                                                                        <span>→</span>
                                                                        <span>{sub.expires_at}</span>
                                                                        <span>•</span>
                                                                        <span>{sub.user_count} users</span>
                                                                    </div>
                                                                </div>
                                                                <div className="text-right">
                                                                    <p className="text-lg font-bold">${sub.total_price}</p>
                                                                    <Badge variant={sub.status === 1 ? 'default' : 'secondary'} className="text-xs">
                                                                        {sub.status === 1 ? 'Active' : 'Inactive'}
                                                                    </Badge>
                                                                </div>
                                                            </div>
                                                        </CardContent>
                                                    </Card>
                                                ))}
                                            </div>
                                        </CardContent>
                                    </Card>
                                )}
                            </>
                        )}
                    </TabsContent>

                    {/* Activity Tab */}
                    <TabsContent value="activity" className="space-y-6">
                        <Card className="border-0 shadow-lg">
                            <CardHeader className="border-b">
                                <div className="flex items-center gap-3">
                                    <div className="rounded-lg bg-blue-500 p-2 shadow-md">
                                        <Activity className="h-5 w-5 text-white" />
                                    </div>
                                    <div>
                                        <CardTitle>Activity Timeline</CardTitle>
                                        <p className="mt-0.5 text-xs text-muted-foreground">Tenant activity and audit log</p>
                                    </div>
                                </div>
                            </CardHeader>
                            <CardContent className="p-6">
                                <div className="space-y-4">
                                    <div className="flex items-start gap-4 rounded border-l-4 border-l-blue-500 bg-blue-50/50 p-4">
                                        <Calendar className="mt-1 h-5 w-5 text-blue-600" />
                                        <div className="flex-1">
                                            <p className="font-medium">Tenant Created</p>
                                            <p className="text-sm text-muted-foreground">{new Date(tenant.created_at).toLocaleString()}</p>
                                        </div>
                                    </div>

                                    <div className="flex items-start gap-4 rounded border-l-4 border-l-green-500 bg-green-50/50 p-4">
                                        <Clock className="mt-1 h-5 w-5 text-green-600" />
                                        <div className="flex-1">
                                            <p className="font-medium">Last Updated</p>
                                            <p className="text-sm text-muted-foreground">{new Date(tenant.updated_at).toLocaleString()}</p>
                                        </div>
                                    </div>

                                    {tenant.usage_stats?.last_activity && (
                                        <div className="flex items-start gap-4 rounded border-l-4 border-l-purple-500 bg-purple-50/50 p-4">
                                            <Activity className="mt-1 h-5 w-5 text-purple-600" />
                                            <div className="flex-1">
                                                <p className="font-medium">Last User Activity</p>
                                                <p className="text-sm text-muted-foreground">
                                                    {new Date(tenant.usage_stats.last_activity).toLocaleString()}
                                                </p>
                                            </div>
                                        </div>
                                    )}

                                    {tenant.deleted_at && (
                                        <div className="flex items-start gap-4 rounded border-l-4 border-l-red-500 bg-red-50/50 p-4">
                                            <XCircle className="mt-1 h-5 w-5 text-red-600" />
                                            <div className="flex-1">
                                                <p className="font-medium">Tenant Deleted</p>
                                                <p className="text-sm text-muted-foreground">{new Date(tenant.deleted_at).toLocaleString()}</p>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </CardContent>
                        </Card>
                    </TabsContent>
                </Tabs>
            </div>
        </>
    );
}

TenantShow.layout = (page: ReactNode) => (
    <AdminLayout
        breadcrumbs={[
            { title: 'Tenants', href: route('admin.tenants.index') },
            { title: 'Tenant Details', href: '#' },
        ]}
    >
        {page}
    </AdminLayout>
);