import { define } from '../src'
import { ExampleSection } from './ssr/helpers'
import { theme } from './ssr/themes'

const TabSwitcher = define('TabSwitcher', {
  parts: {
    Input: {
      base: 'input[type=radio]',
      display: 'none',
    },
    TabBar: {
      display: 'flex',
      gap: 0,
      borderBottom: `1px solid ${theme('colors-border')}`,
      marginBottom: theme('spacing-lg'),
    },
    TabLabel: {
      base: 'label',

      padding: `${theme('spacing-sm')} ${theme('spacing-lg')}`,
      position: 'relative',
      marginBottom: -1,
      background: 'transparent',
      borderBottom: '1px solid transparent',
      color: theme('colors-fgMuted'),
      fontSize: 14,
      cursor: 'pointer',
      transition: 'all 0.2s ease',

      states: {
        ':hover': {
          color: theme('colors-fg'),
        }
      },

      selectors: {
        '@Input:checked + &': {
          color: theme('colors-accent'),
          borderBottom: `1px solid ${theme('colors-accent')}`
        }
      }
    },
    Content: {
      display: 'none',
      padding: theme('spacing-lg'),
      background: theme('colors-bgElevated'),
      border: `1px solid ${theme('colors-border')}`,
      borderRadius: theme('radius-sm'),

      selectors: {
        '@Input:checked ~ &': {
          display: 'block'
        }
      }
    }
  },

  render({ props, parts: { Root, Input, TabBar, TabLabel, Content } }) {
    return (
      <Root>
        <TabBar>
          {props.tabs?.map((tab: any, index: number) => (
            <>
              <Input
                key={`input-${tab.id}`}
                id={`${props.name}-${tab.id}`}
                name={props.name || 'tabs'}
                checked={index === 0}
              />
              <TabLabel key={`label-${tab.id}`} for={`${props.name}-${tab.id}`}>
                {tab.label}
              </TabLabel>
            </>
          ))}
        </TabBar>

        {props.tabs?.map((tab: any) => (
          <Content key={`content-${tab.id}`}>
            {tab.content}
          </Content>
        ))}
      </Root>
    )
  }
})

const Pills = define('Pills', {
  parts: {
    Input: {
      base: 'input[type=radio]',
      display: 'none',
    },
    PillBar: {
      display: 'flex',
      gap: theme('spacing-xs'),
      flexWrap: 'wrap',
    },
    PillLabel: {
      base: 'label',

      padding: `${theme('spacing-xs')} ${theme('spacing-md')}`,
      background: theme('colors-bgElevated'),
      border: `1px solid ${theme('colors-border')}`,
      borderRadius: 20,
      color: theme('colors-fgMuted'),
      fontSize: 14,
      cursor: 'pointer',
      transition: 'all 0.2s ease',

      states: {
        ':hover': {
          borderColor: theme('colors-borderActive'),
          color: theme('colors-fg'),
        }
      },

      selectors: {
        '@Input:checked + &': {
          background: theme('colors-accent'),
          borderColor: theme('colors-accent'),
          color: theme('colors-bg')
        },
        '@Input:checked + &:hover': {
          background: theme('colors-accentDim'),
          borderColor: theme('colors-accentDim'),
        }
      }
    }
  },

  render({ props, parts: { Root, Input, PillBar, PillLabel } }) {
    return (
      <Root>
        <PillBar>
          {props.items?.map((item: any, index: number) => (
            <>
              <Input
                key={`input-${item.id}`}
                id={`${props.name}-${item.id}`}
                name={props.name || 'pills'}
                checked={index === 0}
              />
              <PillLabel key={`label-${item.id}`} for={`${props.name}-${item.id}`}>
                {item.label}
              </PillLabel>
            </>
          ))}
        </PillBar>
      </Root>
    )
  }
})

