"use client"

import * as React from "react"
import { Plus } from "lucide-react"
import { useMediaQuery } from "@/hooks/use-media-query"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import UserForm from "./UserForm"

export function UserFormWrapper() {
  const [open, setOpen] = React.useState(false)
  const isDesktop = useMediaQuery("(min-width: 768px)")

  // Common button content
  const TriggerButton = (
    <Button 
      variant="default"
      className="bg-secondary hover:bg-secondary/90 border border-border rounded-lg cursor-pointer h-10"
    >
      <Plus className="text-muted-foreground size-5 md:mr-2" />
      <span className="hidden md:inline text-sm text-muted-foreground">
        Add New User
      </span>
    </Button>
  )

  if (isDesktop) {
    return (
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          {TriggerButton}
        </DialogTrigger>
        <DialogContent className="sm:max-w-106.25 bg-card text-white border-border">
          <DialogHeader>
            <DialogTitle>Add New User</DialogTitle>
          </DialogHeader>
          <UserForm />
        </DialogContent>
      </Dialog>
    )
  }

  return (
    <Drawer open={open} onOpenChange={setOpen}>
      <DrawerTrigger asChild>
        {TriggerButton}
      </DrawerTrigger>
      <DrawerContent className="bg-card border-border text-white max-h-[96dvh]">
        <DrawerHeader className="text-left">
          <DrawerTitle>Add New User</DrawerTitle>
        </DrawerHeader>
        <div className="px-4 overflow-y-auto pb-4">
          <UserForm />
        </div>
      </DrawerContent>
    </Drawer>
  )
}