import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SiteApi } from '#/api';

import { Avatar, Space, Tooltip } from 'ant-design-vue';
import { Icon } from '@vben/icons';
import { $t } from '#/locales';

export function useFormSchema(): VbenFormSchema[] {
  return [
    {
      component: 'Input',
      fieldName: 'group_name',
      label: $t('site.group.groupName'),
      rules: 'required|max:20',
      componentProps: {
        placeholder: $t('site.group.groupNamePlaceholder'),
      },
    },
    {
      component: 'Textarea',
      fieldName: 'group_desc',
      label: $t('site.group.groupDesc'),
      rules: 'max:100',
      componentProps: {
        placeholder: $t('site.group.groupDescPlaceholder'),
        rows: 3,
      },
    },
    {
      component: 'CheckboxGroup',
      fieldName: 'app',
      label: $t('site.group.mainApp'),
      rules: 'required',
      componentProps: {
        placeholder: $t('site.group.mainAppPlaceholder'),
      },
    },
    {
      component: 'CheckboxGroup',
      fieldName: 'addon',
      label: $t('site.group.containAddon'),
      componentProps: {
        placeholder: $t('site.group.containAddonPlaceholder'),
      },
    },
  ];
}

export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
      component: 'Input',
      fieldName: 'keywords',
      label: $t('site.group.groupName'),
    },
  ];
}

export function useColumns(
  onActionClick: OnActionClickFn<SiteApi.SiteGroup>,
): VxeTableGridOptions['columns'] {
  return [
    { type: 'checkbox', width: 60 },
    {
      title: $t('site.group.groupId'),
      field: 'group_id',
      width: 80,
    },
    {
      title: $t('site.group.groupName'),
      field: 'group_name',
      minWidth: 200,
    },
    {
      title: $t('site.group.appName'),
      field: 'app_list',
      width: 300,
      slots: {
        default: ({ row }) => {
          if (!row.app_list || row.app_list.length === 0) {
            return <span class="text-gray-400">{$t('site.group.appListEmpty')}</span>;
          }
          
          const displayApps = row.app_list.slice(0, 4);
          const remainingCount = row.app_list.length - 4;
          
          return (
            <div class="flex items-center space-x-2">
              {displayApps.map((app: any) => (
                <Tooltip key={app.key} title={app.title}>
                  <Avatar
                    src={app.icon}
                    size="small"
                    class="cursor-pointer"
                  />
                </Tooltip>
              ))}
              {remainingCount > 0 && (
                <Tooltip title={$t('site.group.moreApps', { count: remainingCount })}>
                  <span class="text-xs text-gray-500 cursor-pointer">
                    +{remainingCount}
                  </span>
                </Tooltip>
              )}
            </div>
          );
        },
      },
    },
    {
      title: $t('site.group.addonName'),
      field: 'addon_list',
      width: 300,
      slots: {
        default: ({ row }) => {
          if (!row.addon_list || row.addon_list.length === 0) {
            return <span class="text-gray-400">{$t('site.group.addonListEmpty')}</span>;
          }
          
          const displayAddons = row.addon_list.slice(0, 4);
          const remainingCount = row.addon_list.length - 4;
          
          return (
            <div class="flex items-center space-x-2">
              {displayAddons.map((addon: any) => (
                <Tooltip key={addon.key} title={addon.title}>
                  <Avatar
                    src={addon.icon}
                    size="small"
                    class="cursor-pointer"
                  />
                </Tooltip>
              ))}
              {remainingCount > 0 && (
                <Tooltip title={$t('site.group.moreAddons', { count: remainingCount })}>
                  <span class="text-xs text-gray-500 cursor-pointer">
                    +{remainingCount}
                  </span>
                </Tooltip>
              )}
            </div>
          );
        },
      },
    },
    {
      title: $t('site.group.createTime'),
      field: 'create_time',
      width: 160,
    },
    {
      title: $t('common.action'),
      field: 'action',
      width: 150,
      slots: {
        default: ({ row }) => (
          <Space>
            <Button
              type="link"
              size="small"
              onClick={() => onActionClick('edit', row)}
            >
              <Icon icon="ant-design:edit-outlined" />
              {$t('common.edit')}
            </Button>
            <Popconfirm
              title={$t('site.group.deleteConfirm')}
              onConfirm={() => onActionClick('delete', row)}
            >
              <Button type="link" size="small" danger>
                <Icon icon="ant-design:delete-outlined" />
                {$t('common.delete')}
              </Button>
            </Popconfirm>
          </Space>
        ),
      },
    },
  ];
}