import { useEffect, useState } from 'react';
import api from '../../services/api';
import { Trash2, Plus, Tag } from 'lucide-react';
import { formatDate } from '../../utils/formatters';

interface Coupon {
  id: number;
  code: string;
  discountType: 'Percentage' | 'Fixed';
  discountValue: number;
  expiryDate?: string;
  usageCount: number;
  maxUsages?: number;
  isActive: boolean;
}

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

  // Form State
  const [newCoupon, setNewCoupon] = useState({
    code: '',
    discountType: 'Percentage',
    discountValue: 0,
    expiryDate: '',
    maxUsages: '',
    maxUsagesPerUser: ''
  });

  useEffect(() => {
    loadCoupons();
  }, []);

  const loadCoupons = async () => {
    try {
      const res = await api.get('/coupons');
      setCoupons(res.data);
    } catch (error) {
      console.error("Error loading coupons", error);
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async (id: number) => {
    if (!confirm('¿Eliminar cupón?')) return;
    try {
      await api.delete(`/coupons/${id}`);
      loadCoupons();
    } catch (error) {
      alert("Error al eliminar");
    }
  };

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const payload = {
        ...newCoupon,
        maxUsages: newCoupon.maxUsages ? parseInt(newCoupon.maxUsages) : null,
        maxUsagesPerUser: newCoupon.maxUsagesPerUser ? parseInt(newCoupon.maxUsagesPerUser) : null,
        expiryDate: newCoupon.expiryDate ? newCoupon.expiryDate : null
      };
      await api.post('/coupons', payload);
      setShowForm(false);
      setNewCoupon({ code: '', discountType: 'Percentage', discountValue: 0, expiryDate: '', maxUsages: '', maxUsagesPerUser: '' });
      loadCoupons();
    } catch (error) {
      alert("Error al crear cupón");
    }
  };

  if (loading) return <div className="p-10 text-center">Cargando...</div>;

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-slate-800">Gestión de Cupones</h1>
        <button
          onClick={() => setShowForm(!showForm)}
          className="bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-blue-700 transition"
        >
          <Plus size={18} /> Nuevo Cupón
        </button>
      </div>

      {showForm && (
        <form onSubmit={handleCreate} className="bg-white p-6 rounded-xl shadow border border-slate-100 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4 items-end">
          <div>
            <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Código</label>
            <input
              required
              type="text"
              className="w-full border p-2 rounded"
              placeholder="Ej: CUPON2026"
              value={newCoupon.code}
              onChange={e => setNewCoupon({ ...newCoupon, code: e.target.value })}
            />
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Tipo Descuento</label>
            <select
              className="w-full border p-2 rounded"
              value={newCoupon.discountType}
              onChange={e => setNewCoupon({ ...newCoupon, discountType: e.target.value })}
            >
              <option value="Percentage">Porcentaje (%)</option>
              <option value="Fixed">Monto Fijo ($)</option>
            </select>
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Valor</label>
            <input
              required
              type="number"
              className="w-full border p-2 rounded"
              value={newCoupon.discountValue}
              onChange={e => setNewCoupon({ ...newCoupon, discountValue: Number(e.target.value) })}
            />
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Expiración (Opcional)</label>
            <input
              type="date"
              className="w-full border p-2 rounded"
              value={newCoupon.expiryDate}
              onChange={e => setNewCoupon({ ...newCoupon, expiryDate: e.target.value })}
            />
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Usos Máx.</label>
            <input
              type="number"
              className="w-full border p-2 rounded"
              placeholder="Ilimitado"
              value={newCoupon.maxUsages}
              onChange={e => setNewCoupon({ ...newCoupon, maxUsages: e.target.value })}
            />
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Límite x Usuario</label>
            <input
              type="number"
              className="w-full border p-2 rounded"
              placeholder="Ilimitado"
              value={newCoupon.maxUsagesPerUser}
              onChange={e => setNewCoupon({ ...newCoupon, maxUsagesPerUser: e.target.value })}
            />
          </div>
          <button type="submit" className="bg-emerald-500 text-white p-2 rounded font-bold hover:bg-emerald-600">
            Guardar
          </button>
        </form>
      )}

      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <table className="w-full text-left">
          <thead className="bg-slate-50 border-b border-slate-200">
            <tr>
              <th className="p-4 font-bold text-slate-600 text-xs uppercase">Código</th>
              <th className="p-4 font-bold text-slate-600 text-xs uppercase">Descuento</th>
              <th className="p-4 font-bold text-slate-600 text-xs uppercase">Usos</th>
              <th className="p-4 font-bold text-slate-600 text-xs uppercase">Expira</th>
              <th className="p-4 font-bold text-slate-600 text-xs uppercase text-right">Acciones</th>
            </tr>
          </thead>
          <tbody>
            {coupons.map(coupon => (
              <tr key={coupon.id} className="border-b border-slate-100 last:border-0 hover:bg-slate-50">
                <td className="p-4 font-mono font-bold text-slate-800 flex items-center gap-2">
                  <Tag size={14} className="text-blue-500" />
                  {coupon.code}
                </td>
                <td className="p-4 text-sm text-slate-600">
                  {coupon.discountType === 'Percentage' ? `${coupon.discountValue}%` : `$${coupon.discountValue}`}
                </td>
                <td className="p-4 text-sm text-slate-600">
                  {coupon.usageCount} {coupon.maxUsages ? `/ ${coupon.maxUsages}` : ''}
                </td>
                <td className="p-4 text-sm text-slate-600">
                  {coupon.expiryDate ? formatDate(coupon.expiryDate) : '-'}
                </td>
                <td className="p-4 text-right">
                  <button
                    onClick={() => handleDelete(coupon.id)}
                    className="text-rose-400 hover:text-rose-600 transition"
                  >
                    <Trash2 size={18} />
                  </button>
                </td>
              </tr>
            ))}
            {coupons.length === 0 && (
              <tr>
                <td colSpan={5} className="p-8 text-center text-slate-400 text-sm">No hay cupones activos.</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}