'use client'
import { useState } from 'react'
import { X, Share2, CheckCircle2 } from 'lucide-react'

interface RecoveryCardProps {
  wallet: string
  savedCount: number
  daysInactive?: number
  campaignName?: string
  onClose: () => void
}

export function RecoveryCard({ wallet, savedCount, daysInactive = 8, campaignName = 'Anti-Churn Gift', onClose }: RecoveryCardProps) {
  const [copied, setCopied] = useState(false)
  const short = `${wallet.slice(0, 6)}...${wallet.slice(-4)}`
  const tweetText = encodeURIComponent(
    `🔥 Wallet ${short} returned after ${daysInactive}d of inactivity — rescued by @torqueprotocol FlowState\n\n` +
    `Campaign: ${campaignName}\n` +
    `FlowState detected the churn risk, fired the incentive, and brought them back. Autonomous DeFi retention works.\n\n` +
    `#Solana #DeFi #Torque`
  )
  const tweetUrl = `https://twitter.com/intent/tweet?text=${tweetText}`

  const handleCopyLink = () => {
    navigator.clipboard.writeText(`https://github.com/MUTHUKUMARAN-K-1/flowstate`)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
      <div className="w-full max-w-sm mx-4">
        {/* The shareable card */}
        <div className="rounded-2xl overflow-hidden shadow-2xl border border-trading-up/30">
          {/* Card header — gradient */}
          <div className="bg-gradient-to-br from-[#0a1628] via-[#0d1f35] to-[#0a2010] p-6 relative">
            <div className="absolute inset-0 opacity-20" style={{backgroundImage:'radial-gradient(circle at 30% 50%, #0ecb81 0%, transparent 60%), radial-gradient(circle at 80% 20%, #FCD535 0%, transparent 50%)'}} />
            <div className="relative">
              <div className="flex items-center gap-2 mb-4">
                <div className="w-6 h-6 rounded bg-brand-yellow flex items-center justify-center">
                  <span className="text-ink text-[10px] font-black">FS</span>
                </div>
                <span className="text-caption text-brand-yellow font-bold tracking-wider uppercase">FlowState × Torque</span>
              </div>
              <div className="text-[40px] mb-2">🔥</div>
              <h2 className="text-display-sm text-white font-bold leading-tight">Wallet Recovered</h2>
              <p className="text-body-sm text-trading-up/80 mt-1">Churn prevented. User retained.</p>
            </div>
          </div>

          {/* Card body */}
          <div className="bg-[#0b1018] p-5 space-y-4">
            <div className="grid grid-cols-3 gap-3">
              <div className="rounded-lg bg-surface-elevated p-3 text-center">
                <p className="text-caption text-muted">Wallet</p>
                <p className="font-mono text-body-sm text-[#eaecef] mt-0.5">{short}</p>
              </div>
              <div className="rounded-lg bg-trading-up/10 border border-trading-up/20 p-3 text-center">
                <p className="text-caption text-trading-up/70">Back After</p>
                <p className="font-mono text-title-sm text-trading-up mt-0.5">{daysInactive}d</p>
              </div>
              <div className="rounded-lg bg-brand-yellow/10 border border-brand-yellow/20 p-3 text-center">
                <p className="text-caption text-brand-yellow/70">Saves</p>
                <p className="font-mono text-title-sm text-brand-yellow mt-0.5">{savedCount}×</p>
              </div>
            </div>

            <div className="rounded-lg bg-surface-elevated p-3">
              <p className="text-caption text-muted mb-1">Triggered by</p>
              <p className="text-body-sm text-[#eaecef] font-medium">{campaignName}</p>
              <p className="text-caption text-muted mt-1">via Torque Protocol · FlowState AI Engine</p>
            </div>

            <div className="flex gap-2">
              <a
                href={tweetUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg bg-white/5 border border-white/20 text-white text-button font-semibold hover:bg-white/10 transition"
              >
                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.259 5.631zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                Share on X
              </a>
              <button
                onClick={handleCopyLink}
                className="flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-surface-elevated border border-hairline-dark text-muted hover:text-[#eaecef] transition text-button"
              >
                {copied ? <CheckCircle2 className="w-4 h-4 text-trading-up" /> : <Share2 className="w-4 h-4" />}
                {copied ? 'Copied' : 'Link'}
              </button>
            </div>
          </div>
        </div>

        <button
          onClick={onClose}
          className="mt-3 w-full py-2 rounded-lg border border-hairline-dark text-muted hover:text-[#eaecef] text-caption transition"
        >
          <X className="w-3.5 h-3.5 inline mr-1.5" />Close
        </button>
      </div>
    </div>
  )
}