import { useState, useEffect } from 'react';

interface Coupon {
  id: number;
  code: string;
  discount: string;
  expirationDate: string | null;
  usageCount: number;
}

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

  useEffect(() => {
    const mockCoupons: Coupon[] = [
      { id: 1, code: 'SAVE10', discount: '10%', expirationDate: '2024-12-31', usageCount: 15 },
      { id: 2, code: 'FIRST20', discount: '20%', expirationDate: null, usageCount: 8 },
      { id: 3, code: 'FLAT5', discount: '$5.00', expirationDate: '2024-06-30', usageCount: 42 },
    ];
    setCoupons(mockCoupons);
    setLoading(false);
  }, []);

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-3xl font-bold text-blue-400">Coupon Manager</h1>
          <button className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-medium">
            + New Coupon
          </button>
        </div>

        {loading ? (
          <div className="text-center py-12">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-400 mx-auto"></div>
          </div>
        ) : (
          <div className="bg-gray-800 rounded-lg overflow-hidden">
            <table className="w-full">
              <thead className="bg-gray-700">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase">Code</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase">Discount</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase">Expires</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase">Usage</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-700">
                {coupons.map((coupon) => (
                  <tr key={coupon.id} className="hover:bg-gray-750">
                    <td className="px-6 py-4 font-mono font-semibold">{coupon.code}</td>
                    <td className="px-6 py-4 text-green-400 font-semibold">{coupon.discount}</td>
                    <td className="px-6 py-4">{coupon.expirationDate || 'No expiration'}</td>
                    <td className="px-6 py-4">{coupon.usageCount} uses</td>
                    <td className="px-6 py-4 space-x-3">
                      <button className="text-blue-400 hover:text-blue-300">Edit</button>
                      <button className="text-red-400 hover:text-red-300">Delete</button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}
