slp-modular-cms/frontend/src/components/cms/CmsInstanceList.tsx

import { useTranslation } from 'react-i18next';
import { MoreHorizontal, CheckCircle, XCircle, MinusCircle } from 'lucide-react';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import type { CmsInstance, CmsInstanceStatus } from '@/api/types';

const STATUS_BADGE_CONFIG: Record<
    CmsInstanceStatus,
    { colorClass: string; Icon: React.ComponentType<{ className?: string }> }
> = {
    Available: {
        colorClass: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
        Icon: CheckCircle,
    },
    NotAvailable: {
        colorClass: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
        Icon: XCircle,
    },
    Inactive: {
        colorClass: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
        Icon: MinusCircle,
    },
};

function formatDate(iso: string | null): string {
    if (!iso) return '—';
    return new Date(iso).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
}

interface CmsInstanceListProps {
    instances: CmsInstance[];
    onSetStatus: (instance: CmsInstance) => void;
}

export function CmsInstanceList({ instances, onSetStatus }: CmsInstanceListProps) {
    const { t } = useTranslation();

    return (
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead>{t('cms.table.name')}</TableHead>
                    <TableHead>{t('cms.table.url')}</TableHead>
                    <TableHead>{t('cms.table.status')}</TableHead>
                    <TableHead>{t('cms.table.lastContact')}</TableHead>
                    <TableHead>{t('cms.table.disableMessage')}</TableHead>
                    <TableHead>{t('cms.table.actions')}</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                {instances.map((instance) => {
                    const { colorClass, Icon } = STATUS_BADGE_CONFIG[instance.status];
                    return (
                    <TableRow
                        key={instance.id}
                        data-testid="cms-instance-row"
                        className={instance.status === 'Inactive' ? 'opacity-50' : ''}
                    >
                        <TableCell>{instance.name}</TableCell>
                        <TableCell>{instance.url}</TableCell>
                        <TableCell>
                            <div
                                data-testid="cms-instance-status-badge"
                                className={`inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-medium ${colorClass}`}
                            >
                                <Icon className="size-4" />
                                <span>{t(`cms.status.${instance.status}`)}</span>
                            </div>
                        </TableCell>
                        <TableCell>{formatDate(instance.lastContactedAt)}</TableCell>
                        <TableCell>{instance.disableMessage ?? '—'}</TableCell>
                        <TableCell>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        data-testid="cms-instance-actions-trigger"
                                    >
                                        <MoreHorizontal className="size-4" />
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                    <DropdownMenuItem
                                        data-testid="cms-instance-set-status"
                                        onClick={() => onSetStatus(instance)}
                                    >
                                        {t('cms.actions.setStatus')}
                                    </DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </TableCell>
                    </TableRow>
                    );
                })}
            </TableBody>
        </Table>
    );
}