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

export function ShortcodeTab() {
  const [copied, setCopied] = useState(false)

  const shortcode = '[SWIFT_COMMERCE_currency_switcher]'
  
  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(shortcode)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      // Fallback for browsers that don't support clipboard API
      const textArea = document.createElement('textarea')
      textArea.value = shortcode
      document.body.appendChild(textArea)
      textArea.select()
      document.execCommand('copy')
      document.body.removeChild(textArea)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }
  }

  return (
    <SettingsGrid>
      {/* Shortcode */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Code className="h-5 w-5" />
            Shortcode
          </CardTitle>
          <CardDescription>
            Use this shortcode to display the currency switcher anywhere on your site
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex items-center gap-3 p-4 rounded-lg bg-muted font-mono">
            <code className="flex-1 text-sm">{shortcode}</code>
            <Button variant="outline" size="sm" onClick={handleCopy}>
              {copied ? (
                <>
                  <Check className="h-4 w-4 mr-2" />
                  Copied!
                </>
              ) : (
                <>
                  <Copy className="h-4 w-4 mr-2" />
                  Copy
                </>
              )}
            </Button>
          </div>
          <p className="text-sm text-muted-foreground mt-3">
            You can also use the Elementor widget for more advanced placement options.
          </p>
        </CardContent>
      </Card>
    </SettingsGrid>
  )
}