const VerticalNav = define('VerticalNav', {
  parts: {
    Input: {
      base: 'input[type=radio]',
      display: 'none',
    },
    NavBar: {
      display: 'flex',
      flexDirection: 'column',
      gap: 4,
      width: 240,
    },
    NavLabel: {
      base: 'label',

      padding: `${theme('spacing-sm')} ${theme('spacing-md')}`,
      display: 'flex',
      alignItems: 'center',
      gap: theme('spacing-sm'),

      background: 'transparent',
      border: `1px solid transparent`,
      borderRadius: theme('radius-sm'),
      color: theme('colors-fgMuted'),
      fontSize: 14,
      cursor: 'pointer',
      transition: 'all 0.2s ease',

      states: {
        ':hover': {
          background: theme('colors-bgElevated'),
          borderColor: theme('colors-border'),
          color: theme('colors-fg'),
        }
      },

      selectors: {
        '@Input:checked + &': {
          background: theme('colors-bgElevated'),
          borderColor: theme('colors-accent'),
          color: theme('colors-accent'),
        },
        '@Input:checked + &:hover': {
          borderColor: theme('colors-accentDim'),
          color: theme('colors-accentDim')
        }
      }
    },
    Icon: {
      width: 20,
      height: 20,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: 16,
    }
  },

  render({ props, parts: { Root, Input, NavBar, NavLabel, Icon } }) {
    return (
      <Root>
        <NavBar>
          {props.items?.map((item: any, index: number) => (
            <>
              <Input
                key={`input-${item.id}`}
                id={`${props.name}-${item.id}`}
                name={props.name || 'nav'}
                checked={index === 0}
              />
              <NavLabel key={`label-${item.id}`} for={`${props.name}-${item.id}`}>
                {item.icon && <Icon>{item.icon}</Icon>}
                {item.label}
              </NavLabel>
            </>
          ))}
        </NavBar>
      </Root>
    )
  }
})

const Breadcrumbs = define('Breadcrumbs', {
  display: 'flex',
  alignItems: 'center',
  gap: theme('spacing-xs'),
  flexWrap: 'wrap',

  parts: {
    Item: {
      base: 'a',

      color: theme('colors-fgMuted'),
      fontSize: 14,
      textDecoration: 'none',
      transition: 'color 0.2s ease',

      states: {
        ':hover': {
          color: theme('colors-accent'),
        }
      }
    },
    Separator: {
      color: theme('colors-fgDim'),
      fontSize: 14,
      userSelect: 'none',
    },
    Current: {
      color: theme('colors-fg'),
      fontSize: 14,
    }
  },

  render({ props, parts: { Root, Item, Separator, Current } }) {
    return (
      <Root>
        {props.items?.map((item: any, index: number) => (
          <>
            {index === props.items.length - 1 ? (
              <Current key={item.id}>{item.label}</Current>
            ) : (
              <>
                <Item key={item.id} href={item.href || '#'}>
                  {item.label}
                </Item>
                <Separator>/</Separator>
              </>
            )}
          </>
        ))}
      </Root>
    )
  }
})

const Tabs = define('Tabs', {
  display: 'flex',
  gap: 0,
  borderBottom: `1px solid ${theme('colors-border')}`,

  parts: {
    Tab: {
      base: 'button',
      padding: `${theme('spacing-sm')} ${theme('spacing-lg')}`,
      position: 'relative',
      marginBottom: -1,
      background: 'transparent',
      border: 'none',
      borderBottom: '1px solid transparent',
      color: theme('colors-fgMuted'),
      fontSize: 14,
      cursor: 'pointer',
      transition: 'all 0.2s ease',

      states: {
        ':hover': {
          color: theme('colors-fg'),
        }
      }
    }
  },

  variants: {
    active: {
      parts: {
        Tab: {
          color: theme('colors-accent'),
          borderBottom: `1px solid ${theme('colors-accent')}`,
        }
      }
    }
  },

  render({ props, parts: { Root, Tab } }) {
    return (
      <Root>
        {props.items?.map((item: any) => (
          <Tab key={item.id} active={item.active}>
            {item.label}
          </Tab>
        ))}
      </Root>
    )
  }
})

