import React from 'react'

export const ViewItem = ({
  fill,
  layout = 'none',
  className = '',
  ...props
}) => (
  <View
    layout={layout}
    data-fill={fill}
    className={`ossy-stack__item ${className}`.trim()}
    {...props}
  />
)

export const View = ({
  surface = 'neutral',
  selectable,
  layout = 'column',
  stack,
  horizontal = false,
  bordered,
  alignItems,
  justifyContent,
  gap,
  roundness,
  inset,
  as: Container = 'div',
  style = {},
  ...props
}) => {
  const resolvedLayout = stack
    ? (horizontal ? 'row' : 'column')
    : layout

  return (
    <>
      <style href="@ossy/design-system/view" precedence="high">
      {`
        [data-view] {
          max-width: 100%;
        }
      `}
      </style>
      {stack && (
        <style href="@ossy/design-system/view-stack" precedence="high">
        {`
          [data-stack] .ossy-stack__item {
            flex-shrink: 0;
          }

          [data-stack] .ossy-stack__item[data-fill="true"] {
            flex: 1 1 auto;
          }

          [data-horizontal="false"][data-bordered="true"] > .ossy-stack__item {
            border-top: 1px solid var(--separator-primary);
          }

          [data-horizontal="false"][data-bordered="true"] > .ossy-stack__item:first-child {
            border-top: none;
          }

          [data-horizontal="true"][data-bordered="true"] > .ossy-stack__item {
            border-left: 1px solid var(--separator-primary);
          }

          [data-horizontal="true"][data-bordered="true"] > .ossy-stack__item:first-child {
            border-left: none;
          }
        `}
        </style>
      )}
      <style href="@ossy/design-system/patterns" precedence="high">
      {`
          [data-roundness="none"] { border-radius: var(--roundness-none, 0) }
          [data-roundness="xs"] { border-radius: var(--roundness-xs, var(--space-xs)) }
          [data-roundness="s"] { border-radius: var(--roundness-s, var(--space-s)) }
          [data-roundness="m"] { border-radius: var(--roundness-m, var(--space-m)) }
          [data-roundness="l"] { border-radius: var(--roundness-l, var(--space-l)) }
          [data-roundness="rounded"] { border-radius: var(--roundness-rounded, 99999px) }

          [data-inset="none"] { padding: var(--space-none) }
          [data-inset="xs"] { padding: var(--space-xs) }
          [data-inset="s"] { padding: var(--space-s) }
          [data-inset="m"] { padding: var(--space-m) }
          [data-inset="l m"] { padding: var(--space-l) var(--space-m) }
          [data-inset="stretch-m"] { padding: var(--space-s) var(--space-m) }
          [data-inset="list-row"] {
            padding:
              calc(var(--space-s) + var(--space-xs))
              var(--space-s)
              calc(var(--space-s) + var(--space-xs))
              calc(var(--space-m) + var(--space-xs));
          }
          [data-inset="list-row-leading"] {
            padding:
              calc(var(--space-s) + var(--space-xs))
              0
              calc(var(--space-s) + var(--space-xs))
              calc(var(--space-m) + var(--space-xs));
          }
          [data-inset="list-row-trailing"] {
            padding:
              calc(var(--space-s) + var(--space-xs))
              var(--space-s)
              calc(var(--space-s) + var(--space-xs))
              0;
          }
          [data-inset="l"] { padding: var(--space-l) }
          [data-inset="xl"] { padding: var(--space-xl) }
          [data-inset="xxl"] { padding: var(--space-xxl) }

          [data-scroll] {
            scrollbar-width: none;
          }

          [data-scroll]::-webkit-scrollbar {
            display: none;
          }
      `}
      </style>

      <style href="@ossy/design-system/layout/column" precedence="high">
      {`
        [data-layout="column"] {
          display: flex;
          flex-direction: column;
        }
      `}
      </style>

      <style href="@ossy/design-system/layout/row" precedence="high">
      {`
        [data-layout="row"] {
          display: flex;
          flex-direction: row;
        }
      `}
      </style>

      <style href="@ossy/design-system/layout/row-wrap" precedence="high">
      {`
        [data-layout="row-wrap"] {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
      `}
      </style>

      <style href="@ossy/design-system/layout/off-center" precedence="high">
      {`
        [data-layout="off-center"] {
          display: grid;
          grid-template-rows: 1fr max-content 2fr;
          grid-template-columns: 1fr;
          grid-template-areas: "."
                               "content"
                               ".";
        }

        [data-layout="off-center"] [data-region="content"] {
          grid-area: content;
        }
      `}
      </style>

      <style href="@ossy/design-system/layout/off-center-s" precedence="high">
      {`
        [data-layout="off-center-s"] {
          height: 100%;
          width: 100%;
          max-width: 100%;
          display: grid;
          grid-template-rows: auto 1fr minmax(400px, min-content) 2.2fr auto;
          grid-template-columns: auto 1fr minmax(min(350px, 100vw), min-content) 1fr auto;
          grid-template-areas: "header header header header header"
                               "sidebar-primary . . . sidebar-secondary"
                               "sidebar-primary . content . sidebar-secondary"
                               "sidebar-primary . . . sidebar-secondary"
                               "footer footer footer footer footer";
        }

        [data-layout="off-center-s"] [data-region="header"] {
          grid-area: header;
        }

        [data-layout="off-center-s"] [data-region="content"] {
          grid-area: content;
        }

        [data-layout="off-center-s"] [data-region="sidebar-primary"] {
          grid-area: sidebar-primary;
        }

        [data-layout="off-center-s"] [data-region="sidebar-secondary"] {
          grid-area: sidebar-secondary;
        }

        [data-layout="off-center-s"] [data-region="footer"] {
          grid-area: footer;
        }
      `}
      </style>

      <style href="@ossy/design-system/layout/off-center-m" precedence="high">
      {`
        [data-layout="off-center-m"] {
          height: 100%;
          width: 100%;
          max-width: 100%;
          display: grid;
          grid-template-rows: auto 1fr minmax(650px, min-content) 2.2fr auto;
          grid-template-columns: auto 1fr minmax(min(1100px, 100%), min-content) 1fr auto;
          grid-template-areas: "header header header header header"
                               "sidebar-primary . . . sidebar-secondary"
                               "sidebar-primary . content . sidebar-secondary"
                               "sidebar-primary . . . sidebar-secondary"
                               "footer footer footer footer footer";
        }

        [data-layout="off-center-m"] [data-region="header"] {
          grid-area: header;
        }

        [data-layout="off-center-m"] [data-region="content"] {
          grid-area: content;
        }

        [data-layout="off-center-m"] [data-region="sidebar-primary"] {
          grid-area: sidebar-primary;
        }

        [data-layout="off-center-m"] [data-region="sidebar-secondary"] {
          grid-area: sidebar-secondary;
        }

        [data-layout="off-center-m"] [data-region="footer"] {
          grid-area: footer;
        }
      `}
      </style>

      <style href="@ossy/design-system/layout/vertical-top" precedence="high">
      {`
        [data-layout="vertical-top"] {
          display: grid;
          grid-template-rows: .05fr max-content 1fr;
          grid-template-columns: 1fr;
          grid-template-areas: "."
                               "content"
                               ".";
        }

        [data-layout="vertical-top"] [data-region="content"] {
          grid-area: content;
        }
      `}
      </style>

      <style href="@ossy/design-system/layout/vertical-top-m" precedence="high">
      {`
        [data-layout="vertical-top-m"] {
          height: 100%;
          width: 100%;
          max-width: 100%;
          display: grid;
          grid-template-rows: auto 1fr minmax(650px, min-content) 3r auto;
          grid-template-columns: auto 1fr minmax(1100px, min-content) 1fr auto;
          grid-template-areas: "header header header header header"
                               "sidebar-primary . . . sidebar-secondary"
                               "sidebar-primary . content . sidebar-secondary"
                               "sidebar-primary . . . sidebar-secondary"
                               "footer footer footer footer footer";
        }

        [data-layout="vertical-top-m"] [data-region="header"] {
          grid-area: header;
        }

        [data-layout="vertical-top-m"] [data-region="content"] {
          grid-area: content;
        }

        [data-layout="vertical-top-m"] [data-region="sidebar-primary"] {
          grid-area: sidebar-primary;
        }

        [data-layout="vertical-top-m"] [data-region="sidebar-secondary"] {
          grid-area: sidebar-secondary;
        }

        [data-layout="vertical-top-m"] [data-region="footer"] {
          grid-area: footer;
        }
      `}
      </style>

      <style href="@ossy/design-system/layout/split-even" precedence="high">
      {`
        [data-layout="split-even"] {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          grid-template-rows: auto;
          grid-auto-flow: column;
        }
      `}
      </style>

      <style href="@ossy/design-system/layout/header" precedence="high">
      {`
        [data-layout="header"] {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          grid-template-areas: "leading far";
          width: 100%;
          align-items: center;
        }

        [data-layout="header"]:has([data-header-slot="description"]):not(:has([data-header-slot="children"])) {
          grid-template-areas:
            "leading far"
            "description description";
        }

        [data-layout="header"]:not(:has([data-header-slot="description"])):has([data-header-slot="children"]) {
          grid-template-areas:
            "leading far"
            "children children";
        }

        [data-layout="header"]:has([data-header-slot="description"]):has([data-header-slot="children"]) {
          grid-template-areas:
            "leading far"
            "description description"
            "children children";
        }

        [data-layout="header"][data-component="app-header"] {
          flex-shrink: 0;
        }

        [data-layout="header"][data-component="content-header"] {
          text-align: left;
        }

        [data-layout="header"] [data-header-slot="leading"] {
          grid-area: leading;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: inherit;
          min-width: 0;
        }

        [data-layout="header"] [data-header-slot="far"] {
          grid-area: far;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: flex-end;
          gap: inherit;
        }

        [data-layout="header"] [data-header-slot="description"] {
          grid-area: description;
        }

        [data-layout="header"] [data-header-slot="children"] {
          grid-area: children;
        }
      `}
      </style>

      <style href="@ossy/design-system/layout/page" precedence="high">
      {`
        [data-layout="page"] {
          box-sizing: border-box;
          height: 100%;
          min-height: 100%;
          min-width: 0;
          width: 100%;
          max-width: 100%;
          display: grid;
          grid-template-rows: auto minmax(0, 1fr) auto;
          grid-template-columns: auto minmax(0, 1fr) auto;
          grid-template-areas: "header header header"
                               "sidebar-primary content sidebar-secondary"
                               "footer footer footer";
        }

        [data-layout="page"] [data-region="header"] {
          grid-area: header;
        }

        [data-layout="page"] [data-region="content"] {
          grid-area: content;
          min-height: 0;
          min-width: 0;
          overflow: auto;
          scrollbar-width: none;
        }

        [data-layout="page"] [data-region="content"]::-webkit-scrollbar {
          display: none;
        }

        [data-layout="page"] [data-region="sidebar-primary"] {
          grid-area: sidebar-primary;
          min-height: 0;
        }

        [data-layout="page"] [data-region="sidebar-secondary"] {
          grid-area: sidebar-secondary;
          min-height: 0;
        }

        [data-layout="page"] [data-region="footer"] {
          grid-area: footer;
        }

        /* Shell owns scroll — page body grows with content; footer stays in document flow. */
        [data-layout="page"][data-page-scroll="external"] {
          height: auto;
          min-height: 100%;
          grid-template-rows: auto auto auto;
        }

        [data-layout="page"][data-page-scroll="external"] [data-region="content"] {
          overflow: visible;
          min-height: 0;
        }
      `}
      </style>

      <style href="@ossy/design-system/layout/sidebar" precedence="high">
      {`
        [data-layout="sidebar"] {
          height: 100%;
          width: 100%;
          max-width: 100%;
          display: grid;
          grid-template-rows: auto 1fr;
          grid-template-columns: auto 1fr auto;
          grid-template-areas: "sidebar-primary header header"
                               "sidebar-primary content sidebar-secondary";
        }

        [data-layout="sidebar"] > [data-region="header"] {
          grid-area: header;
        }

        [data-layout="sidebar"] > [data-region="content"] {
          grid-area: content;
          min-height: 0;
          min-width: 0;
        }

        [data-layout="sidebar"] > [data-region="sidebar-primary"] {
          grid-area: sidebar-primary;
        }

        [data-layout="sidebar"] > [data-region="sidebar-secondary"] {
          grid-area: sidebar-secondary;
        }
      `}
      </style>

      <Container
        data-view
        data-surface={surface}
        data-selectable={selectable}
        data-roundness={roundness}
        data-layout={resolvedLayout}
        data-inset={inset}
        {...(stack ? {
          'data-stack': true,
          'data-horizontal': horizontal,
          'data-bordered': bordered,
        } : {})}
        style={{
          gap: gap ? `var(--space-${gap})` : undefined,
          alignItems,
          justifyContent,
          minWidth: '0',
          ...(resolvedLayout === 'page' ? {} : { minHeight: '0' }),
          ...style
        }}
        {...props}
        
      />
    </>
  )
}

View.Item = ViewItem