import React, { useState, useEffect } from 'react';
import { Tag, Calendar, AlertCircle, Plus, Edit2, Trash2 } from 'lucide-react';
import api from '@/lib/api';
import { showToast } from '@/components/common/Toast';

export default function CouponManager() {
  const [coupons, setCoupons] = useState<any[]>([]);
  const [form, setForm] = useState({
    id: '',
    code: '',
    discountType: 'PERCENTAGE',
    discountValue: '',
    minOrderValue: '',
    maxDiscount: '',
    usageLimit: '',
    expiresAt: '',
    isActive: true,
  });
  const [isEditing, setIsEditing] = useState(false);

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

  const fetchCoupons = async () => {
    try {
      const res = await api.get('/admin/coupons');
      setCoupons(res.data?.data?.coupons || []);
    } catch (err: any) {
      showToast('Failed to load coupons list', 'error');
    }
  };

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      if (isEditing) {
        await api.put(`/admin/coupons/${form.id}`, form);
        showToast('Coupon settings updated successfully!', 'success');
      } else {
        await api.post('/admin/coupons', form);
        showToast('Coupon rule registered successfully!', 'success');
      }
      resetForm();
      fetchCoupons();
    } catch (err: any) {
      showToast(err.response?.data?.message || 'Save failed', 'error');
    }
  };

  const handleEdit = (coupon: any) => {
    setForm({
      id: coupon.id,
      code: coupon.code,
      discountType: coupon.discountType,
      discountValue: String(coupon.discountValue),
      minOrderValue: coupon.minOrderValue ? String(coupon.minOrderValue) : '',
      maxDiscount: coupon.maxDiscount ? String(coupon.maxDiscount) : '',
      usageLimit: coupon.usageLimit ? String(coupon.usageLimit) : '',
      expiresAt: coupon.expiresAt ? new Date(coupon.expiresAt).toISOString().split('T')[0] : '',
      isActive: coupon.isActive,
    });
    setIsEditing(true);
  };

  const handleDelete = async (id: string) => {
    if (!confirm('Are you sure you want to delete this coupon?')) return;
    try {
      await api.delete(`/admin/coupons/${id}`);
      showToast('Coupon rule deleted successfully', 'success');
      fetchCoupons();
    } catch (err: any) {
      showToast('Delete failed', 'error');
    }
  };

  const resetForm = () => {
    setForm({
      id: '',
      code: '',
      discountType: 'PERCENTAGE',
      discountValue: '',
      minOrderValue: '',
      maxDiscount: '',
      usageLimit: '',
      expiresAt: '',
      isActive: true,
    });
    setIsEditing(false);
  };

  return (
    <div className="bg-white dark:bg-zinc-900 rounded-3xl border border-zinc-200 dark:border-zinc-800 p-6 sm:p-8 space-y-8 shadow-sm">
      <div className="border-b border-zinc-100 dark:border-zinc-800 pb-4">
        <h2 className="text-xl font-extrabold flex items-center gap-2">
          <Tag className="w-5.5 h-5.5 text-[#701a08]" /> Coupons & Discount Campaigns
        </h2>
        <p className="text-xs text-zinc-500 mt-1">
          Configure percentage discounts, flat fee coupons, absolute validation dates, and custom usage limits.
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Left Side: Create / Edit Form */}
        <form onSubmit={handleSave} className="space-y-4 text-xs font-semibold">
          <h3 className="font-extrabold text-sm border-b pb-2">
            {isEditing ? 'Modify Coupon settings' : 'Add Coupon code'}
          </h3>

          <div>
            <label className="text-zinc-500 block mb-1">Coupon Code</label>
            <input
              type="text"
              required
              value={form.code}
              onChange={(e) => setForm({ ...form, code: e.target.value.toUpperCase() })}
              placeholder="e.g. VEDIC25"
              className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 uppercase font-mono"
            />
          </div>

          <div>
            <label className="text-zinc-500 block mb-1">Discount Type</label>
            <select
              value={form.discountType}
              onChange={(e) => setForm({ ...form, discountType: e.target.value })}
              className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
            >
              <option value="PERCENTAGE">Percentage (%)</option>
              <option value="FIXED_AMOUNT">Fixed Value (INR)</option>
            </select>
          </div>

          <div>
            <label className="text-zinc-500 block mb-1">Value (Discount magnitude)</label>
            <input
              type="number"
              required
              value={form.discountValue}
              onChange={(e) => setForm({ ...form, discountValue: e.target.value })}
              placeholder="e.g. 15 or 150"
              className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
            />
          </div>

          <div>
            <label className="text-zinc-500 block mb-1">Minimum Order Value (INR)</label>
            <input
              type="number"
              value={form.minOrderValue}
              onChange={(e) => setForm({ ...form, minOrderValue: e.target.value })}
              placeholder="e.g. 500"
              className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
            />
          </div>

          <div>
            <label className="text-zinc-500 block mb-1">Max Discount Cap (For % type only)</label>
            <input
              type="number"
              value={form.maxDiscount}
              onChange={(e) => setForm({ ...form, maxDiscount: e.target.value })}
              placeholder="e.g. 250"
              className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
            />
          </div>

          <div>
            <label className="text-zinc-500 block mb-1">Usage Limit (Max redemption count)</label>
            <input
              type="number"
              value={form.usageLimit}
              onChange={(e) => setForm({ ...form, usageLimit: e.target.value })}
              placeholder="e.g. 100"
              className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
            />
          </div>

          <div>
            <label className="text-zinc-500 block mb-1">Expiry Date</label>
            <input
              type="date"
              required
              value={form.expiresAt}
              onChange={(e) => setForm({ ...form, expiresAt: e.target.value })}
              className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-mono"
            />
          </div>

          <div className="flex justify-between pt-2">
            {isEditing && (
              <button
                type="button"
                onClick={resetForm}
                className="px-4 py-2 rounded-xl border border-zinc-300 hover:bg-zinc-50 text-zinc-600"
              >
                Cancel
              </button>
            )}
            <button
              type="submit"
              className="px-6 py-2.5 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white font-extrabold flex items-center gap-1 shadow-sm"
            >
              {isEditing ? 'Save Settings' : 'Create Coupon'}
            </button>
          </div>
        </form>

        {/* Right Side: Coupons List */}
        <div className="lg:col-span-2 overflow-x-auto border border-zinc-200 dark:border-zinc-800 rounded-2xl">
          <table className="w-full text-xs font-semibold text-left">
            <thead className="bg-zinc-50 dark:bg-zinc-850 border-b border-zinc-200 dark:border-zinc-800 text-[10px] uppercase font-bold text-zinc-400">
              <tr>
                <th className="p-4">Code</th>
                <th className="p-4">Discount</th>
                <th className="p-4">Redeemed</th>
                <th className="p-4">Expiry</th>
                <th className="p-4">Actions</th>
              </tr>
            </thead>
            <tbody>
              {coupons.map((c) => (
                <tr key={c.id} className="border-b border-zinc-100 dark:border-zinc-800 hover:bg-zinc-50/50">
                  <td className="p-4 font-mono font-bold text-zinc-950 dark:text-zinc-100">{c.code}</td>
                  <td className="p-4 text-zinc-900 dark:text-zinc-100">
                    {c.discountType === 'PERCENTAGE' ? `${c.discountValue}%` : `₹${c.discountValue}`}
                  </td>
                  <td className="p-4 text-zinc-500 font-semibold">{c.usageCount} / {c.usageLimit || '∞'}</td>
                  <td className="p-4 text-zinc-500 font-mono">{new Date(c.expiresAt).toLocaleDateString()}</td>
                  <td className="p-4 flex gap-2">
                    <button
                      onClick={() => handleEdit(c)}
                      className="p-1.5 rounded bg-zinc-100 hover:bg-zinc-200 text-zinc-600"
                    >
                      <Edit2 className="w-3.5 h-3.5" />
                    </button>
                    <button
                      onClick={() => handleDelete(c.id)}
                      className="p-1.5 rounded bg-red-50 hover:bg-red-100 text-red-600"
                    >
                      <Trash2 className="w-3.5 h-3.5" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}