import React, { useState, useEffect } from 'react';
import './styles.css';

interface Coupon { id: number; code: string; name: string; discount: number; type: 'percent' | 'fixed'; active: boolean; uses: number; maxUses: number; expiresAt: string; }

export default function CouponManager() {
  const [coupons, setCoupons] = useState<Coupon[]>([]);

  useEffect(() => {
    setCoupons([
      { id: 1, code: 'WELCOME10', name: 'Welcome Discount', discount: 10, type: 'percent', active: true, uses: 23, maxUses: 100, expiresAt: '2024-12-31' },
      { id: 2, code: 'SAVE25', name: 'Fixed $25 Off', discount: 25, type: 'fixed', active: true, uses: 12, maxUses: 50, expiresAt: '2024-06-30' },
      { id: 3, code: 'EXPIRED20', name: 'Old Promo', discount: 20, type: 'percent', active: false, uses: 45, maxUses: 100, expiresAt: '2024-01-31' }
    ]);
  }, []);

  return (
    <div className="coupon-manager">
      <header>
        <h1>🎟️ Coupon Manager</h1>
        <button>➕ Create Coupon</button>
      </header>
      <div className="coupons-grid">
        {coupons.map(coupon => (
          <div key={coupon.id} className="coupon-card">
            <div className="coupon-header">
              <h3>{coupon.code}</h3>
              <span className={`status ${coupon.active ? 'active' : 'inactive'}`}>
                {coupon.active ? '● Active' : '○ Inactive'}
              </span>
            </div>
            <p className="coupon-name">{coupon.name}</p>
            <div className="coupon-discount">
              {coupon.type === 'percent' ? `${coupon.discount}%` : `$${coupon.discount}`} OFF
            </div>
            <div className="coupon-stats">
              <div className="stat"><span>Uses:</span><span>{coupon.uses} / {coupon.maxUses}</span></div>
              <div className="stat"><span>Expires:</span><span>{new Date(coupon.expiresAt).toLocaleDateString()}</span></div>
            </div>
            <div className="coupon-actions">
              <button>✏️ Edit</button>
              <button className="danger">🗑️ Delete</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
