import * as React from 'react';
import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { configureAxe } from 'jest-axe';

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/accordion';
import { Alert, AlertDescription, AlertTitle } from '@/components/alert';
import { Avatar, AvatarFallback } from '@/components/avatar';
import { Badge } from '@/components/badge';
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/breadcrumb';
import { Button } from '@/components/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/card';
import { Checkbox } from '@/components/checkbox';
import { Combobox } from '@/components/combobox';
import { DataTable, type DataTableColumn } from '@/components/data-table';
import { DatePicker } from '@/components/date-picker';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/dialog';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/dropdown-menu';
import { Field, FieldDescription, FieldLabel } from '@/components/field';
import { Input } from '@/components/input';
import { InputNumber } from '@/components/input-number';
import { Label } from '@/components/label';
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@/components/pagination';
import { Progress } from '@/components/progress';
import { RadioGroup, RadioGroupItem } from '@/components/radio-group';
import { RangeSlider } from '@/components/range-slider';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/select';
import { Separator } from '@/components/separator';
import { Skeleton } from '@/components/skeleton';
import { Spinner } from '@/components/spinner';
import { Switch } from '@/components/switch';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/tabs';
import { Textarea } from '@/components/textarea';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/tooltip';
import { Tree } from '@/components/tree';
import { TreeSelect } from '@/components/tree-select';
import { Upload, UploadDropzone } from '@/components/upload';
import { VirtualList } from '@/components/virtual-list';

/**
 * `color-contrast` needs a layout engine and computed colours, neither of which
 * jsdom has — it can only ever report "incomplete" here, so contrast is checked
 * in Storybook (addon-a11y runs against a real browser) instead. `region` wants
 * every node inside a landmark, which is a page-level concern a component
 * fragment cannot satisfy.
 */
const axe = configureAxe({
  rules: {
    'color-contrast': { enabled: false },
    region: { enabled: false },
  },
});

type Row = { id: number; name: string; email: string };

const rows: Row[] = [
  { id: 1, name: 'Ada Lovelace', email: 'ada@example.com' },
  { id: 2, name: 'Grace Hopper', email: 'grace@example.com' },
];

const columns: DataTableColumn<Row>[] = [
  { key: 'name', title: 'Name', dataIndex: 'name', sortable: true },
  { key: 'email', title: 'Email', dataIndex: 'email' },
];

const treeData = [
  { key: 'src', title: 'src', children: [{ key: 'button', title: 'button.tsx' }] },
  { key: 'docs', title: 'docs' },
];

/* TreeSelect keys its nodes by `value` — the option's identity, which is what
   the control reports — while Tree keys them by `key`. */
const treeSelectData = [
  { value: 'src', title: 'src', children: [{ value: 'button', title: 'button.tsx' }] },
  { value: 'docs', title: 'docs' },
];

/**
 * Every case is rendered the way the docs show it — a control with its label, a
 * table with its header. Rendering a bare control instead would pass the audit
 * while proving nothing, because the violations these components can cause
 * (missing name, orphaned label, broken aria wiring) only appear in composition.
 */
