import { splitProps, mergeProps, type Component, type JSX } from 'solid-js';
import clsx from 'clsx';
import { getCurrentWindow } from '@tauri-apps/api/window';
import { GlowPerimeter, CHROME_CLIP_PATH } from './GlowPerimeter';
import { DotGrid } from './DotGrid';
import { Titlebar } from '../Titlebar';

const appWindow = getCurrentWindow();

const ISLAND_CLIP = 'polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px)';
const ISLAND_INNER_CLIP = 'polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px)';

interface WindowChromeProps {
  dotGrid?: boolean;
  children: JSX.Element;
  class?: string;
}

export const WindowChrome: Component<WindowChromeProps> = (rawProps) => {
  const props = mergeProps({ dotGrid: true }, rawProps);
  const [local] = splitProps(props, ['dotGrid', 'children', 'class']);

  return (
    <div
      class={clsx('hh-window-chrome-outer', local.class)}
      style={{
        position: 'relative',
        width: '100%',
        height: '100vh',
      }}
    >
      {/* Clipped chrome container */}
      <div
        class="hh-window-chrome"
        style={{
          position: 'relative',
          width: '100%',
          height: '100%',
          'clip-path': CHROME_CLIP_PATH,
          background: 'color-mix(in srgb, var(--hh-color-surface) 25%, var(--hh-raw-void-start, #030712))',
          overflow: 'hidden',
        }}
      >
        {/* Glow perimeter — z-index 10, above all content */}
        <GlowPerimeter />

        {/* Dot grid — z-index 0, behind content */}
        <DotGrid visible={local.dotGrid} />

        {/* Titlebar — fixed in chrome, above scroll area */}
        <Titlebar />

        {/* Drag region overlay — above content (z:5), below glow (z:10) */}
        <div
          data-tauri-drag-region
          style={{
            position: 'absolute',
            top: '0',
            left: '0',
            right: '0',
            height: '58px',
            'z-index': '5',
          }}
        />

        {/* Scrollable content area — full height, content scrolls under titlebar */}
        <div
          class="hh-window-chrome-content"
          style={{
            position: 'absolute',
            top: '0',
            left: '0',
            right: '0',
            bottom: '0',
            'overflow-y': 'auto',
            'overflow-x': 'hidden',
            'z-index': '1',
          }}
        >
          {local.children}
        </div>
      </div>

      {/* Floating controls island — two-div border technique for angular borders */}
      <div
        style={{
          position: 'absolute',
          top: '4px',
          right: '22px',
          'z-index': '50',
          filter: 'drop-shadow(0 0 4px color-mix(in srgb, var(--hh-color-primary) 20%, transparent))',
        }}
      >
        {/* Border layer */}
        <div
          data-tauri-drag-region
          style={{
            position: 'relative',
            'clip-path': ISLAND_CLIP,
            background: 'color-mix(in srgb, var(--hh-color-primary) 50%, transparent)',
            padding: '1px',
          }}
        >
          {/* Fill layer */}
          <div
            style={{
              display: 'flex',
              'align-items': 'center',
              gap: '1px',
              padding: '0 4px',
              height: '30px',
              'clip-path': ISLAND_INNER_CLIP,
              background: 'color-mix(in srgb, var(--hh-color-surface) 50%, var(--hh-raw-void-start, #030712))',
            }}
          >
            <button
              onClick={() => appWindow.minimize()}
              class="flex items-center justify-center text-text-muted hover:text-text"
              style={{ width: '30px', height: '26px', background: 'transparent', border: 'none', cursor: 'pointer' }}
              title="Minimize"
            >
              &#x2013;
            </button>
            <button
              onClick={() => appWindow.toggleMaximize()}
              class="flex items-center justify-center text-text-muted hover:text-text"
              style={{ width: '30px', height: '26px', background: 'transparent', border: 'none', cursor: 'pointer' }}
              title="Maximize"
            >
              &#x25A1;
            </button>
            <button
              onClick={() => appWindow.close()}
              class="flex items-center justify-center text-text-muted hover:text-text"
              style={{ width: '30px', height: '26px', background: 'transparent', border: 'none', cursor: 'pointer' }}
              title="Close"
            >
              &#x2715;
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};