import { Badge } from '@admin/components/ui/badge';
import { Button } from '@admin/components/ui/button';
import { Card, CardContent } from '@admin/components/ui/card';
import AdminLayout from '@admin/layouts/admin/admin-layout';
import { tenantSubscriptionTableColumns, type TenantSubscription } from '@admin/components/tableColumns/tenantSubscriptionTableColumns';
import { Head, router } from '@inertiajs/react';
import { cn } from '@admin/lib/utils';
import { DataTable } from '@admin/components/datatable';
import {
    Activity,
    ArrowLeft,
    Briefcase,
    Building2,
    Calendar,
    CheckCircle2,
    Clock,
    Database,
    DollarSign,
    Edit,
    FileText,
    RefreshCw,
    Globe,
    HardDrive,
    Mail,
    MapPin,
    Package,
    Phone,
    Settings,
    TrendingUp,
    UserCheck,
    Users,
    XCircle,
} from 'lucide-react';
import { ReactNode, useMemo, useState } from 'react';

// Global route function declaration (from Ziggy)
declare global {
    const route: (name: string, parameters?: any, absolute?: boolean) => string;
}

// 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;
    role?: string;
    is_primary: boolean;
}

interface PackageInfo {
    id: number;
    name: string;
    features_count: number;
}

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

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

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

interface Metadata {
    notes?: 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;
    database_size?: string;
    last_activity?: string;
}

interface BillingInfo {
    total_amount?: string;
    current_month_revenue?: string;
    billing_cycle?: string;
}

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

interface TenantShowProps {
    tenant: Tenant;
}

// Helper Components
function StatCard({ title, value, icon: Icon }: { title: string; value: string | number; icon: any }) {
    return (
        <Card className="border shadow-sm transition-shadow hover:shadow-md">
            <CardContent className="p-6">
                <div className="flex items-center justify-between">
                    <div>
                        <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide">{title}</p>
                        <p className="mt-2 text-2xl font-bold text-gray-900">{value}</p>
                    </div>
                    <div className="rounded-lg p-2.5 bg-gray-100">
                        <Icon className="h-5 w-5 text-gray-600" />
                    </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-1.5">
            <label className="flex items-center gap-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wide">
                {Icon && <Icon className="h-3.5 w-3.5" />}
                {label}
            </label>
            <p className="text-sm font-medium text-gray-900">{typeof value === 'boolean' ? (value ? 'Yes' : 'No') : value}</p>
        </div>
    );
}

function StatusBadge({ status }: { status: StatusInfo }) {
    const badgeStyles: Record<string, string> = {
        success: 'bg-emerald-100 text-emerald-700 hover:bg-emerald-100 border border-emerald-300',
        secondary: 'bg-gray-200 text-gray-600 hover:bg-gray-200 border border-gray-300',
        warning: 'bg-amber-100 text-amber-700 hover:bg-amber-100 border border-amber-300',
        destructive: 'bg-red-100 text-red-700 hover:bg-red-100 border border-red-300',
    };

    return (
        <Badge className={cn("font-semibold text-xs px-2.5 py-1", badgeStyles[status.color] || badgeStyles.secondary)}>
            {status.label}
        </Badge>
    );
}

function SectionTitle({ icon: Icon, title, subtitle }: { icon: any; title: string; subtitle?: string }) {
    return (
        <div className="mb-5 flex items-center gap-3">
            <div className="p-2 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-sm">
                <Icon className="h-4 w-4 text-white" />
            </div>
            <div>
                <h3 className="text-base font-bold text-gray-900">{title}</h3>
                {subtitle && <p className="text-xs font-medium text-gray-500">{subtitle}</p>}
            </div>
        </div>
    );
}

