import { useEffect, useState } from "react"
import { Check, Copy } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

const shortcode = "[swift_commerce_search]"

export function AjaxSearchShortcodeTab() {
  const [copied, setCopied] = useState(false)
  const [copyError, setCopyError] = useState(false)

  useEffect(() => {
    if (!copied) return
    const timeout = window.setTimeout(() => setCopied(false), 2000)
    return () => window.clearTimeout(timeout)
  }, [copied])

  const copyShortcode = async () => {
    setCopyError(false)
    try {
      await navigator.clipboard.writeText(shortcode)
      setCopied(true)
    } catch {
      // HTTP installations may not provide the Clipboard API.
      const focusedElement = document.activeElement
      const textArea = document.createElement("textarea")
      textArea.value = shortcode
      textArea.style.position = "fixed"
      textArea.style.opacity = "0"
      document.body.appendChild(textArea)
      textArea.select()
      try {
        const success = document.execCommand("copy")
        setCopied(success)
        setCopyError(!success)
      } catch {
        setCopyError(true)
      } finally {
        textArea.remove()
        if (focusedElement instanceof HTMLElement) focusedElement.focus()
      }
    }
  }

  return (
    <Card className="w-full min-w-0 max-w-4xl shadow-none">
      <CardHeader>
        <CardTitle role="heading" aria-level={2} className="text-base">Shortcode</CardTitle>
        <CardDescription>
          Add live product search to a page, post, or widget area.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="flex flex-wrap items-center gap-3 rounded-lg border bg-muted/50 p-3">
          <code className="min-w-0 flex-1 select-all break-all font-mono text-sm">{shortcode}</code>
          <Button type="button" variant="outline" size="sm" onClick={copyShortcode} className="shrink-0">
            {copied ? <Check className="mr-2 h-4 w-4" aria-hidden="true" /> : <Copy className="mr-2 h-4 w-4" aria-hidden="true" />}
            <span role="status" aria-live="polite">{copied ? "Copied!" : "Copy"}</span>
          </Button>
        </div>
        {copyError && <p role="alert" className="text-sm text-destructive">Could not copy. Select the shortcode and copy it manually.</p>}
        <p className="text-sm text-muted-foreground">
          Paste this into a WordPress Shortcode block. It uses your saved General, Search, and Appearance settings.
          For Elementor, you can also use the Ajax Search widget.
        </p>
      </CardContent>
    </Card>
  )
}