const SimplePills = define('SimplePills', {
  display: 'flex',
  gap: theme('spacing-xs'),
  flexWrap: 'wrap',

  parts: {
    Pill: {
      base: 'button',
      padding: `${theme('spacing-xs')} ${theme('spacing-md')}`,
      background: theme('colors-bgElevated'),
      border: `1px solid ${theme('colors-border')}`,
      borderRadius: 20,
      color: theme('colors-fgMuted'),
      fontSize: 14,
      cursor: 'pointer',
      transition: 'all 0.2s ease',

      states: {
        ':hover': {
          borderColor: theme('colors-borderActive'),
          color: theme('colors-fg'),
        }
      }
    }
  },

  variants: {
    active: {
      parts: {
        Pill: {
          background: theme('colors-accent'),
          borderColor: theme('colors-accent'),
          color: theme('colors-bg'),
          states: {
            ':hover': {
              background: theme('colors-accentDim'),
              borderColor: theme('colors-accentDim'),
            }
          }
        }
      }
    }
  },

  render({ props, parts: { Root, Pill } }) {
    return (
      <Root>
        {props.items?.map((item: any) => (
          <Pill key={item.id} active={item.active}>
            {item.label}
          </Pill>
        ))}
      </Root>
    )
  }
})

const SimpleVerticalNav = define('SimpleVerticalNav', {
  display: 'flex',
  flexDirection: 'column',
  gap: 4,
  width: 240,

  parts: {
    NavItem: {
      base: 'button',
      padding: `${theme('spacing-sm')} ${theme('spacing-md')}`,
      display: 'flex',
      alignItems: 'center',
      gap: theme('spacing-sm'),
      background: 'transparent',
      border: `1px solid transparent`,
      borderRadius: theme('radius-sm'),
      color: theme('colors-fgMuted'),
      fontSize: 14,
      textAlign: 'left',
      cursor: 'pointer',
      transition: 'all 0.2s ease',

      states: {
        ':hover': {
          background: theme('colors-bgElevated'),
          borderColor: theme('colors-border'),
          color: theme('colors-fg'),
        }
      }
    },
    Icon: {
      width: 20,
      height: 20,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: 16,
    }
  },

  variants: {
    active: {
      parts: {
        NavItem: {
          background: theme('colors-bgElevated'),
          borderColor: theme('colors-accent'),
          color: theme('colors-accent'),
          states: {
            ':hover': {
              borderColor: theme('colors-accentDim'),
              color: theme('colors-accentDim'),
            }
          }
        }
      }
    }
  },

  render({ props, parts: { Root, NavItem, Icon } }) {
    return (
      <Root>
        {props.items?.map((item: any) => (
          <NavItem key={item.id} active={item.active}>
            {item.icon && <Icon>{item.icon}</Icon>}
            {item.label}
          </NavItem>
        ))}
      </Root>
    )
  }
})

export const NavigationExamplesContent = () => (
  <>
    <ExampleSection title="Tabs">
      <TabSwitcher
        name="demo-tabs"
        tabs={[
          { id: 'overview', label: 'Overview', content: <p>Overview content</p> },
          { id: 'analytics', label: 'Analytics', content: <p>Analytics content</p> },
          { id: 'reports', label: 'Reports', content: <p>Reports content</p> },
          { id: 'settings', label: 'Settings', content: <p>Settings content</p> },
        ]}
      />
    </ExampleSection>

    <ExampleSection title="Pills">
      <Pills
        name="demo-pills"
        items={[
          { id: 'all', label: 'All' },
          { id: 'active', label: 'Active' },
          { id: 'pending', label: 'Pending' },
          { id: 'archived', label: 'Archived' },
        ]}
      />
    </ExampleSection>

    <ExampleSection title="Vertical Navigation">
      <VerticalNav
        name="demo-nav"
        items={[
          { id: 'dashboard', label: 'Dashboard', icon: '📊' },
          { id: 'projects', label: 'Projects', icon: '📁' },
          { id: 'team', label: 'Team', icon: '👥' },
          { id: 'calendar', label: 'Calendar', icon: '📅' },
          { id: 'documents', label: 'Documents', icon: '📄' },
          { id: 'settings', label: 'Settings', icon: '⚙️' },
        ]}
      />
    </ExampleSection>

    <ExampleSection title="Breadcrumbs">
      <Breadcrumbs items={[
        { id: 1, label: 'Home', href: '#' },
        { id: 2, label: 'Projects', href: '#' },
        { id: 3, label: 'Website Redesign', href: '#' },
        { id: 4, label: 'Design Assets' },
      ]} />
    </ExampleSection>
  </>
)