import { useState } from 'react'
import { PalettePicker, type PaletteOption } from '@platform-modules/ui-primitives'

const OPTIONS: PaletteOption[] = [
  {
    id: 'ocean',
    label: 'Ocean',
    swatches: ['#0c4a6e', '#e0f2fe', '#0284c7', '#0f172a'],
    preview: {
      bg: '#0c4a6e',
      surface: '#e0f2fe',
      fg: '#0f172a',
      fgMuted: '#475569',
      accent: '#0284c7',
      accentFg: '#ffffff',
      border: '#7dd3fc',
    },
  },
  {
    id: 'forest',
    label: 'Forest',
    swatches: ['#14532d', '#dcfce7', '#16a34a', '#052e16'],
    preview: {
      bg: '#14532d',
      surface: '#dcfce7',
      fg: '#052e16',
      fgMuted: '#166534',
      accent: '#16a34a',
      accentFg: '#ffffff',
      border: '#86efac',
    },
  },
  {
    id: 'sunset',
    label: 'Sunset',
    swatches: ['#7c2d12', '#ffedd5', '#ea580c', '#431407'],
    preview: {
      bg: '#7c2d12',
      surface: '#ffedd5',
      fg: '#431407',
      fgMuted: '#9a3412',
      accent: '#ea580c',
      accentFg: '#ffffff',
      border: '#fdba74',
    },
  },
]

export interface PalettePickerHarnessProps {
  width?: number
}

function readContainerWidth(): number {
  if (typeof window === 'undefined') return 320
  const parsed = Number(new URLSearchParams(window.location.search).get('w') ?? '320')
  return Number.isFinite(parsed) && parsed > 0 ? parsed : 320
}

export default function PalettePickerHarness({
  width,
}: PalettePickerHarnessProps) {
  const [value, setValue] = useState(OPTIONS[0]!.id)
  const [resolvedWidth] = useState(() => width ?? readContainerWidth())

  return (
    <div style={{ width: `${resolvedWidth}px` }} data-testid="palette-picker-container">
      <PalettePicker
        value={value}
        onChange={setValue}
        options={OPTIONS}
        aria-label="Palette options"
      />
    </div>
  )
}