const cases: Array<[string, React.ReactElement]> = [
  ['accordion', (
    <Accordion type="single" collapsible>
      <AccordionItem value="a">
        <AccordionTrigger>Shipping</AccordionTrigger>
        <AccordionContent>Ships in two days.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )],
  ['alert', (
    <Alert>
      <AlertTitle>Heads up</AlertTitle>
      <AlertDescription>Your trial ends soon.</AlertDescription>
    </Alert>
  )],
  ['avatar', (
    <Avatar>
      <AvatarFallback>AL</AvatarFallback>
    </Avatar>
  )],
  ['badge', <Badge>New</Badge>],
  ['breadcrumb', (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Settings</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )],
  ['button', (
    <div>
      <Button>Save</Button>
      <Button variant="destructive" disabled>Delete</Button>
      <Button size="icon" aria-label="Close">×</Button>
    </div>
  )],
  ['card', (
    <Card>
      <CardHeader>
        <CardTitle>Usage</CardTitle>
        <CardDescription>Last 30 days</CardDescription>
      </CardHeader>
      <CardContent>1,204 requests</CardContent>
    </Card>
  )],
  ['checkbox', (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept the terms</Label>
    </div>
  )],
  ['combobox', (
    <Combobox
      options={[
        { value: 'next', label: 'Next.js' },
        { value: 'vite', label: 'Vite' },
      ]}
      placeholder="Pick a framework"
    />
  )],
  ['data-table', <DataTable columns={columns} data={rows} rowKey="id" aria-label="Team members" />],
  ['date-picker', <DatePicker placeholder="Pick a date" />],
  ['field', (
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input id="email" type="email" aria-describedby="email-hint" />
      <FieldDescription id="email-hint">We only use it for receipts.</FieldDescription>
    </Field>
  )],
  ['input-number', (
    <div>
      <Label htmlFor="seats">Seats</Label>
      <InputNumber id="seats" min={0} max={10} defaultValue={3} aria-label="Seats" />
    </div>
  )],
  ['pagination', (
    <Pagination>
      <PaginationContent>
        <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
        <PaginationItem><PaginationLink href="#" isActive>1</PaginationLink></PaginationItem>
        <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
        <PaginationItem><PaginationNext href="#" /></PaginationItem>
      </PaginationContent>
    </Pagination>
  )],
  ['progress', <Progress value={60} aria-label="Upload progress" />],
  ['radio-group', (
    <RadioGroup defaultValue="monthly" aria-label="Billing period">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="monthly" id="monthly" />
        <Label htmlFor="monthly">Monthly</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="yearly" id="yearly" />
        <Label htmlFor="yearly">Yearly</Label>
      </div>
    </RadioGroup>
  )],
  ['range-slider', <RangeSlider defaultValue={[20, 60]} thumbLabels={['Minimum', 'Maximum']} />],
  ['select', (
    <div>
      <Label htmlFor="role">Role</Label>
      <Select>
        <SelectTrigger id="role">
          <SelectValue placeholder="Pick a role" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="admin">Admin</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )],
  ['separator', (
    <div>
      <span>Above</span>
      <Separator />
      <span>Below</span>
    </div>
  )],
  ['skeleton', <Skeleton className="h-4 w-40" />],
  ['spinner', <Spinner aria-label="Loading" />],
  ['switch', (
    <div className="flex items-center gap-2">
      <Switch id="notifications" />
      <Label htmlFor="notifications">Email notifications</Label>
    </div>
  )],
  ['tabs', (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account settings</TabsContent>
      <TabsContent value="billing">Billing settings</TabsContent>
    </Tabs>
  )],
  ['textarea', (
    <div>
      <Label htmlFor="notes">Notes</Label>
      <Textarea id="notes" />
    </div>
  )],
  ['tree', <Tree treeData={treeData} defaultExpandAll />],
  ['tree-select', <TreeSelect treeData={treeSelectData} placeholder="Pick a folder" aria-label="Folder" />],
  ['upload', (
    <Upload aria-label="Attachments">
      <UploadDropzone />
    </Upload>
  )],
  ['virtual-list', (
    <VirtualList data={rows} height={80} itemHeight={40} itemKey="id">
      {(row) => <div className="h-10">{row.name}</div>}
    </VirtualList>
  )],
];

describe('a11y smoke', () => {
  it.each(cases)('%s has no axe violations', async (_name, element) => {
    const { container } = render(element);
    expect(await axe(container)).toHaveNoViolations();
  });

  /* Overlays render through a portal, so the audit has to look at the whole
     document — auditing the render container would find an empty div. */
  it('dialog has no axe violations while open', async () => {
    const user = userEvent.setup();
    render(
      <Dialog>
        <DialogTrigger asChild>
          <Button>Open</Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete workspace</DialogTitle>
            <DialogDescription>This cannot be undone.</DialogDescription>
          </DialogHeader>
          <Button variant="destructive">Delete</Button>
        </DialogContent>
      </Dialog>
    );

    await user.click(screen.getByRole('button', { name: 'Open' }));
    await screen.findByRole('dialog');

    expect(await axe(document.body)).toHaveNoViolations();
  });

  it('dropdown menu has no axe violations while open', async () => {
    const user = userEvent.setup();
    render(
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button>Actions</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Rename</DropdownMenuItem>
          <DropdownMenuItem>Duplicate</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    );

    await user.click(screen.getByRole('button', { name: 'Actions' }));
    await screen.findByRole('menu');

    expect(await axe(document.body)).toHaveNoViolations();
  });

  it('tooltip has no axe violations while open', async () => {
    const user = userEvent.setup();
    render(
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button aria-label="Copy link">Copy</Button>
          </TooltipTrigger>
          <TooltipContent>Copy link to clipboard</TooltipContent>
        </Tooltip>
      </TooltipProvider>
    );

    await user.hover(screen.getByRole('button', { name: 'Copy link' }));
    await screen.findByRole('tooltip');

    expect(await axe(document.body)).toHaveNoViolations();
  });
});