import { useState } from 'react'
import {
  Button,
  Checkbox,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
  Field,
  Input,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@platform-modules/ui-primitives'

export type HarnessMode = 'clean' | 'bad'

export interface UiPrimitivesA11yHarnessProps {
  mode?: HarnessMode
}

export default function UiPrimitivesA11yHarness({
  mode = 'clean',
}: UiPrimitivesA11yHarnessProps) {
  const [currentMode] = useState(mode)
  const [checked, setChecked] = useState(false)

  return (
    <main
      data-testid="ui-primitives-a11y"
      style={{
        minHeight: '100vh',
        padding: 'var(--mod-space-6)',
        background: 'var(--mod-color-bg)',
        color: 'var(--mod-color-fg)',
      }}
    >
      <section
        aria-labelledby="ui-primitives-a11y-title"
        style={{
          display: 'grid',
          gap: 'var(--mod-space-6)',
          maxWidth: '56rem',
        }}
      >
        <div style={{ display: 'grid', gap: 'var(--mod-space-2)' }}>
          <p style={{ margin: 0 }}>Accessibility harness</p>
          <h1 id="ui-primitives-a11y-title" style={{ margin: 0 }}>
            UI primitives gate fixture
          </h1>
        </div>

        <div style={{ display: 'flex', gap: 'var(--mod-space-3)', flexWrap: 'wrap' }}>
          <Button>Primary action</Button>
          <Dialog>
            <DialogTrigger asChild>
              <Button tone="surface">Open dialog</Button>
            </DialogTrigger>
            <DialogContent>
              <DialogTitle>Harness dialog</DialogTitle>
              <DialogDescription>Dialog content used by the accessibility gate.</DialogDescription>
              <p>Everything here is keyboard reachable.</p>
            </DialogContent>
          </Dialog>
        </div>

        <Field label="Project name" hint="Used in screenshot assertions.">
          <Input defaultValue="UI kit" />
        </Field>

        <Field label="Email updates">
          <Checkbox checked={checked} onCheckedChange={(value) => setChecked(value === true)} />
        </Field>

        <Tabs defaultValue="overview">
          <TabsList aria-label="Harness sections">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="details">Details</TabsTrigger>
          </TabsList>
          <TabsContent value="overview">Overview content</TabsContent>
          <TabsContent value="details">Details content</TabsContent>
        </Tabs>

        {currentMode === 'bad' ? (
          <div
            data-testid="bad-click-target"
            onClick={() => {}}
            onKeyDown={() => {}}
            tabIndex={0}
          >
            Broken action
          </div>
        ) : null}
      </section>
    </main>
  )
}