"use client"

import type React from "react"

import { useState } from "react"
import { createPortal } from "react-dom"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { ComponentContainer } from "@/components/ui/component-container"
import { X } from "lucide-react"

// Custom Modal Component
function CustomModal({
  isOpen,
  onClose,
  title,
  description,
  children,
  footer,
}: {
  isOpen: boolean
  onClose: () => void
  title: string
  description?: string
  children: React.ReactNode
  footer?: React.ReactNode
}) {
  if (!isOpen) return null

  return createPortal(
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Overlay */}
      <div className="fixed inset-0 bg-black/80 animate-in fade-in-0" onClick={onClose} />

      {/* Modal Content */}
      <div className="relative bg-[var(--background-primary)] border rounded-lg shadow-lg p-6 w-full max-w-lg mx-4 animate-in zoom-in-95 slide-in-from-bottom-2">
        {/* Close Button */}
        <button
          onClick={onClose}
          className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
        >
          <X className="h-4 w-4" />
          <span className="sr-only">Close</span>
        </button>

        {/* Header */}
        <div className="flex flex-col space-y-1.5 text-center sm:text-left mb-4">
          <h2 className="text-lg font-semibold leading-none tracking-tight">{title}</h2>
          {description && <p className="text-sm text-muted-foreground">{description}</p>}
        </div>

        {/* Content */}
        <div className="mb-4">{children}</div>

        {/* Footer */}
        {footer && <div className="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">{footer}</div>}
      </div>
    </div>,
    document.body,
  )
}

export function ModalsSection() {
  const [basicDialogOpen, setBasicDialogOpen] = useState(false)
  const [alertDialogOpen, setAlertDialogOpen] = useState(false)
  const [controlledDialogOpen, setControlledDialogOpen] = useState(false)

  const basicDialogCode = `import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function BasicDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit Profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile here. Click save when you're done.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-3 py-3">
          <div className="grid grid-cols-4 items-center gap-3">
            <Label htmlFor="name" className="text-right">
              Name
            </Label>
            <Input id="name" defaultValue="John Doe" className="col-span-3" />
          </div>
          <div className="grid grid-cols-4 items-center gap-3">
            <Label htmlFor="username" className="text-right">
              Username
            </Label>
            <Input id="username" defaultValue="@johndoe" className="col-span-3" />
          </div>
        </div>
        <DialogFooter>
          <Button type="submit">Save changes</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}`

  const alertDialogCode = `import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

export function AlertDialogDemo() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Delete Account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}`

  const controlledDialogCode = `import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

export function ControlledDialog() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open Controlled Dialog
      </Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Controlled Dialog</DialogTitle>
            <DialogDescription>
              This dialog's state is controlled programmatically.
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <p>This dialog can be opened and closed using state.</p>
          </div>
          <DialogFooter>
            <Button onClick={() => setOpen(false)}>Close</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}`

  return (
    <section id="modals" className="scroll-mt-12">
      <h2 className="text-3xl font-bold mb-6 text-foreground">Modals</h2>

      <ComponentContainer
        title="Basic Dialog"
        description="A modal dialog for editing user information with form inputs."
        code={basicDialogCode}
      >
        <div className="flex justify-center items-center min-h-[200px]">
          <Button variant="outline" onClick={() => setBasicDialogOpen(true)}>
            Open Dialog
          </Button>

          <CustomModal
            isOpen={basicDialogOpen}
            onClose={() => setBasicDialogOpen(false)}
            title="Edit Profile"
            description="Make changes to your profile here. Click save when you're done."
            footer={
              <Button type="submit" onClick={() => setBasicDialogOpen(false)}>
                Save changes
              </Button>
            }
          >
            <div className="grid gap-3 py-3">
              <div className="grid grid-cols-4 items-center gap-3">
                <Label htmlFor="name" className="text-right">
                  Name
                </Label>
                <Input id="name" defaultValue="John Doe" className="col-span-3" />
              </div>
              <div className="grid grid-cols-4 items-center gap-3">
                <Label htmlFor="username" className="text-right">
                  Username
                </Label>
                <Input id="username" defaultValue="@johndoe" className="col-span-3" />
              </div>
            </div>
          </CustomModal>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Alert Dialog"
        description="A modal dialog for confirming destructive actions with clear messaging."
        code={alertDialogCode}
      >
        <div className="flex justify-center items-center min-h-[200px]">
          <Button variant="destructive" onClick={() => setAlertDialogOpen(true)}>
            Delete Account
          </Button>

          <CustomModal
            isOpen={alertDialogOpen}
            onClose={() => setAlertDialogOpen(false)}
            title="Are you absolutely sure?"
            description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
            footer={
              <>
                <Button variant="outline" onClick={() => setAlertDialogOpen(false)}>
                  Cancel
                </Button>
                <Button onClick={() => setAlertDialogOpen(false)}>Continue</Button>
              </>
            }
          >
            <div className="py-2">
              <p className="text-sm text-muted-foreground">
                Please confirm that you want to delete your account. This action is irreversible.
              </p>
            </div>
          </CustomModal>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Controlled Dialog"
        description="A dialog with programmatically controlled open/close state."
        code={controlledDialogCode}
      >
        <div className="flex justify-center items-center min-h-[200px]">
          <Button variant="outline" onClick={() => setControlledDialogOpen(true)}>
            Open Controlled Dialog
          </Button>

          <CustomModal
            isOpen={controlledDialogOpen}
            onClose={() => setControlledDialogOpen(false)}
            title="Controlled Dialog"
            description="This dialog's state is controlled programmatically."
            footer={<Button onClick={() => setControlledDialogOpen(false)}>Close</Button>}
          >
            <div className="py-4">
              <p>This dialog can be opened and closed using state.</p>
            </div>
          </CustomModal>
        </div>
      </ComponentContainer>
    </section>
  )
}