'use client'

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import { Copy, Check, Share2 } from 'lucide-react'

interface ReferralCodeBoxProps {
  code: string
  referralUrl: string
}

export default function ReferralCodeBox({ code, referralUrl }: ReferralCodeBoxProps) {
  const t = useTranslations('Account.referrals')
  const [copied, setCopied] = useState(false)

  const handleCopyCode = () => {
    navigator.clipboard.writeText(code)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  const handleCopyLink = () => {
    navigator.clipboard.writeText(referralUrl)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  const handleShare = async () => {
    if (navigator.share) {
      await navigator.share({
        title: t('shareTitle'),
        text: t('shareText'),
        url: referralUrl,
      })
    } else {
      handleCopyLink()
    }
  }

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
      <h3 className="font-semibold text-dark mb-4 flex items-center gap-2">
        <Share2 size={18} className="text-primary" />
        {t('shareHeading')}
      </h3>

      <div className="space-y-4">
        {/* Referral Code */}
        <div>
          <label className="block text-sm text-gray-custom mb-2">{t('yourCode')}</label>
          <div className="flex gap-2">
            <div className="flex-1 bg-gray-50 rounded-lg px-4 py-3 font-mono text-lg font-bold text-primary text-center border border-gray-200">
              {code}
            </div>
            <button
              onClick={handleCopyCode}
              className="px-4 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary hover:text-white transition flex items-center gap-2"
            >
              {copied ? <Check size={18} /> : <Copy size={18} />}
              {copied ? t('copied') : t('copy')}
            </button>
          </div>
        </div>

        {/* Referral Link */}
        <div>
          <label className="block text-sm text-gray-custom mb-2">{t('yourLink')}</label>
          <div className="flex gap-2 flex-wrap">
            <div className="flex-1 min-w-[180px] bg-gray-50 rounded-lg px-4 py-2.5 text-sm text-gray-custom truncate border border-gray-200">
              {referralUrl}
            </div>
            <button
              onClick={handleCopyLink}
              className="px-4 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary hover:text-white transition"
            >
              {t('copy')}
            </button>
            <button
              onClick={handleShare}
              className="px-4 py-2 bg-gradient-primary text-white rounded-lg hover:shadow-md transition flex items-center gap-2"
            >
              <Share2 size={16} />
              {t('share')}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}