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 { Head, router } from '@inertiajs/react'; import { ArrowLeft, Building2, CheckCircle2, Eye, EyeOff, Palette, Save } from 'lucide-react'; import { ReactNode, useState } from 'react'; import { toast } from 'sonner'; declare const route: (...args: any[]) => string; interface Theme { id: number; name: string; slug: string; description?: string; preview_image?: string; is_assigned: boolean; is_active: boolean; is_available: boolean; } interface ThemeCategory { category: { id: number; name: string; slug: string; }; themes: Theme[]; } interface Tenant { id: number; uid: string; company_name: string; slug: string; email: string; active_theme: { id: number; name: string; } | null; } interface ThemeManagementShowProps { tenant: Tenant; themeCategories: ThemeCategory[]; } export default function ThemeManagementShow({ tenant, themeCategories }: ThemeManagementShowProps) { const [loading, setLoading] = useState(false); // Track availability state: { [themeId]: is_available } const [availability, setAvailability] = useState>(() => { const map: Record = {}; themeCategories.forEach(({ themes }) => { themes.forEach((theme) => { map[theme.id] = theme.is_available; }); }); return map; }); const toggleAvailability = (themeId: number, isActive: boolean) => { if (isActive && availability[themeId]) { toast.error('Cannot hide the currently active theme from the tenant'); return; } setAvailability((prev) => ({ ...prev, [themeId]: !prev[themeId] })); }; const hasChanges = () => { return themeCategories.some(({ themes }) => themes.some((theme) => theme.is_available !== availability[theme.id]), ); }; const saveThemeAvailability = () => { if (!confirm(`Update theme visibility for ${tenant.company_name}?\n\nAvailable themes will appear in the tenant's theme selector.`)) { return; } setLoading(true); const themes = Object.entries(availability).map(([id, isAvailable]) => ({ id: parseInt(id), is_available: isAvailable, })); router.post( route('admin.themes.sync', tenant.id), { themes }, { preserveScroll: true, onSuccess: () => { toast.success('Theme visibility updated successfully'); router.reload({ only: ['tenant', 'themeCategories'] }); }, onError: () => { toast.error('Failed to update theme visibility'); }, onFinish: () => { setLoading(false); }, }, ); }; const getThemePreviewImage = (theme: Theme) => { if (theme.preview_image) { return theme.preview_image; } const colors = ['6366f1', '22c55e', '3b82f6', '059669', 'f59e0b', '8b5cf6']; const colorIndex = theme.id % colors.length; return `https://placehold.co/400x300/${colors[colorIndex]}/ffffff?text=${encodeURIComponent(theme.name)}`; }; return ( <>

{/* Header */}

{tenant.company_name}

{tenant.email}

{tenant.active_theme && (

Active Theme

{tenant.active_theme.name}

)}

{/* Summary */}

{Object.values(availability).filter(Boolean).length} theme(s) visible to tenant {hasChanges() && Unsaved changes}

{/* Theme Categories */}

{themeCategories.map(({ category, themes }) => { const availableInCategory = themes.filter((t) => availability[t.id]).length; return (

{/* Category Header */}

{category.name}

{availableInCategory}/{themes.length} visible

{/* Themes Grid */}

{themes.map((theme) => { const isAvailable = availability[theme.id] ?? false; return ( toggleAvailability(theme.id, theme.is_active)} >

{theme.name}

{/* Visibility indicator */}

{isAvailable ? ( ) : ( )}

{/* Active badge */} {theme.is_active && (

Active

)}

{theme.name}

{theme.description && (

{theme.description}

)}

{isAvailable ? 'Visible in tenant selector' : 'Hidden from tenant'}

); })}

); })}

{/* Empty State */} {themeCategories.length === 0 && (

No themes available

There are no themes configured in the system yet.

)}

); } ThemeManagementShow.layout = (page: ReactNode) => ( {page} );