import React from 'react';
import { Link } from 'react-router-dom';
import { ChevronRight, Tag } from 'lucide-react';
import { __ } from '@/lib/i18n';
import { Checkbox } from '@/components/ui/checkbox';
import { Badge } from '@/components/ui/badge';
import type { Coupon } from '@/lib/api/coupons';

interface CouponCardProps {
  coupon: Coupon;
  selected?: boolean;
  onSelect?: (id: number) => void;
}

export function CouponCard({ coupon, selected, onSelect }: CouponCardProps) {
  // Format discount type
  const formatDiscountType = (type: string) => {
    switch (type) {
      case 'percent':
        return __('Percentage');
      case 'fixed_cart':
        return __('Fixed Cart');
      case 'fixed_product':
        return __('Fixed Product');
      default:
        return type;
    }
  };

  // Format amount
  const formatAmount = () => {
    if (coupon.discount_type === 'percent') {
      return `${coupon.amount}%`;
    }
    return `Rp${coupon.amount.toLocaleString('id-ID')}`;
  };

  return (
    <Link 
      to={`/coupons/${coupon.id}/edit`}
      className="block bg-card border border-border rounded-xl p-3 hover:bg-accent/50 transition-colors active:scale-[0.98] active:transition-transform shadow-sm"
    >
      <div className="flex items-center gap-3">
        {/* Checkbox */}
        {onSelect && (
          <div 
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              onSelect(coupon.id);
            }}
          >
            <Checkbox
              checked={selected}
              aria-label={__('Select coupon')}
              className="w-5 h-5"
            />
          </div>
        )}

        {/* Content */}
        <div className="flex-1 min-w-0">
          {/* Line 1: Code with Badge */}
          <div className="flex items-center gap-2 mb-2">
            <div className="flex-shrink-0 p-2 rounded-xl bg-primary/10 text-primary flex items-center justify-center font-bold text-base">
              <Tag className="w-4 h-4 mr-1" />
              {coupon.code}
            </div>
            <Badge variant="outline" className="text-xs">
              {formatDiscountType(coupon.discount_type)}
            </Badge>
          </div>

          {/* Line 2: Description */}
          {coupon.description && (
            <div className="text-sm text-muted-foreground truncate mb-2">
              {coupon.description}
            </div>
          )}

          {/* Line 3: Usage & Expiry */}
          <div className="flex items-center gap-3 text-xs text-muted-foreground mb-2">
            <span>
              {__('Usage')}: {coupon.usage_count} / {coupon.usage_limit || '∞'}
            </span>
            {coupon.date_expires && (
              <span>
                {__('Expires')}: {new Date(coupon.date_expires).toLocaleDateString('id-ID')}
              </span>
            )}
          </div>

          {/* Line 4: Amount */}
          <div className="font-bold text-lg tabular-nums text-primary">
            {formatAmount()}
          </div>
        </div>

        {/* Chevron */}
        <ChevronRight className="w-5 h-5 text-muted-foreground flex-shrink-0" />
      </div>
    </Link>
  );
}
