import type React from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Progress } from "@/components/ui/progress"
import { Slider } from "@/components/ui/slider"
import { Textarea } from "@/components/ui/textarea"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { ChevronDown } from "lucide-react"

// Define the structure for component variants
export interface ComponentVariant {
  id: string
  name: string
  component: React.ReactNode
}

// Define the structure for component registry
export interface ComponentRegistry {
  [key: string]: {
    name: string
    variants: ComponentVariant[]
  }
}

// Create the component registry with variants
export const componentRegistry: ComponentRegistry = {
  buttons: {
    name: "Button",
    variants: [
      {
        id: "button-primary",
        name: "Primary",
        component: <Button>Primary Button</Button>,
      },
      {
        id: "button-secondary",
        name: "Secondary",
        component: <Button variant="secondary">Secondary Button</Button>,
      },
      {
        id: "button-outline",
        name: "Outline",
        component: <Button variant="outline">Outline Button</Button>,
      },
      {
        id: "button-ghost",
        name: "Ghost",
        component: <Button variant="ghost">Ghost Button</Button>,
      },
      {
        id: "button-destructive",
        name: "Destructive",
        component: <Button variant="destructive">Destructive Button</Button>,
      },
      {
        id: "button-link",
        name: "Link",
        component: <Button variant="link">Link Button</Button>,
      },
    ],
  },
  badges: {
    name: "Badge",
    variants: [
      {
        id: "badge-default",
        name: "Default",
        component: <Badge>Badge</Badge>,
      },
      {
        id: "badge-secondary",
        name: "Secondary",
        component: <Badge variant="secondary">Secondary Badge</Badge>,
      },
      {
        id: "badge-outline",
        name: "Outline",
        component: <Badge variant="outline">Outline Badge</Badge>,
      },
      {
        id: "badge-destructive",
        name: "Destructive",
        component: <Badge variant="destructive">Destructive Badge</Badge>,
      },
    ],
  },
  cards: {
    name: "Card",
    variants: [
      {
        id: "card-simple",
        name: "Simple",
        component: (
          <Card className="w-full max-w-md">
            <CardContent className="p-6">
              <p>This is a simple card with just content.</p>
            </CardContent>
          </Card>
        ),
      },
      {
        id: "card-with-header",
        name: "With Header",
        component: (
          <Card className="w-full max-w-md">
            <CardHeader>
              <CardTitle>Card Title</CardTitle>
              <CardDescription>Card Description</CardDescription>
            </CardHeader>
            <CardContent>
              <p>Card content goes here.</p>
            </CardContent>
          </Card>
        ),
      },
      {
        id: "card-with-footer",
        name: "With Footer",
        component: (
          <Card className="w-full max-w-md">
            <CardHeader>
              <CardTitle>Card Title</CardTitle>
            </CardHeader>
            <CardContent>
              <p>Card content goes here.</p>
            </CardContent>
            <CardFooter>
              <Button>Action</Button>
            </CardFooter>
          </Card>
        ),
      },
    ],
  },
  checkbox: {
    name: "Checkbox",
    variants: [
      {
        id: "checkbox-default",
        name: "Default",
        component: (
          <div className="flex items-center space-x-2">
            <Checkbox id="terms" />
            <label
              htmlFor="terms"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              Accept terms and conditions
            </label>
          </div>
        ),
      },
      {
        id: "checkbox-disabled",
        name: "Disabled",
        component: (
          <div className="flex items-center space-x-2">
            <Checkbox id="terms-disabled" disabled />
            <label
              htmlFor="terms-disabled"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              Accept terms and conditions
            </label>
          </div>
        ),
      },
    ],
  },
  avatars: {
    name: "Avatar",
    variants: [
      {
        id: "avatar-image",
        name: "With Image",
        component: (
          <Avatar>
            <AvatarImage src="/avatar-woman-1.png" alt="Avatar" />
            <AvatarFallback>JD</AvatarFallback>
          </Avatar>
        ),
      },
      {
        id: "avatar-fallback",
        name: "Fallback",
        component: (
          <Avatar>
            <AvatarFallback>JD</AvatarFallback>
          </Avatar>
        ),
      },
    ],
  },
  accordion: {
    name: "Accordion",
    variants: [
      {
        id: "accordion-single",
        name: "Single Item",
        component: (
          <Accordion type="single" collapsible className="w-full max-w-md">
            <AccordionItem value="item-1">
              <AccordionTrigger>Is it accessible?</AccordionTrigger>
              <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
            </AccordionItem>
          </Accordion>
        ),
      },
      {
        id: "accordion-multiple",
        name: "Multiple Items",
        component: (
          <Accordion type="single" collapsible className="w-full max-w-md">
            <AccordionItem value="item-1">
              <AccordionTrigger>Is it accessible?</AccordionTrigger>
              <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-2">
              <AccordionTrigger>Is it styled?</AccordionTrigger>
              <AccordionContent>
                Yes. It comes with default styles that matches the other components' aesthetic.
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        ),
      },
    ],
  },
  alerts: {
    name: "Alert",
    variants: [
      {
        id: "alert-default",
        name: "Default",
        component: (
          <Alert>
            <AlertTitle>Heads up!</AlertTitle>
            <AlertDescription>You can add components to your app using the cli.</AlertDescription>
          </Alert>
        ),
      },
      {
        id: "alert-destructive",
        name: "Destructive",
        component: (
          <Alert variant="destructive">
            <AlertTitle>Error</AlertTitle>
            <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
          </Alert>
        ),
      },
    ],
  },
  tabs: {
    name: "Tabs",
    variants: [
      {
        id: "tabs-default",
        name: "Default",
        component: (
          <Tabs defaultValue="account" className="w-full max-w-md">
            <TabsList>
              <TabsTrigger value="account">Account</TabsTrigger>
              <TabsTrigger value="password">Password</TabsTrigger>
            </TabsList>
            <TabsContent value="account">Make changes to your account here.</TabsContent>
            <TabsContent value="password">Change your password here.</TabsContent>
          </Tabs>
        ),
      },
    ],
  },
  switch: {
    name: "Switch",
    variants: [
      {
        id: "switch-default",
        name: "Default",
        component: (
          <div className="flex items-center space-x-2">
            <Switch id="airplane-mode" />
            <Label htmlFor="airplane-mode">Airplane Mode</Label>
          </div>
        ),
      },
    ],
  },
  input: {
    name: "Input",
    variants: [
      {
        id: "input-default",
        name: "Default",
        component: <Input placeholder="Email" />,
      },
      {
        id: "input-with-label",
        name: "With Label",
        component: (
          <div className="grid w-full max-w-sm items-center gap-1.5">
            <Label htmlFor="email">Email</Label>
            <Input type="email" id="email" placeholder="Email" />
          </div>
        ),
      },
      {
        id: "input-disabled",
        name: "Disabled",
        component: <Input disabled placeholder="Disabled" />,
      },
    ],
  },
  separator: {
    name: "Separator",
    variants: [
      {
        id: "separator-horizontal",
        name: "Horizontal",
        component: (
          <div className="space-y-1">
            <div>Content above</div>
            <Separator />
            <div>Content below</div>
          </div>
        ),
      },
      {
        id: "separator-vertical",
        name: "Vertical",
        component: (
          <div className="flex h-5 items-center space-x-4">
            <div>Content left</div>
            <Separator orientation="vertical" />
            <div>Content right</div>
          </div>
        ),
      },
    ],
  },
  progress: {
    name: "Progress",
    variants: [
      {
        id: "progress-default",
        name: "Default",
        component: <Progress value={33} className="w-full max-w-md" />,
      },
    ],
  },
  slider: {
    name: "Slider",
    variants: [
      {
        id: "slider-default",
        name: "Default",
        component: <Slider defaultValue={[33]} max={100} step={1} className="w-full max-w-md" />,
      },
    ],
  },
  textarea: {
    name: "Textarea",
    variants: [
      {
        id: "textarea-default",
        name: "Default",
        component: <Textarea placeholder="Type your message here." className="w-full max-w-md" />,
      },
    ],
  },
  dropdowns: {
    name: "Dropdown Menu",
    variants: [
      {
        id: "dropdown-default",
        name: "Default",
        component: (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline">
                Options <ChevronDown className="ml-2 h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuItem>Profile</DropdownMenuItem>
              <DropdownMenuItem>Settings</DropdownMenuItem>
              <DropdownMenuItem>Logout</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        ),
      },
    ],
  },
  "contact-form": {
    name: "Contact Form",
    variants: [
      {
        id: "contact-form-default",
        name: "Default",
        component: (
          <Card className="w-full max-w-md">
            <CardHeader>
              <CardTitle>Contact Us</CardTitle>
              <CardDescription>Fill out the form below to get in touch with us.</CardDescription>
            </CardHeader>
            <CardContent>
              <form className="space-y-4">
                <div className="grid w-full items-center gap-1.5">
                  <Label htmlFor="name">Name</Label>
                  <Input id="name" placeholder="Your name" />
                </div>
                <div className="grid w-full items-center gap-1.5">
                  <Label htmlFor="email">Email</Label>
                  <Input id="email" type="email" placeholder="Your email" />
                </div>
                <div className="grid w-full items-center gap-1.5">
                  <Label htmlFor="message">Message</Label>
                  <Textarea id="message" placeholder="Your message" />
                </div>
              </form>
            </CardContent>
            <CardFooter>
              <Button className="w-full">Send Message</Button>
            </CardFooter>
          </Card>
        ),
      },
    ],
  },
}

// Get all component IDs
export const componentIds = Object.keys(componentRegistry)

// Get a component by ID
export function getComponent(id: string) {
  return componentRegistry[id]
}

// Get a variant by component ID and variant ID
export function getVariant(componentId: string, variantId: string) {
  const component = componentRegistry[componentId]
  if (!component) return null

  return component.variants.find((variant) => variant.id === variantId) || null
}