import { Checkbox } from '@/components/checkbox';
import { Combobox } from '@/components/combobox';
import { Switch } from '@/components/switch';
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from '@/components/field';
import type { FieldProps } from '@/components/field';
import { Input } from '@/components/input';
import type { InputProps } from '@/components/input';
import { InputNumber } from '@/components/input-number';
import { Label } from '@/components/label';
import { SearchIcon } from '@/icons';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/select';
import type { SelectTriggerProps } from '@/components/select';
import { Textarea } from '@/components/textarea';
import type { TextareaProps } from '@/components/textarea';
import { FIELD_SIZES } from './axis-values';
import type { Entry } from './types';

export const input: Entry = {
  slug: 'input',
  name: 'Input',
  group: 'Forms',
  description:
    'A single-line text field. Form fields run on their own height ladder — 32 / 36 / 44 / 56px — because CBAR draws them taller than buttons from `md` up. That mismatch is deliberate.',
  imports: { subpath: 'input', names: ['Input'] },
  /* Focus, filled and invalid are variants on the canvas and CSS here, so the
     resting cell is the one to compare against. */
  figma: { set: 'Input', pin: { state: 'default', '.isInvalid?': 'False' } },

  axes: {
    variant: ['outline', 'flushed'],
    size: FIELD_SIZES,
    disabled: [false, true],
  },
  defaults: { variant: 'outline', size: 'md', placeholder: 'you@example.com' },
  render: (props) => <Input {...(props as InputProps)} className="w-48" />,

  matrices: [
    { title: 'Variant × size', rows: 'variant', cols: 'size' },
    { title: 'Disabled', rows: 'variant', cols: 'size', pin: { disabled: true } },
  ],

  compositions: [
    {
      name: 'Invalid',
      description: 'aria-invalid drives the styling — no separate `error` prop to keep in sync.',
      /* Every bare Input here carries an `aria-label`. They are not decoration:
         the `?a11y=on` panel reported all of them as axe `label` failures, and a
         documentation page showing an unlabelled field teaches the wrong thing
         however small the example is. Where a composition has a real Label or a
         FieldLabel it does the naming instead. */
      render: () => (
        <Input aria-label="E-mail" aria-invalid defaultValue="not-an-email" className="w-64" />
      ),
    },
    {
      name: 'Types',
      render: () => (
        <div className="flex flex-col gap-3">
          <Input aria-label="Password" type="password" defaultValue="hunter2" className="w-64" />
          <Input aria-label="Date of birth" type="date" className="w-64" />
          <Input aria-label="Attachment" type="file" className="w-64" />
        </div>
      ),
    },
    {
      name: 'Figma slots',
      description:
        "CBAR's Input set carries `.label?`, `showPlaceholder?`, `showErrorMessage?` and `.isRequired?`. All four land here, but as composition rather than props on Input: Field supplies the label, the required marker and the error, and the placeholder is a native attribute.",
      render: () => (
        <FieldSet className="w-72">
          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="slot-a" required>
                Email
              </FieldLabel>
              <Input id="slot-a" required placeholder="you@example.com" />
            </Field>
            <Field invalid>
              <FieldLabel htmlFor="slot-b">Email</FieldLabel>
              <Input id="slot-b" aria-invalid defaultValue="nope" />
              <FieldError>This is an error text</FieldError>
            </Field>
          </FieldGroup>
        </FieldSet>
      ),
    },
    {
      name: 'Adornments',
      description:
        "Figma's `.leftElement?` and `.rightElement?`, both on by default. `startElement` is inert — a click passes through to the field, which is what an icon or a currency symbol wants. `endElement` stays interactive, so a clear button or a reveal toggle works there. With either set, the box becomes a wrapper and `className` sizes it; use `classNames.input` to reach the field.",
      render: () => (
        <div className="flex w-64 flex-col gap-3">
          <Input aria-label="Search" startElement={<SearchIcon />} placeholder="Search" />
          <Input
            aria-label="Amount"
            endElement={<span className="text-sm">₼</span>}
            defaultValue="1200"
          />
          <Input
            aria-label="Search everything"
            startElement={<SearchIcon />}
            endElement={<span className="text-xs">⌘K</span>}
            placeholder="Both"
          />
          <Input
            aria-label="Search, disabled"
            startElement={<SearchIcon />}
            placeholder="Disabled"
            disabled
          />
          <Input
            aria-label="Search, invalid"
            startElement={<SearchIcon />}
            defaultValue="nope"
            aria-invalid
          />
        </div>
      ),
    },
    {
      name: 'Adornments across sizes',
      description: 'The wrapper follows the same 32 / 36 / 44 / 56px ladder as the bare field.',
      render: () => (
        <div className="flex w-64 flex-col gap-3">
          {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
            <Input
              key={size}
              aria-label={`Search, size ${size}`}
              size={size}
              startElement={<SearchIcon />}
              placeholder={size}
            />
          ))}
        </div>
      ),
    },
  ],

  spec: {
    caption: "CBAR's field ladder, which is not the Button ladder.",
    head: ['Size', 'Height', 'Radius'],
    rows: [
      ['xs', '32px', '4px'],
      ['sm', '36px', '4px'],
      ['md', '44px', '4px'],
      ['lg', '56px', '4px'],
    ],
  },
};

