import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Icon } from '@/components/ui/icon';
import { Switch } from '@/components/ui/switch';
import type { MailboxAccountListItem } from '@/features/mailboxes/types';
import { useI18n } from '@/hooks/use-i18n';
import { formatDateTimeRo } from '@/lib/datetime';
import { cn } from '@/lib/utils';

type MailboxAccountRowProps = {
    account: MailboxAccountListItem;
    onEdit: (account: MailboxAccountListItem) => void;
    onToggleActive: (account: MailboxAccountListItem, active: boolean) => void;
    onTestConnection: (account: MailboxAccountListItem) => void;
    onSync: (account: MailboxAccountListItem) => void;
    onDelete: (account: MailboxAccountListItem) => void;
};

export function MailboxAccountRow({
    account,
    onEdit,
    onToggleActive,
    onTestConnection,
    onSync,
    onDelete,
}: MailboxAccountRowProps) {
    const { t } = useI18n();

    return (
        <div
            className={cn(
                'group flex flex-col gap-3 px-4 py-4 transition-colors sm:flex-row sm:items-center sm:justify-between',
                !account.active && 'bg-muted/20',
            )}
        >
            <div className="flex min-w-0 flex-1 items-start gap-3">
                <div
                    className={cn(
                        'flex size-10 shrink-0 items-center justify-center rounded-lg',
                        account.active ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground',
                    )}
                >
                    <Icon icon="solar:letter-bold-duotone" className="size-5" />
                </div>
                <div className="min-w-0 flex-1 space-y-1">
                    <div className="flex flex-wrap items-center gap-2">
                        <button
                            type="button"
                            onClick={() => onEdit(account)}
                            className="truncate text-left text-sm font-medium text-foreground hover:text-primary"
                        >
                            {account.name}
                        </button>
                        {!account.active ? (
                            <Badge variant="secondary" className="text-[10px] font-normal">
                                {t('settings.mailboxes.workspace.inactive')}
                            </Badge>
                        ) : null}
                    </div>
                    <p className="truncate text-sm text-muted-foreground">{account.email}</p>
                    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
                        {account.client_name ? (
                            <span className="inline-flex items-center gap-1">
                                <Icon icon="solar:buildings-2-bold-duotone" className="size-3.5" />
                                {account.client_name}
                            </span>
                        ) : null}
                        <span>
                            {account.last_synced_at
                                ? t('settings.mailboxes.workspace.last_sync', {
                                      date: formatDateTimeRo(account.last_synced_at),
                                  })
                                : t('settings.mailboxes.workspace.never_synced')}
                        </span>
                    </div>
                </div>
            </div>

            <div className="flex shrink-0 items-center justify-end gap-2 sm:pl-4">
                <div className="flex items-center gap-2 rounded-md border bg-background px-2.5 py-1.5">
                    <span className="text-xs text-muted-foreground">{t('settings.mailboxes.table.column_active')}</span>
                    <Switch
                        checked={account.active}
                        onCheckedChange={(checked) => onToggleActive(account, checked)}
                        aria-label={t('settings.mailboxes.table.column_active')}
                    />
                </div>

                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button type="button" variant="ghost" size="icon" className="size-8">
                            <Icon icon="solar:menu-dots-bold-duotone" className="size-4" />
                            <span className="sr-only">{t('settings.mailboxes.workspace.account_menu')}</span>
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="w-48">
                        <DropdownMenuItem onClick={() => onEdit(account)}>
                            <Icon icon="solar:pen-bold-duotone" className="mr-2 size-4" />
                            {t('settings.mailboxes.workspace.edit_account')}
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => onTestConnection(account)}>
                            <Icon icon="solar:test-tube-minimalistic-bold-duotone" className="mr-2 size-4" />
                            {t('settings.mailboxes.row_actions.test_tooltip')}
                        </DropdownMenuItem>
                        <DropdownMenuItem disabled={!account.active} onClick={() => onSync(account)}>
                            <Icon icon="solar:refresh-square-bold-duotone" className="mr-2 size-4" />
                            {t('settings.mailboxes.row_actions.sync_tooltip')}
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem variant="destructive" onClick={() => onDelete(account)}>
                            <Icon icon="solar:trash-bin-trash-bold-duotone" className="mr-2 size-4" />
                            {t('settings.mailboxes.workspace.delete_account')}
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>
        </div>
    );
}