// Main Component
export default function TenantShow({ tenant }: TenantShowProps) {
    // Pagination state for subscription history
    const [currentPage, setCurrentPage] = useState(1);
    const itemsPerPage = 5;

    // Paginated subscription data
    const paginatedSubscriptions = useMemo(() => {
        if (!tenant.subscriptions || tenant.subscriptions.length === 0) {
            return {
                data: [],
                meta: {
                    current_page: 1,
                    last_page: 1,
                    per_page: itemsPerPage,
                    total: 0,
                    from: 0,
                    to: 0,
                },
                links: { prev: null, next: null },
            };
        }

        const totalItems = tenant.subscriptions.length;
        const totalPages = Math.ceil(totalItems / itemsPerPage);
        const startIndex = (currentPage - 1) * itemsPerPage;
        const endIndex = Math.min(startIndex + itemsPerPage, totalItems);
        const currentData = tenant.subscriptions.slice(startIndex, endIndex);

        return {
            data: currentData,
            meta: {
                current_page: currentPage,
                last_page: totalPages,
                per_page: itemsPerPage,
                total: totalItems,
                from: startIndex + 1,
                to: endIndex,
            },
            links: {
                prev: currentPage > 1 ? '' : null,
                next: currentPage < totalPages ? '' : null,
            },
        };
    }, [tenant.subscriptions, currentPage, itemsPerPage]);

    const handleSubscriptionNavigation = (params: any) => {
        if (params.page) {
            setCurrentPage(params.page);
        }
    };
    const handleEdit = () => {
        router.visit(route('admin.tenants.edit', tenant.id));
    };

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

    const handleReprovision = () => {
        if (!confirm('Re-provision this tenant? This will create the database and run full setup if not already done.')) return;
        router.post(route('admin.tenants.reprovision', tenant.id), {}, {
            onSuccess: () => {},
        });
    };

    const needsProvisioning = tenant.status_info.value !== 1 || !tenant.database_name;

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

            <div className="space-y-6 p-6">
                {/* Header Card */}
                <Card className="border shadow-sm bg-white">
                    <CardContent className="p-6">
                        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                            <div className="flex-1">
                                <div className="mb-1 flex flex-wrap items-center gap-3">
                                    <h2 className="text-2xl font-bold text-gray-900">{tenant.company_name}</h2>
                                    <StatusBadge status={tenant.status_info} />
                                    {tenant.deleted_at && (
                                        <Badge className="font-semibold text-xs px-2.5 py-1 bg-red-100 text-red-700 hover:bg-red-100 border border-red-300">
                                            Deleted
                                        </Badge>
                                    )}
                                </div>
                                <div className="flex flex-wrap items-center gap-4 text-sm font-medium text-gray-600">
                                    <span className="flex items-center gap-1">
                                        <Mail className="h-4 w-4 text-gray-500" />
                                        {tenant.email}
                                    </span>
                                    <span className="text-gray-400">|</span>
                                    <span className="flex items-center gap-1">
                                        <Database className="h-4 w-4 text-gray-500" />
                                        {tenant.database_name || tenant.slug}
                                    </span>
                                    {tenant.primary_domain && (
                                        <>
                                            <span className="text-gray-400">|</span>
                                            <span className="flex items-center gap-1">
                                                <Globe className="h-4 w-4 text-blue-600" />
                                                <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 className="flex items-center gap-3">
                                {needsProvisioning && (
                                    <Button variant="outline" size="sm" onClick={handleReprovision} className="border-amber-400 text-amber-700 hover:bg-amber-50">
                                        <RefreshCw className="h-4 w-4 mr-2" />
                                        Re-provision
                                    </Button>
                                )}
                                <Button variant="outline" size="sm" onClick={handleEdit}>
                                    <Edit className="h-4 w-4 mr-2" />
                                    Edit Tenant
                                </Button>
                                <Button variant="outline" size="sm" onClick={handleBackToList}>
                                    <ArrowLeft className="h-4 w-4 mr-2" />
                                    Back to List
                                </Button>
                            </div>
                        </div>
                    </CardContent>
                </Card>

                {/* Stats Cards */}
                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
                    <StatCard title="Total Users" value={tenant.usage_stats?.users_count || 0} icon={Users} />
                    <StatCard title="Contacts" value={tenant.usage_stats?.contacts_count || 0} icon={UserCheck} />
                    <StatCard title="Tasks" value={tenant.usage_stats?.tasks_count || 0} icon={CheckCircle2} />
                    <StatCard title="Events" value={tenant.usage_stats?.events_count || 0} icon={Calendar} />
                </div>

                {/* Two Column Layout */}
                <div className="grid grid-cols-1 gap-3 lg:grid-cols-3">
                    {/* Left Column - Main Info */}
                    <div className="space-y-3 lg:col-span-2">
                        {/* Company Information */}
                        <Card className="border shadow-sm bg-white">
                            <CardContent className="p-4">
                                <SectionTitle icon={Building2} title="Company Information" />
                                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                                    <InfoField label="Company Name" value={tenant.company_name} icon={Building2} />
                                    <InfoField label="Email" value={tenant.email} icon={Mail} />
                                    <InfoField label="Phone" value={tenant.phone} icon={Phone} />
                                    <InfoField label="Database" value={tenant.database_name || tenant.database} icon={Database} />
                                </div>

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

                                {tenant.business_information && (
                                    <div className="mt-3 border-t pt-3">
                                        <h4 className="mb-2 flex items-center gap-1.5 text-xs font-semibold text-muted-foreground uppercase">
                                            <Briefcase className="h-3 w-3" />
                                            Business Details
                                        </h4>
                                        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                                            <InfoField label="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" value={tenant.business_information.registration_number} />
                                        </div>
                                    </div>
                                )}
                            </CardContent>
                        </Card>

                        {/* Admin Info */}
                        {tenant.tenant_admin_info && (
                            <Card className="border shadow-sm bg-white">
                                <CardContent className="p-4">
                                    <SectionTitle icon={UserCheck} title="Admin Information" subtitle="Tenant administrator details" />
                                    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                                        <InfoField label="Name" value={tenant.tenant_admin_info.name} icon={UserCheck} />
                                        <InfoField label="Email" value={tenant.tenant_admin_info.email} icon={Mail} />
                                        <InfoField label="Phone" value={tenant.tenant_admin_info.phone} icon={Phone} />
                                    </div>
                                </CardContent>
                            </Card>
                        )}

                        {/* Domains */}
                        {tenant.domains && tenant.domains.length > 0 && (
                            <Card className="border shadow-sm bg-white">
                                <CardContent className="p-4">
                                    <SectionTitle
                                        icon={Globe}
                                        title="Domains"
                                        subtitle={`${tenant.domains.length} domain${tenant.domains.length > 1 ? 's' : ''} configured`}
                                    />
                                    <div className="space-y-2">
                                        {tenant.domains.map((domain) => (
                                            <div key={domain.id} className="flex items-start justify-between p-2 rounded-lg border bg-gray-50/50">
                                                <div className="flex-1">
                                                    <div className="mb-1 flex items-center gap-2">
                                                        <span className="text-sm font-semibold text-gray-900">{domain.domain}</span>
                                                        {domain.is_primary && (
                                                            <Badge className="h-4 text-[10px] bg-blue-100 text-blue-700 hover:bg-blue-100 border border-blue-200">
                                                                Primary
                                                            </Badge>
                                                        )}
                                                        {domain.is_custom && (
                                                            <Badge className="h-4 text-[10px] bg-purple-100 text-purple-700 hover:bg-purple-100 border border-purple-200">
                                                                Custom
                                                            </Badge>
                                                        )}
                                                    </div>
                                                    <div className="flex items-center gap-3 text-xs text-gray-600">
                                                        {domain.ssl_enabled ? (
                                                            <span className="flex items-center gap-1 text-emerald-600 font-medium">
                                                                <CheckCircle2 className="h-3.5 w-3.5" />
                                                                SSL
                                                            </span>
                                                        ) : (
                                                            <span className="flex items-center gap-1 text-red-600 font-medium">
                                                                <XCircle className="h-3.5 w-3.5" />
                                                                No SSL
                                                            </span>
                                                        )}
                                                        {domain.dns_status && (
                                                            <span className="text-gray-600">DNS: {domain.dns_status}</span>
                                                        )}
                                                    </div>
                                                </div>
                                                <Badge className={cn(
                                                    "text-xs font-semibold",
                                                    domain.status === 'active' 
                                                        ? "bg-emerald-100 text-emerald-700 border border-emerald-200" 
                                                        : "bg-gray-200 text-gray-600 border border-gray-300"
                                                )}>
                                                    {domain.status}
                                                </Badge>
                                            </div>
                                        ))}
                                    </div>
                                </CardContent>
                            </Card>
                        )}

                        {/* Subscription History */}
                        {tenant.subscriptions && tenant.subscriptions.length > 0 && (
                            <Card className="border shadow-sm bg-white">
                                <CardContent className="p-4">
                                    <SectionTitle
                                        icon={Clock}
                                        title="Subscription History"
                                        subtitle={`${tenant.subscriptions.length} subscription${tenant.subscriptions.length > 1 ? 's' : ''}`}
                                    />
                                    <div className="overflow-x-auto">
                                        <DataTable
                                            columns={tenantSubscriptionTableColumns()}
                                            data={paginatedSubscriptions.data as TenantSubscription[]}
                                            paginatedData={paginatedSubscriptions}
                                            bulkActions={[]}
                                            tableKey="tenant-subscription-history"
                                            enableRowClick={false}
                                            fullHeight={false}
                                            onNavigate={handleSubscriptionNavigation}
                                        />
                                    </div>
                                </CardContent>
                            </Card>
                        )}

                        {/* Contacts */}
                        {tenant.contacts && tenant.contacts.length > 0 && (
                            <Card className="border shadow-sm bg-white">
                                <CardContent className="p-4">
                                    <SectionTitle
                                        icon={Users}
                                        title="Contacts"
                                        subtitle={`${tenant.contacts.length} contact${tenant.contacts.length > 1 ? 's' : ''}`}
                                    />
                                    <div className="space-y-2">
                                        {tenant.contacts.map((contact) => (
                                            <div key={contact.id} className="flex items-start justify-between p-2 rounded-lg border bg-gray-50/50">
                                                <div className="flex-1">
                                                    <div className="mb-1 flex items-center gap-2">
                                                        <span className="text-sm font-semibold text-gray-900">{contact.name}</span>
                                                        {contact.is_primary && (
                                                            <Badge className="h-4 text-[10px] bg-blue-100 text-blue-700 hover:bg-blue-100 border border-blue-200">
                                                                Primary
                                                            </Badge>
                                                        )}
                                                    </div>
                                                    <div className="flex flex-wrap items-center gap-2 text-xs text-gray-600">
                                                        <span className="flex items-center gap-1">
                                                            <Mail className="h-3.5 w-3.5" />
                                                            {contact.email}
                                                        </span>
                                                        {contact.phone && (
                                                            <span className="flex items-center gap-1">
                                                                <Phone className="h-3.5 w-3.5" />
                                                                {contact.phone}
                                                            </span>
                                                        )}
                                                    </div>
                                                </div>
                                                {contact.role && (
                                                    <Badge className="text-xs border-gray-300 bg-gray-50 text-gray-700 font-medium">
                                                        {contact.role}
                                                    </Badge>
                                                )}
                                            </div>
                                        ))}
                                    </div>
                                </CardContent>
                            </Card>
                        )}
                    </div>

                    {/* Right Column - Subscription, Usage, Billing */}
                    <div className="space-y-3">
                        {/* Current Subscription */}
                        {tenant.subscription && (
                            <Card className="border shadow-sm bg-white">
                                <CardContent className="p-3">
                                    <SectionTitle icon={Package} title="Current Subscription" />
                                    <div className="space-y-2">
                                        {/* Compact horizontal layout */}
                                        <div className="flex items-center justify-between">
                                            <div className="flex items-center gap-3">
                                                {tenant.subscription.package && (
                                                    <div className="text-sm">
                                                        <span className="font-semibold text-gray-900">{tenant.subscription.package.name}</span>
                                                        <span className="text-gray-500 ml-2">•</span>
                                                        <span className="text-green-600 font-medium">${tenant.subscription.total_price}/mo</span>
                                                    </div>
                                                )}
                                                <div className="text-xs text-gray-500">
                                                    {tenant.subscription.user_count} users
                                                </div>
                                            </div>
                                            <div className="flex items-center gap-3 text-xs">
                                                <div className="text-gray-600">
                                                    <span className="font-medium">Started:</span>
                                                    <span className="ml-1">{new Date(tenant.subscription.started_at).toLocaleDateString()}</span>
                                                </div>
                                                <div className="text-gray-600">
                                                    <span className="font-medium">Expires:</span>
                                                    <span className={`ml-1 ${Math.ceil((new Date(tenant.subscription.expires_at).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)) <= 30 ? 'text-red-600 font-medium' : ''}`}>
                                                        {new Date(tenant.subscription.expires_at).toLocaleDateString()}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        {/* Status and features in one line */}
                                        <div className="flex items-center justify-between">
                                            <div className="flex items-center gap-2">
                                                <Badge className={cn(
                                                    "text-xs font-semibold",
                                                    tenant.subscription.status === 1
                                                        ? "bg-emerald-100 text-emerald-700 border border-emerald-200"
                                                        : "bg-gray-100 text-gray-600 border border-gray-200"
                                                )}>
                                                    {tenant.subscription.status === 1 ? 'Active' : 'Inactive'}
                                                </Badge>
                                                {tenant.subscription.package && (
                                                    <span className="text-xs text-gray-500">
                                                        {tenant.subscription.package.features_count} features
                                                    </span>
                                                )}
                                            </div>
                                            <div className="text-xs text-gray-500">
                                                {Math.max(0, Math.ceil((new Date(tenant.subscription.expires_at).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)))} days remaining
                                            </div>
                                        </div>
                                    </div>
                                </CardContent>
                            </Card>
                        )}

                        {/* Settings */}
                        {tenant.settings && (
                            <Card className="border shadow-sm bg-white">
                                <CardContent className="p-4">
                                    <SectionTitle icon={Settings} title="Settings" />
                                    <div className="space-y-2">
                                        <InfoField label="Timezone" value={tenant.settings.timezone} />
                                        <InfoField label="Language" value={tenant.settings.language} />
                                        <InfoField label="Currency" value={tenant.settings.currency} />
                                    </div>
                                </CardContent>
                            </Card>
                        )}

                        {/* Usage Stats */}
                        {tenant.usage_stats && (
                            <Card className="border shadow-sm bg-white">
                                <CardContent className="p-4">
                                    <SectionTitle icon={HardDrive} title="Usage Statistics" />
                                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
                                        <InfoField label="Users" value={tenant.usage_stats.users_count} icon={Users} />
                                        <InfoField label="Storage Used" value={`${tenant.usage_stats.storage_used_mb} MB`} icon={HardDrive} />
                                        <InfoField label="Database Size" value={tenant.usage_stats.database_size} icon={Database} />

                                        <InfoField
                                            label="Last Activity"
                                            value={tenant.usage_stats.last_activity ? new Date(tenant.usage_stats.last_activity).toLocaleDateString() : 'Never'}
                                            icon={Activity}
                                        />
                                    </div>
                                </CardContent>
                            </Card>
                        )}

                        {/* Billing Info */}
                        {tenant.billing_info && (
                            <Card className="border shadow-sm bg-white">
                                <CardContent className="p-4">
                                    <SectionTitle icon={DollarSign} title="Billing Information" subtitle="Revenue and payment details" />
                                    <div className="space-y-3">
                                        <InfoField label="Total Revenue" value={tenant.billing_info.total_amount ? `$${tenant.billing_info.total_amount}` : '$0.00'} icon={DollarSign} />
                                        <InfoField label="This Month" value={tenant.billing_info.current_month_revenue ? `$${tenant.billing_info.current_month_revenue}` : '$0.00'} />
                                        <InfoField label="Billing Cycle" value={tenant.billing_info.billing_cycle || 'N/A'} />
                                    </div>
                                </CardContent>
                            </Card>
                        )}

                        {/* Notes */}
                        {tenant.metadata?.notes && (
                            <Card className="border shadow-sm bg-white">
                                <CardContent className="p-4">
                                    <SectionTitle icon={FileText} title="Notes" />
                                    <p className="text-sm whitespace-pre-wrap text-gray-700 leading-relaxed">{tenant.metadata.notes}</p>
                                </CardContent>
                            </Card>
                        )}

                        {/* Activity Timeline */}
                        <Card className="border shadow-sm bg-white">
                            <CardContent className="p-4">
                                <SectionTitle icon={Activity} title="Activity Timeline" />
                                <div className="space-y-2">
                                    <div className="flex items-start gap-2 rounded-lg border-l-2 border-l-blue-500 bg-blue-50/50 p-2">
                                        <Calendar className="mt-0.5 h-3 w-3 text-blue-600" />
                                        <div className="flex-1">
                                            <p className="text-xs font-semibold text-gray-900">Created</p>
                                            <p className="text-xs text-gray-600">{new Date(tenant.created_at).toLocaleString()}</p>
                                        </div>
                                    </div>
                                    <div className="flex items-start gap-2 rounded-lg border-l-2 border-l-emerald-500 bg-emerald-50/50 p-2">
                                        <Clock className="mt-0.5 h-3 w-3 text-emerald-600" />
                                        <div className="flex-1">
                                            <p className="text-xs font-semibold text-gray-900">Updated</p>
                                            <p className="text-xs text-gray-600">{new Date(tenant.updated_at).toLocaleString()}</p>
                                        </div>
                                    </div>
                                    {tenant.deleted_at && (
                                        <div className="flex items-start gap-2 rounded-lg border-l-2 border-l-red-500 bg-red-50/50 p-2">
                                            <XCircle className="mt-0.5 h-3 w-3 text-red-600" />
                                            <div className="flex-1">
                                                <p className="text-xs font-semibold text-gray-900">Deleted</p>
                                                <p className="text-xs text-gray-600">{new Date(tenant.deleted_at).toLocaleString()}</p>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </CardContent>
                        </Card>
                    </div>
                </div>
            </div>
        </>
    );
}

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