'use client'

import { useState } from 'react'
import * as motion from 'framer-motion/m'
import { Copy, Check, Tag, Calendar, Percent, DollarSign } from 'lucide-react'
import { useCurrencyStore } from '@/store/currencyStore'

interface CouponCardProps {
  id: number
  code: string
  title: string
  description: string
  discountType: 'percentage' | 'fixed'
  discountValue: number
  minOrder: number
  validUntil: string
  usedCount: number
  totalLimit: number
}

export default function CouponCard({
  code,
  title,
  description,
  discountType,
  discountValue,
  minOrder,
  validUntil,
  usedCount,
  totalLimit,
}: CouponCardProps) {
  const [copied, setCopied] = useState(false)
  const formatAmount = useCurrencyStore((s) => s.formatAmount)

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

  const discountText = discountType === 'percentage' ? `${discountValue}% OFF` : `${formatAmount(discountValue)} OFF`
  const remaining = totalLimit - usedCount

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      whileHover={{ y: -5 }}
      className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-all duration-300"
    >
      <div className="relative">
        {/* Decorative dashed border effect */}
        <div className="absolute left-0 top-1/2 -translate-y-1/2 w-0 h-12 border-l-2 border-dashed border-gray-200" />
        
        <div className="flex flex-col md:flex-row">
          {/* Left - Discount Badge */}
          <div className="md:w-32 bg-gradient-to-br from-primary to-secondary p-4 flex flex-col items-center justify-center text-center">
            <div className="text-2xl font-bold text-white">{discountText}</div>
            <div className="text-xs text-white/80 mt-1">on {minOrder > 0 ? `min. ${formatAmount(minOrder)}` : 'all orders'}</div>
          </div>
          
          {/* Right - Content */}
          <div className="flex-1 p-4">
            <div className="flex flex-wrap justify-between items-start gap-2">
              <div>
                <h3 className="font-semibold text-dark">{title}</h3>
                <p className="text-sm text-gray-custom mt-1">{description}</p>
              </div>
              <div className="text-right">
                <div className="text-xs text-gray-custom flex items-center gap-1">
                  <Calendar size={12} />
                  Valid till {validUntil}
                </div>
                <div className="text-xs text-gray-custom mt-1">
                  {usedCount} / {totalLimit} used
                </div>
              </div>
            </div>
            
            <div className="flex flex-wrap justify-between items-center mt-4 gap-3">
              <div className="flex items-center gap-2">
                <div className="bg-gray-100 px-3 py-1.5 rounded-lg font-mono font-semibold text-primary text-sm">
                  {code}
                </div>
                <button
                  onClick={handleCopy}
                  className="p-1.5 bg-primary/10 text-primary rounded-lg hover:bg-primary hover:text-white transition"
                >
                  {copied ? <Check size={16} /> : <Copy size={16} />}
                </button>
              </div>
              
              <div className="flex items-center gap-2">
                {remaining > 0 ? (
                  <button className="px-4 py-1.5 bg-gradient-primary text-white rounded-lg text-sm font-medium hover:shadow-md transition">
                    Copy & Apply
                  </button>
                ) : (
                  <button className="px-4 py-1.5 bg-gray-100 text-gray-custom rounded-lg text-sm font-medium cursor-not-allowed" disabled>
                    Expired
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </motion.div>
  )
}