'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Share2, Check, Copy, MessageCircle, MessageSquare, Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'
import { broadcastToMattermost, getSettings } from '@/app/actions'
import { toast } from 'sonner'

interface ShareButtonProps {
  orderId: string
  orderTitle?: string
  className?: string
  variant?: 'link' | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost'
  size?: 'default' | 'sm' | 'lg' | 'icon'
  showText?: boolean
}

export function ShareButton({
  orderId,
  orderTitle = 'Pesanan',
  className,
  variant = 'outline',
  size = 'sm',
  showText = true,
}: ShareButtonProps) {
  const [copied, setCopied] = useState(false)
  const [open, setOpen] = useState(false)
  const [broadcasting, setBroadcasting] = useState(false)

  const handleCopyLink = () => {
    const url = `${window.location.origin}/order/${orderId}`
    navigator.clipboard.writeText(url)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  const handleShareWA = async () => {
    const settings = await getSettings()
    let template =
      settings.WHATSAPP_TEMPLATE ||
      'Halo tim! Lagi ada orderan open nih untuk {title}. Mumpung belum di-checkout, yang mau ikutan nitip bisa langsung cek ke sini ya: {url}'

    const url = `${window.location.origin}/order/${orderId}`
    const text = template.replace('{title}', orderTitle).replace('{url}', url)

    window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(text)}`, '_blank')
  }

  const handleBroadcastMattermost = async () => {
    setBroadcasting(true)
    const url = `${window.location.origin}/order/${orderId}`
    const res = await broadcastToMattermost(orderId, url)
    if (res.success) {
      toast.success('Broadcast Terkirim!', {
        description: 'Berhasil mengirim pesan ke Mattermost.',
        duration: 3000,
      })
      setOpen(false)
    } else {
      toast.error('Gagal Broadcast', {
        description: res.error || 'Terjadi kesalahan saat mengirim.',
        duration: 3000,
      })
    }
    setBroadcasting(false)
  }

  return (
    <>
      <Button
        variant={variant}
        size={size}
        className={cn('transition-all', className)}
        title="Bagikan PO"
        onClick={() => setOpen(true)}
      >
        <Share2 className="h-3.5 w-3.5 shrink-0" />
        {showText && <span className="hidden truncate sm:inline">Bagikan</span>}
      </Button>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="rounded-3xl border-slate-200/90 p-6 sm:max-w-xs dark:border-slate-800">
          <DialogTitle className="mb-2 text-center text-xl font-black text-slate-900 dark:text-white">
            Bagikan Pesanan
          </DialogTitle>
          <p className="mb-4 text-center text-sm text-slate-500">
            Pilih metode untuk membagikan PO ini ke teman atau tim Anda.
          </p>

          <div className="space-y-3">
            <Button
              variant="outline"
              onClick={handleCopyLink}
              className="h-11 w-full justify-start gap-3 rounded-xl font-bold text-slate-700 dark:text-slate-300"
            >
              {copied ? (
                <Check className="h-4 w-4 text-emerald-500" />
              ) : (
                <Copy className="h-4 w-4" />
              )}
              {copied ? 'Tautan Disalin!' : 'Salin Tautan'}
            </Button>

            <Button
              onClick={handleShareWA}
              className="h-11 w-full justify-start gap-3 rounded-xl bg-[#25D366] font-bold text-white hover:bg-[#20bd5a]"
            >
              <MessageCircle className="h-4 w-4" />
              Kirim ke WhatsApp
            </Button>

            <Button
              onClick={handleBroadcastMattermost}
              disabled={broadcasting}
              className="h-11 w-full justify-start gap-3 rounded-xl bg-[#0668E1] font-bold text-white hover:bg-[#0557bc]"
            >
              {broadcasting ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <MessageSquare className="h-4 w-4" />
              )}
              {broadcasting ? 'Mengirim...' : 'Broadcast ke Mattermost'}
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
}