export const textarea: Entry = {
  slug: 'textarea',
  name: 'Textarea',
  group: 'Forms',
  description: 'Multi-line free text. Same variants as Input; height comes from `rows`.',
  imports: { subpath: 'textarea', names: ['Textarea'] },
  figma: {
    set: 'Textarea',
    pin: { state: 'default', '.isInvalid?': 'False', '.isFilled?': 'False' },
  },

  axes: {
    variant: ['outline', 'flushed'],
    size: FIELD_SIZES,
  },
  defaults: { variant: 'outline', size: 'md', placeholder: 'Tell us more…' },
  render: (props) => <Textarea {...(props as TextareaProps)} className="w-48" rows={2} />,

  matrices: [{ title: 'Variant × size', rows: 'variant', cols: 'size' }],

  compositions: [
    {
      name: 'Figma slots',
      description:
        "CBAR's Textarea set has `.label?` (on), `.helperText?` (off) and `.isRequired?` (off), plus `errorText`. All of them are Field's job here — Textarea itself is the control and nothing else.",
      render: () => (
        <FieldSet className="w-72">
          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="ta-a" required>
                Notes
              </FieldLabel>
              <Textarea id="ta-a" rows={3} placeholder="Hello" />
              <FieldDescription>This is a helper text to help user.</FieldDescription>
            </Field>
            <Field invalid>
              <FieldLabel htmlFor="ta-b">Notes</FieldLabel>
              <Textarea id="ta-b" rows={2} aria-invalid defaultValue="…" />
              <FieldError>This is an error text</FieldError>
            </Field>
          </FieldGroup>
        </FieldSet>
      ),
    },
    {
      name: 'Grows with content',
      description:
        'CSS `field-sizing: content` does the resizing, so there is no measuring effect and no hidden mirror element — type a line and the box follows.',
      render: () => (
        <Textarea
          className="w-72"
          defaultValue={
            'Type into this field and watch it grow.\nIt keeps expanding as long as there are more lines.'
          }
        />
      ),
    },
  ],
};

export const label: Entry = {
  slug: 'label',
  name: 'Label',
  group: 'Forms',
  description:
    'A caption bound to a control. Pair `htmlFor` with the control’s `id` so the whole label becomes a hit target.',
  imports: { subpath: 'label', names: ['Label'] },

  compositions: [
    {
      name: 'Bound to an input',
      render: () => (
        <div className="w-64 space-y-2">
          <Label htmlFor="email">E-mail</Label>
          <Input id="email" placeholder="you@example.com" />
        </div>
      ),
    },
    {
      name: 'Dims with a disabled control',
      description:
        "Tailwind's `peer` on the control lets the label read its sibling's disabled state in CSS — no prop to pass and nothing to keep in sync.",
      render: () => (
        <div className="flex items-center gap-2">
          <Checkbox id="peer-demo" className="peer" disabled />
          <Label htmlFor="peer-demo">Unavailable option</Label>
        </div>
      ),
    },
  ],
};

