import { PageSchema } from '@/types/json-ui'

export const dashboardSchema: PageSchema = {
  id: 'analytics-dashboard',
  name: 'Analytics Dashboard',
  layout: {
    type: 'single',
  },
  dataSources: [
    {
      id: 'users',
      type: 'kv',
      key: 'dashboard-users',
      defaultValue: [
        { id: 1, name: 'Alice Johnson', email: 'alice@example.com', status: 'active', joined: '2024-01-15' },
        { id: 2, name: 'Bob Smith', email: 'bob@example.com', status: 'active', joined: '2024-02-20' },
        { id: 3, name: 'Charlie Brown', email: 'charlie@example.com', status: 'inactive', joined: '2023-12-10' },
      ],
    },
    {
      id: 'filterQuery',
      type: 'static',
      defaultValue: '',
    },
    {
      id: 'filteredUsers',
      type: 'computed',
      compute: (data) => {
        const query = (data.filterQuery || '').toLowerCase()
        if (!query) return data.users || []
        return (data.users || []).filter((user: any) =>
          user.name.toLowerCase().includes(query) ||
          user.email.toLowerCase().includes(query)
        )
      },
      dependencies: ['users', 'filterQuery'],
    },
    {
      id: 'stats',
      type: 'computed',
      compute: (data) => ({
        total: data.users?.length || 0,
        active: data.users?.filter((u: any) => u.status === 'active').length || 0,
        inactive: data.users?.filter((u: any) => u.status === 'inactive').length || 0,
      }),
      dependencies: ['users'],
    },
  ],
  components: [
    {
      id: 'root',
      type: 'div',
      props: {
        className: 'h-full overflow-auto p-6 bg-gradient-to-br from-background via-background to-accent/5',
      },
      children: [
        {
          id: 'header',
          type: 'div',
          props: { className: 'mb-8' },
          children: [
            {
              id: 'title',
              type: 'Heading',
              props: {
                className: 'text-4xl font-bold mb-2 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent',
                children: 'Analytics Dashboard',
              },
            },
            {
              id: 'subtitle',
              type: 'Text',
              props: {
                className: 'text-muted-foreground text-lg',
                children: 'Monitor your user activity and key metrics',
              },
            },
          ],
        },
        {
          id: 'metrics-row',
          type: 'div',
          props: { className: 'grid grid-cols-1 md:grid-cols-3 gap-6 mb-8' },
          children: [
            {
              id: 'metric-total',
              type: 'Card',
              props: { className: 'bg-gradient-to-br from-primary/10 to-primary/5 border-primary/20' },
              children: [
                {
                  id: 'metric-total-content',
                  type: 'CardContent',
                  props: { className: 'pt-6' },
                  children: [
                    {
                      id: 'metric-total-label',
                      type: 'div',
                      props: { className: 'text-sm font-medium text-muted-foreground mb-2', children: 'Total Users' },
                    },
                    {
                      id: 'metric-total-value',
                      type: 'div',
                      props: { className: 'text-4xl font-bold text-primary' },
                      bindings: {
                        children: { source: 'stats', path: 'total' },
                      },
                    },
                    {
                      id: 'metric-total-description',
                      type: 'div',
                      props: { className: 'text-xs text-muted-foreground mt-2', children: 'Registered accounts' },
                    },
                  ],
                },
              ],
            },
            {
              id: 'metric-active',
              type: 'Card',
              props: { className: 'bg-gradient-to-br from-green-500/10 to-green-500/5 border-green-500/20' },
              children: [
                {
                  id: 'metric-active-content',
                  type: 'CardContent',
                  props: { className: 'pt-6' },
                  children: [
                    {
                      id: 'metric-active-label',
                      type: 'div',
                      props: { className: 'text-sm font-medium text-muted-foreground mb-2', children: 'Active Users' },
                    },
                    {
                      id: 'metric-active-value',
                      type: 'div',
                      props: { className: 'text-4xl font-bold text-green-600' },
                      bindings: {
                        children: { source: 'stats', path: 'active' },
                      },
                    },
                    {
                      id: 'metric-active-description',
                      type: 'div',
                      props: { className: 'text-xs text-muted-foreground mt-2', children: 'Currently engaged' },
                    },
                  ],
                },
              ],
            },
            {
              id: 'metric-inactive',
              type: 'Card',
              props: { className: 'bg-gradient-to-br from-orange-500/10 to-orange-500/5 border-orange-500/20' },
              children: [
                {
                  id: 'metric-inactive-content',
                  type: 'CardContent',
                  props: { className: 'pt-6' },
                  children: [
                    {
                      id: 'metric-inactive-label',
                      type: 'div',
                      props: { className: 'text-sm font-medium text-muted-foreground mb-2', children: 'Inactive Users' },
                    },
                    {
                      id: 'metric-inactive-value',
                      type: 'div',
                      props: { className: 'text-4xl font-bold text-orange-600' },
                      bindings: {
                        children: { source: 'stats', path: 'inactive' },
                      },
                    },
                    {
                      id: 'metric-inactive-description',
                      type: 'div',
                      props: { className: 'text-xs text-muted-foreground mt-2', children: 'Need re-engagement' },
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: 'users-section',
          type: 'Card',
          props: { className: 'bg-card/50 backdrop-blur' },
          children: [
            {
              id: 'users-header',
              type: 'CardHeader',
              children: [
                {
                  id: 'users-title-row',
                  type: 'div',
                  props: { className: 'flex items-center justify-between' },
                  children: [
                    {
                      id: 'users-title',
                      type: 'CardTitle',
                      props: { children: 'User Directory' },
                    },
                    {
                      id: 'users-badge',
                      type: 'Badge',
                      props: { variant: 'secondary' },
                      bindings: {
                        children: {
                          source: 'filteredUsers',
                          transform: (users: any[]) => `${users.length} users`,
                        },
                      },
                    },
                  ],
                },
                {
                  id: 'users-description',
                  type: 'CardDescription',
                  props: { children: 'Manage and filter your user base' },
                },
              ],
            },
            {
              id: 'users-content',
              type: 'CardContent',
              children: [
                {
                  id: 'filter-row',
                  type: 'div',
                  props: { className: 'mb-6' },
                  children: [
                    {
                      id: 'filter-input',
                      type: 'Input',
                      props: { placeholder: 'Search users by name or email...' },
                      events: [
                        {
                          event: 'onChange',
                          actions: [
                            {
                              id: 'update-filter',
                              type: 'set-value',
                              target: 'filterQuery',
                              compute: (_, event) => event.target.value,
                            },
                          ],
                        },
                      ],
                    },
                  ],
                },
                {
                  id: 'users-list',
                  type: 'div',
                  props: { className: 'space-y-4' },
                  bindings: {
                    children: {
                      source: 'filteredUsers',
                      transform: (users: any[]) => users.map((user: any) => ({
                        type: 'Card',
                        id: `user-${user.id}`,
                        props: {
                          className: 'bg-background/50 hover:bg-background/80 transition-colors border-l-4 border-l-primary',
                        },
                        children: [
                          {
                            type: 'CardContent',
                            id: `user-content-${user.id}`,
                            props: { className: 'pt-6' },
                            children: [
                              {
                                type: 'div',
                                id: `user-row-${user.id}`,
                                props: { className: 'flex items-start justify-between' },
                                children: [
                                  {
                                    type: 'div',
                                    id: `user-info-${user.id}`,
                                    props: { className: 'flex-1' },
                                    children: [
                                      {
                                        type: 'div',
                                        id: `user-name-${user.id}`,
                                        props: { className: 'font-semibold text-lg mb-1', children: user.name },
                                      },
                                      {
                                        type: 'div',
                                        id: `user-email-${user.id}`,
                                        props: { className: 'text-sm text-muted-foreground', children: user.email },
                                      },
                                      {
                                        type: 'div',
                                        id: `user-joined-${user.id}`,
                                        props: { className: 'text-xs text-muted-foreground mt-2', children: `Joined ${user.joined}` },
                                      },
                                    ],
                                  },
                                  {
                                    type: 'Badge',
                                    id: `user-status-${user.id}`,
                                    props: {
                                      variant: user.status === 'active' ? 'default' : 'secondary',
                                      children: user.status,
                                    },
                                  },
                                ],
                              },
                            ],
                          },
                        ],
                      })),
                    },
                  },
                },
              ],
            },
          ],
        },
      ],
    },
  ],
}
