import { define } from '../../src'
import { Layout } from './helpers'
import { theme } from './themes'
import { ButtonExamplesContent } from '../button'
import { ProfileExamplesContent } from '../profile'
import { NavigationExamplesContent } from '../navigation'
import { FormExamplesContent } from '../form'

const P = define('SSR_P', {
  color: theme('colors-fgMuted'),
  fontSize: 16,
  marginBottom: theme('spacing-xxl'),
})

const ExamplesGrid = define('SSR_ExamplesGrid', {
  display: 'grid',
  gap: theme('spacing-lg'),
  gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))'
})

const ExampleCard = define('SSR_ExampleCard', {
  base: 'a',

  background: theme('colors-bgElevated'),
  padding: theme('spacing-lg'),
  border: `1px solid ${theme('colors-border')}`,
  borderRadius: theme('radius-sm'),
  textDecoration: 'none',
  display: 'block',

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

  parts: {
    H2: {
      color: theme('colors-fg'),
      margin: `0 0 ${theme('spacing-sm')} 0`,
      fontSize: 18,
      fontWeight: 400,
    },
    P: {
      color: theme('colors-fgMuted'),
      margin: 0,
      fontSize: 14,
    }
  },

  render({ props: { title, desc, ...rest }, parts: { Root, H2, P } }) {
    return (
      <Root {...rest}>
        <H2>{title}</H2>
        <P>{desc}</P>
      </Root>
    )
  }
})

export const IndexPage = ({ path }: any) => (
  <Layout title="Forge Examples" path={path}>
    <P>Server-rendered demos. View source to see the static CSS.</P>

    <ExamplesGrid>
      <ExampleCard href="/ssr/profile"
        title="Profile Card"
        desc="Parts, variants, custom render. Size/theme switching."
      />

      <ExampleCard href="/ssr/buttons"
        title="Buttons"
        desc="Intent, size, disabled states. Basic variant patterns."
      />

      <ExampleCard href="/ssr/navigation"
        title="Navigation"
        desc="Tabs, pills, breadcrumbs, vertical nav. No router required."
      />

      <ExampleCard href="/ssr/form"
        title="Forms"
        desc="Inputs, validation states, checkboxes, textareas."
      />
    </ExamplesGrid>
  </Layout>
)

export const ButtonExamplesPage = ({ path }: any) => (
  <Layout title="Forge Button Component Examples" path={path}>
    <ButtonExamplesContent />
  </Layout>
)

export const ProfileExamplesPage = ({ path }: any) => (
  <Layout title="Forge Profile Examples" path={path}>
    <ProfileExamplesContent />
  </Layout>
)

export const NavigationExamplesPage = ({ path }: any) => (
  <Layout title="Forge Navigation Examples" path={path}>
    <NavigationExamplesContent />
  </Layout>
)

export const FormExamplesPage = ({ path }: any) => (
  <Layout title="Forge Form Examples" path={path}>
    <FormExamplesContent />
  </Layout>
)