export const field: Entry = {
  slug: 'field',
  name: 'Field',
  group: 'Forms',
  description:
    'The wrapper that lays a control out with its label, description and error — without pulling in a form library. Use `Form` instead when you are already on react-hook-form.',
  imports: { subpath: 'field', names: ['Field', 'FieldLabel', 'FieldDescription', 'FieldError'] },

  axes: {
    orientation: ['vertical', 'horizontal'],
    invalid: [false, true],
  },
  defaults: { orientation: 'vertical', invalid: false },
  render: (props) => (
    <Field {...(props as FieldProps)} className="w-64">
      <FieldLabel htmlFor="f">Display name</FieldLabel>
      <Input id="f" defaultValue="cavid" />
    </Field>
  ),

  matrices: [{ title: 'Orientation × invalid', rows: 'orientation', cols: 'invalid' }],

  compositions: [
    {
      name: 'Full anatomy',
      render: () => (
        <FieldSet className="w-80">
          <FieldLegend>Profile</FieldLegend>
          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="handle">Handle</FieldLabel>
              <Input id="handle" defaultValue="cavid" />
              <FieldDescription>Shown next to everything you publish.</FieldDescription>
            </Field>
            <Field invalid>
              <FieldLabel htmlFor="site">Website</FieldLabel>
              <Input id="site" aria-invalid defaultValue="htp:/" />
              <FieldError>That is not a valid URL.</FieldError>
            </Field>
          </FieldGroup>
        </FieldSet>
      ),
    },
    {
      name: 'Horizontal',
      description:
        'The orientation the matrix above cannot show the point of: horizontal is for a control that reads as one line with its label — a switch or a checkbox — rather than for a text field, which still wants its label above it.',
      render: () => (
        <div className="flex w-80 flex-col gap-4">
          <Field orientation="horizontal">
            <FieldLabel htmlFor="h-beta">Join the beta programme</FieldLabel>
            <Switch id="h-beta" defaultChecked />
          </Field>
          <Field orientation="horizontal">
            <FieldLabel htmlFor="h-digest">Weekly digest</FieldLabel>
            <Switch id="h-digest" />
          </Field>
        </div>
      ),
    },
    {
      name: 'Required',
      description:
        "CBAR's `.isRequired?` slot. The asterisk is `aria-hidden` — it draws the requirement, it does not announce it, so set `required` on the control as well and assistive technology hears it from the place it already looks.",
      render: () => (
        <Field className="w-72">
          <FieldLabel htmlFor="req-email" required>
            Email
          </FieldLabel>
          <Input id="req-email" type="email" required placeholder="you@example.com" />
          <FieldDescription>We only use it to send the receipt.</FieldDescription>
        </Field>
      ),
    },
  ],
};

export const select: Entry = {
  slug: 'select',
  name: 'Select',
  group: 'Forms',
  description:
    'A closed list of options, built on Radix Select so keyboard and screen-reader behaviour is not re-implemented. `variant` and `size` live on SelectTrigger, and they are Input\'s two axes — the trigger renders through `inputVariants`, so it shares the 32 / 36 / 44 / 56px field ladder rather than the button one.',
  imports: {
    subpath: 'select',
    names: ['Select', 'SelectTrigger', 'SelectValue', 'SelectContent', 'SelectItem'],
  },
  figma: { set: 'Select', pin: { state: 'default' } },

  axes: {
    variant: ['outline', 'flushed'],
    size: FIELD_SIZES,
  },
  defaults: { variant: 'outline', size: 'md' },
  render: (props) => (
    <Select defaultValue="baku">
      <SelectTrigger {...(props as SelectTriggerProps)} className="w-40">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="baku">Baku</SelectItem>
        <SelectItem value="ganja">Ganja</SelectItem>
      </SelectContent>
    </Select>
  ),

  matrices: [{ title: 'Variant × size', rows: 'variant', cols: 'size' }],

  compositions: [
    {
      name: 'Figma slots',
      description:
        "CBAR's Select set has `.label?`, `showErrorMessage?` and `errorText` — Field's job here — plus `.rightElement?`, which SelectTrigger draws as a fixed chevron, `.isRequired?` on FieldLabel and `.isClearable?` as `clearable` on the trigger. Clearing sets the value to `''`, which is how Radix returns to the placeholder; that is also why no item may use `''` as its own value.",
      render: () => (
        <FieldSet className="w-72">
          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="sel-a" required>
                City
              </FieldLabel>
              <Select defaultValue="baku">
                <SelectTrigger id="sel-a" clearable>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="baku">Baku</SelectItem>
                  <SelectItem value="ganja">Ganja</SelectItem>
                </SelectContent>
              </Select>
            </Field>
            <Field invalid>
              <FieldLabel htmlFor="sel-b">City</FieldLabel>
              <Select>
                <SelectTrigger id="sel-b" aria-invalid>
                  <SelectValue placeholder="example@cbar.az" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="baku">Baku</SelectItem>
                </SelectContent>
              </Select>
              <FieldError>This is an error text</FieldError>
            </Field>
          </FieldGroup>
        </FieldSet>
      ),
    },
    {
      name: 'Grouped options',
      render: () => (
        <Select>
          <SelectTrigger className="w-56">
            <SelectValue placeholder="Pick a region" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Absheron</SelectLabel>
              <SelectItem value="baku">Baku</SelectItem>
              <SelectItem value="sumqayit">Sumqayit</SelectItem>
            </SelectGroup>
            <SelectGroup>
              <SelectLabel>Ganja-Qazakh</SelectLabel>
              <SelectItem value="ganja">Ganja</SelectItem>
              <SelectItem value="qazakh">Qazakh</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      ),
    },
  ],
};

export const combobox: Entry = {
  slug: 'combobox',
  name: 'Combobox',
  group: 'Forms',
  description:
    "A searchable select. Rebuilt on the kit's own Command + Popover + Button rather than ported from shadcn, whose version needs @base-ui/react and InputGroup.",
  imports: { subpath: 'combobox', names: ['Combobox'] },

  compositions: [
    {
      name: 'Filterable list',
      render: () => (
        <Combobox
          className="w-64"
          placeholder="Pick a framework"
          options={[
            { value: 'next', label: 'Next.js' },
            { value: 'vite', label: 'Vite' },
            { value: 'rspack', label: 'Rspack' },
            { value: 'remix', label: 'Remix' },
          ]}
        />
      ),
    },
    {
      name: 'Custom copy',
      description:
        'Four strings, all of them yours: the trigger placeholder, the search placeholder, the empty message, and a disabled option that stays visible so the list does not appear to lose entries.',
      render: () => (
        <Combobox
          className="w-64"
          placeholder="Choose a framework…"
          searchPlaceholder="Filter frameworks…"
          emptyMessage="Nothing matches that."
          options={[
            { value: 'next', label: 'Next.js' },
            { value: 'remix', label: 'Remix' },
            { value: 'astro', label: 'Astro' },
            { value: 'angular', label: 'Angular (unavailable)', disabled: true },
          ]}
        />
      ),
    },
  ],
};

export const inputNumber: Entry = {
  slug: 'input-number',
  name: 'InputNumber',
  group: 'Forms',
  description:
    'A numeric field with steppers, clamping and keyboard arrows. Written locally rather than pulled from rc-input-number.',
  imports: { subpath: 'input-number', names: ['InputNumber'] },

  compositions: [
    {
      name: 'Bounded',
      description: 'min / max / step, with the arrows and the wheel honouring all three.',
      render: () => (
        <div className="flex flex-col gap-3">
          <InputNumber defaultValue={5} min={0} max={10} className="w-40" />
          <InputNumber defaultValue={2.5} min={0} max={5} step={0.5} className="w-40" />
          <InputNumber defaultValue={3} disabled className="w-40" />
        </div>
      ),
    },
    {
      name: 'Formatted',
      description:
        '`formatter` and `parser` are a pair: the first decides what is shown, the second turns that back into a number. The committed value stays numeric throughout, which is why `role="spinbutton"` can still announce it with its bounds.',
      render: () => (
        <div className="flex flex-col gap-3">
          <InputNumber
            className="w-40"
            defaultValue={1250}
            min={0}
            step={50}
            aria-label="Amount"
            formatter={(value) => `${value ?? ''}`.replace(/\B(?=(\d{3})+(?!\d))/g, ' ') + ' ₼'}
            parser={(display) => Number(display?.replace(/[^\d.-]/g, '') ?? 0)}
          />
          <InputNumber
            className="w-40"
            defaultValue={25}
            min={0}
            max={100}
            step={5}
            aria-label="Share"
            formatter={(value) => `${value ?? 0}%`}
            parser={(display) => Number(display?.replace('%', '') ?? 0)}
          />
        </div>
      ),
    },
    {
      name: 'Decimals',
      description:
        '`precision` fixes the number of decimals on commit, so stepping by 0.1 cannot drift into a float artefact.',
      render: () => (
        <InputNumber
          className="w-40"
          defaultValue={1.5}
          step={0.1}
          precision={2}
          min={0}
          max={10}
          aria-label="Rate"
        />
      ),
    },
    {
      name: 'Without the steppers',
      description:
        '`controls={false}` drops the buttons and keeps everything else — the arrow keys, the wheel and the clamping still work.',
      render: () => (
        <InputNumber className="w-40" defaultValue={42} controls={false} aria-label="Count" />
      ),
    },
  ],
};