import React, { useState, useEffect } from 'react';
import {
  Tag,
  Plus,
  Search,
  Filter,
  Edit,
  Trash2,
  CheckCircle,
  XCircle,
  Clock,
  Loader2,
  AlertCircle,
  Percent,
  TrendingUp,
  Ban,
  Calendar,
  Check,
} from 'lucide-react';
import {
  Coupon,
  CouponStatus,
  subscribeToCoupons,
  saveCoupon,
  deleteCoupon,
  normalizeCouponCode,
} from '../../services/couponService';

export const CouponManager: React.FC = () => {
  const [coupons, setCoupons] = useState<Coupon[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive' | 'expired'>('all');

  // Add / Edit Modal State
  const [showModal, setShowModal] = useState(false);
  const [editingCoupon, setEditingCoupon] = useState<Coupon | null>(null);

  const [formCode, setFormCode] = useState('');
  const [formPercent, setFormPercent] = useState<number>(10);
  const [formStatus, setFormStatus] = useState<CouponStatus>('active');
  const [formDescription, setFormDescription] = useState('');
  const [formShowOnHome, setFormShowOnHome] = useState<boolean>(true);
  const [formUsageLimit, setFormUsageLimit] = useState<string>(''); // string for easy input
  const [formValidFrom, setFormValidFrom] = useState<string>(new Date().toISOString().split('T')[0]);
  const [formValidUntil, setFormValidUntil] = useState<string>('2027-12-31');
  const [formMinOrder, setFormMinOrder] = useState<number>(0);
  const [formMaxDiscount, setFormMaxDiscount] = useState<string>('');

  const [modalNotice, setModalNotice] = useState<{ type: 'success' | 'error'; msg: string } | null>(null);
  const [isSaving, setIsSaving] = useState(false);

  useEffect(() => {
    setIsLoading(true);
    const unsub = subscribeToCoupons((data) => {
      setCoupons(data);
      setIsLoading(false);
    });
    return () => unsub();
  }, []);

  const todayStr = new Date().toISOString().split('T')[0];

  // Helper to determine effective status
  const getEffectiveStatus = (c: Coupon): CouponStatus => {
    if (c.status === 'inactive') return 'inactive';
    if (c.validUntil && todayStr > c.validUntil) return 'expired';
    if (c.usageLimit !== null && c.usageLimit > 0 && c.totalUsed >= c.usageLimit) return 'expired';
    return 'active';
  };

  // Filtered coupons
  const filteredCoupons = coupons.filter((c) => {
    const code = c.couponCode.toLowerCase();
    const desc = c.description.toLowerCase();
    const q = searchQuery.toLowerCase();
    const matchesSearch = code.includes(q) || desc.includes(q);

    const effStatus = getEffectiveStatus(c);
    const matchesStatus = statusFilter === 'all' || effStatus === statusFilter;

    return matchesSearch && matchesStatus;
  });

  // Metrics
  const totalCouponsCount = coupons.length;
  const activeCouponsCount = coupons.filter((c) => getEffectiveStatus(c) === 'active').length;
  const expiredCouponsCount = coupons.filter((c) => getEffectiveStatus(c) === 'expired').length;
  const totalUsageCount = coupons.reduce((acc, c) => acc + (c.totalUsed || 0), 0);

  const handleOpenAddModal = () => {
    setEditingCoupon(null);
    setFormCode('');
    setFormPercent(10);
    setFormStatus('active');
    setFormDescription('Special discount coupon');
    setFormShowOnHome(true);
    setFormUsageLimit('500');
    setFormValidFrom(new Date().toISOString().split('T')[0]);
    setFormValidUntil('2027-12-31');
    setFormMinOrder(1000);
    setFormMaxDiscount('2000');
    setModalNotice(null);
    setShowModal(true);
  };

  const handleOpenEditModal = (c: Coupon) => {
    setEditingCoupon(c);
    setFormCode(c.couponCode);
    setFormPercent(c.discountPercent);
    setFormStatus(c.status);
    setFormDescription(c.description);
    setFormShowOnHome(c.showOnHome !== false);
    setFormUsageLimit(c.usageLimit !== null ? String(c.usageLimit) : '');
    setFormValidFrom(c.validFrom || new Date().toISOString().split('T')[0]);
    setFormValidUntil(c.validUntil || '2027-12-31');
    setFormMinOrder(c.minimumOrderAmount || 0);
    setFormMaxDiscount(c.maximumDiscount !== null ? String(c.maximumDiscount) : '');
    setModalNotice(null);
    setShowModal(true);
  };

  const handleToggleStatus = async (c: Coupon) => {
    const newStatus: CouponStatus = c.status === 'active' ? 'inactive' : 'active';
    await saveCoupon({
      ...c,
      status: newStatus,
    });
  };

  const handleDelete = async (c: Coupon) => {
    if (confirm(`Are you sure you want to delete coupon code "${c.couponCode}"?`)) {
      await deleteCoupon(c.couponCode);
    }
  };

  const handleSaveSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setModalNotice(null);

    const cleanCode = normalizeCouponCode(formCode);
    if (!cleanCode) {
      setModalNotice({ type: 'error', msg: 'Please enter a valid UPPERCASE coupon code.' });
      return;
    }

    if (formPercent <= 0 || formPercent > 100) {
      setModalNotice({ type: 'error', msg: 'Discount percentage must be between 1% and 100%.' });
      return;
    }

    setIsSaving(true);
    try {
      await saveCoupon({
        id: cleanCode,
        couponCode: cleanCode,
        discountType: 'percentage',
        discountPercent: Number(formPercent),
        status: formStatus,
        description: formDescription.trim(),
        showOnHome: formShowOnHome,
        usageLimit: formUsageLimit.trim() ? Number(formUsageLimit) : null,
        totalUsed: editingCoupon ? editingCoupon.totalUsed : 0,
        validFrom: formValidFrom,
        validUntil: formValidUntil,
        minimumOrderAmount: Number(formMinOrder) || 0,
        maximumDiscount: formMaxDiscount.trim() ? Number(formMaxDiscount) : null,
      });

      setModalNotice({ type: 'success', msg: `Coupon "${cleanCode}" saved successfully!` });
      setTimeout(() => setShowModal(false), 1200);
    } catch (err) {
      console.error('Error saving coupon:', err);
      setModalNotice({ type: 'error', msg: 'Failed to save coupon to database.' });
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div className="space-y-6 font-sans text-stone-800">
      
      {/* Module Header */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 bg-[#1C1814] text-white p-5 rounded-2xl border border-amber-900/40 shadow-lg">
        <div className="space-y-1">
          <div className="flex items-center gap-2 text-[#F8D0BD]">
            <Tag className="w-5 h-5 text-[#C81E3D]" />
            <h2 className="text-xl font-serif font-bold">Coupon Code & Discount Management</h2>
          </div>
          <p className="text-xs text-stone-300">
            Create UPPERCASE percentage coupons with validity dates, minimum cart limits, and usage tracking across all checkouts.
          </p>
        </div>

        <button
          onClick={handleOpenAddModal}
          className="px-4 py-2.5 bg-[#C81E3D] hover:bg-[#a81631] text-white rounded-xl text-xs font-bold transition-all flex items-center gap-2 shadow-md cursor-pointer shrink-0"
        >
          <Plus className="w-4 h-4" />
          <span>Create New Coupon</span>
        </button>
      </div>

      {/* Metrics Cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="bg-white p-4 rounded-2xl border border-stone-200 shadow-xs flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-amber-50 text-amber-800 flex items-center justify-center shrink-0">
            <Tag className="w-5 h-5" />
          </div>
          <div>
            <span className="text-[11px] font-bold text-stone-500 uppercase tracking-wider block">Total Coupons</span>
            <span className="text-xl font-extrabold text-stone-900">{totalCouponsCount}</span>
          </div>
        </div>

        <div className="bg-white p-4 rounded-2xl border border-stone-200 shadow-xs flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0">
            <CheckCircle className="w-5 h-5" />
          </div>
          <div>
            <span className="text-[11px] font-bold text-stone-500 uppercase tracking-wider block">Active Coupons</span>
            <span className="text-xl font-extrabold text-emerald-700">{activeCouponsCount}</span>
          </div>
        </div>

        <div className="bg-white p-4 rounded-2xl border border-stone-200 shadow-xs flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-rose-50 text-rose-600 flex items-center justify-center shrink-0">
            <Clock className="w-5 h-5" />
          </div>
          <div>
            <span className="text-[11px] font-bold text-stone-500 uppercase tracking-wider block">Expired / Limit Reached</span>
            <span className="text-xl font-extrabold text-rose-600">{expiredCouponsCount}</span>
          </div>
        </div>

        <div className="bg-white p-4 rounded-2xl border border-stone-200 shadow-xs flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
            <TrendingUp className="w-5 h-5" />
          </div>
          <div>
            <span className="text-[11px] font-bold text-stone-500 uppercase tracking-wider block">Total Redeemed</span>
            <span className="text-xl font-extrabold text-blue-900">{totalUsageCount}</span>
          </div>
        </div>
      </div>

      {/* Main Table Card */}
      <div className="bg-white rounded-2xl border border-stone-200 shadow-sm p-6 space-y-5">
        
        {/* Search & Filter Bar */}
        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="relative flex-1 max-w-md w-full">
            <Search className="w-4 h-4 text-stone-400 absolute left-3 top-3" />
            <input
              type="text"
              placeholder="Search coupon code (e.g. SAVE10)..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-9 pr-3 py-2 bg-stone-50 border border-stone-200 rounded-xl text-xs uppercase font-mono tracking-wider focus:outline-none focus:ring-2 focus:ring-[#C81E3D]"
            />
          </div>

          <div className="flex items-center gap-2">
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value as any)}
              className="px-3.5 py-2 bg-stone-50 border border-stone-200 rounded-xl text-xs font-medium focus:outline-none focus:ring-2 focus:ring-[#C81E3D]"
            >
              <option value="all">All Coupon Statuses</option>
              <option value="active">Active Only</option>
              <option value="inactive">Inactive</option>
              <option value="expired">Expired</option>
            </select>
          </div>
        </div>

        {/* Coupons Table */}
        <div className="overflow-x-auto border border-stone-200 rounded-2xl">
          <table className="w-full text-left text-xs border-collapse">
            <thead>
              <tr className="bg-stone-100/80 text-stone-700 uppercase text-[10px] tracking-wider font-extrabold border-b border-stone-200">
                <th className="p-3.5">Coupon Code</th>
                <th className="p-3.5">Discount %</th>
                <th className="p-3.5">Status</th>
                <th className="p-3.5">Usage Count</th>
                <th className="p-3.5">Min Order / Max Discount</th>
                <th className="p-3.5">Validity Dates</th>
                <th className="p-3.5 text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-stone-100">
              {isLoading ? (
                <tr>
                  <td colSpan={7} className="p-8 text-center text-stone-500">
                    <div className="flex items-center justify-center gap-2">
                      <Loader2 className="w-5 h-5 animate-spin text-[#C81E3D]" />
                      <span>Loading coupons database...</span>
                    </div>
                  </td>
                </tr>
              ) : filteredCoupons.length === 0 ? (
                <tr>
                  <td colSpan={7} className="p-8 text-center text-stone-500">
                    No coupons found matching your query.
                  </td>
                </tr>
              ) : (
                filteredCoupons.map((c) => {
                  const effStatus = getEffectiveStatus(c);
                  return (
                    <tr key={c.id} className="hover:bg-amber-50/40 transition-colors">
                      <td className="p-3.5 font-mono font-extrabold text-stone-900 text-sm">
                        <div className="flex items-center gap-2">
                          <span className="bg-amber-100/80 text-amber-950 px-2 py-1 rounded-lg border border-amber-300/80">
                            {c.couponCode}
                          </span>
                        </div>
                        {c.description && (
                          <div className="text-[11px] font-sans font-normal text-stone-500 mt-0.5 max-w-[220px] truncate">
                            {c.description}
                          </div>
                        )}
                      </td>

                      <td className="p-3.5 font-bold text-emerald-700 text-sm">
                        {c.discountPercent}% OFF
                      </td>

                      <td className="p-3.5">
                        <span
                          className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase ${
                            effStatus === 'active'
                              ? 'bg-emerald-100 text-emerald-800'
                              : effStatus === 'inactive'
                              ? 'bg-amber-100 text-amber-800'
                              : 'bg-rose-100 text-rose-800'
                          }`}
                        >
                          {effStatus === 'active' ? (
                            <CheckCircle className="w-3 h-3 text-emerald-600" />
                          ) : (
                            <XCircle className="w-3 h-3" />
                          )}
                          <span>{effStatus}</span>
                        </span>
                      </td>

                      <td className="p-3.5 text-stone-800 font-medium">
                        <span className="font-bold">{c.totalUsed}</span>
                        <span className="text-stone-400"> / </span>
                        <span>{c.usageLimit !== null ? c.usageLimit : '∞'}</span>
                      </td>

                      <td className="p-3.5 text-stone-600 text-[11px] space-y-0.5">
                        <div>Min: Rs {c.minimumOrderAmount.toLocaleString('en-PK')}</div>
                        <div>Max Cap: {c.maximumDiscount !== null ? `Rs ${c.maximumDiscount.toLocaleString('en-PK')}` : 'None'}</div>
                      </td>

                      <td className="p-3.5 text-stone-600 text-[11px]">
                        <div>From: {c.validFrom || '2025-01-01'}</div>
                        <div>Until: {c.validUntil || '2030-12-31'}</div>
                      </td>

                      <td className="p-3.5 text-right">
                        <div className="flex items-center justify-end gap-1">
                          <button
                            onClick={() => handleOpenEditModal(c)}
                            title="Edit Coupon"
                            className="p-1.5 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors cursor-pointer"
                          >
                            <Edit className="w-4 h-4" />
                          </button>

                          <button
                            onClick={() => handleToggleStatus(c)}
                            title={c.status === 'active' ? 'Disable Coupon' : 'Enable Coupon'}
                            className={`p-1.5 rounded-lg transition-colors cursor-pointer ${
                              c.status === 'active'
                                ? 'text-amber-600 hover:text-amber-800 hover:bg-amber-50'
                                : 'text-emerald-600 hover:text-emerald-800 hover:bg-emerald-50'
                            }`}
                          >
                            {c.status === 'active' ? <Ban className="w-4 h-4" /> : <CheckCircle className="w-4 h-4" />}
                          </button>

                          <button
                            onClick={() => handleDelete(c)}
                            title="Delete Coupon"
                            className="p-1.5 text-rose-600 hover:text-rose-800 hover:bg-rose-50 rounded-lg transition-colors cursor-pointer"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* CREATE / EDIT COUPON MODAL */}
      {showModal && (
        <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs flex items-center justify-center p-4 animate-in fade-in duration-200">
          <div className="bg-white max-w-lg w-full rounded-2xl p-6 shadow-2xl space-y-4 border border-stone-200">
            <div className="flex justify-between items-center border-b border-stone-200 pb-3">
              <h3 className="text-base font-bold text-stone-900 flex items-center gap-2">
                <Tag className="w-5 h-5 text-[#C81E3D]" />
                <span>{editingCoupon ? `Edit Coupon "${editingCoupon.couponCode}"` : 'Create New Discount Coupon'}</span>
              </h3>
              <button onClick={() => setShowModal(false)} className="text-stone-400 hover:text-stone-700 font-bold">
                ✕
              </button>
            </div>

            <form onSubmit={handleSaveSubmit} className="space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-bold text-stone-700 mb-1">
                    Coupon Code (UPPERCASE) *
                  </label>
                  <input
                    type="text"
                    required
                    placeholder="e.g. SAVE10"
                    value={formCode}
                    onChange={(e) => setFormCode(e.target.value.toUpperCase())}
                    className="w-full px-3.5 py-2.5 bg-stone-50 border border-stone-200 rounded-xl text-xs uppercase font-mono tracking-wider font-extrabold focus:ring-2 focus:ring-[#C81E3D] outline-none"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold text-stone-700 mb-1">
                    Discount Percentage (%) *
                  </label>
                  <input
                    type="number"
                    required
                    min={1}
                    max={100}
                    placeholder="10"
                    value={formPercent}
                    onChange={(e) => setFormPercent(Number(e.target.value))}
                    className="w-full px-3.5 py-2.5 bg-stone-50 border border-stone-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-[#C81E3D] outline-none"
                  />
                </div>
              </div>

              <div>
                <label className="block text-xs font-bold text-stone-700 mb-1">
                  Coupon Description
                </label>
                <input
                  type="text"
                  placeholder="e.g. Get 10% OFF on all natural & organic products"
                  value={formDescription}
                  onChange={(e) => setFormDescription(e.target.value)}
                  className="w-full px-3.5 py-2 bg-stone-50 border border-stone-200 rounded-xl text-xs focus:ring-2 focus:ring-[#C81E3D] outline-none"
                />
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-bold text-stone-700 mb-1">
                    Minimum Cart Subtotal (PKR)
                  </label>
                  <input
                    type="number"
                    min={0}
                    placeholder="1000"
                    value={formMinOrder}
                    onChange={(e) => setFormMinOrder(Number(e.target.value))}
                    className="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-xl text-xs focus:ring-2 focus:ring-[#C81E3D] outline-none"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold text-stone-700 mb-1">
                    Maximum Discount Cap (PKR)
                  </label>
                  <input
                    type="number"
                    placeholder="Leave empty for no limit"
                    value={formMaxDiscount}
                    onChange={(e) => setFormMaxDiscount(e.target.value)}
                    className="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-xl text-xs focus:ring-2 focus:ring-[#C81E3D] outline-none"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div>
                  <label className="block text-xs font-bold text-stone-700 mb-1">
                    Usage Limit (Times)
                  </label>
                  <input
                    type="number"
                    placeholder="e.g. 500 or blank"
                    value={formUsageLimit}
                    onChange={(e) => setFormUsageLimit(e.target.value)}
                    className="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-xl text-xs focus:ring-2 focus:ring-[#C81E3D] outline-none"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold text-stone-700 mb-1">
                    Valid From Date
                  </label>
                  <input
                    type="date"
                    value={formValidFrom}
                    onChange={(e) => setFormValidFrom(e.target.value)}
                    className="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-xl text-xs focus:ring-2 focus:ring-[#C81E3D] outline-none"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold text-stone-700 mb-1">
                    Valid Until Date
                  </label>
                  <input
                    type="date"
                    value={formValidUntil}
                    onChange={(e) => setFormValidUntil(e.target.value)}
                    className="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-xl text-xs focus:ring-2 focus:ring-[#C81E3D] outline-none"
                  />
                </div>
              </div>

              <div>
                <label className="block text-xs font-bold text-stone-700 mb-1">Status & Display Settings</label>
                <div className="flex flex-wrap items-center gap-6 p-3 bg-stone-50 border border-stone-200 rounded-xl">
                  <div className="flex gap-4">
                    <label className="flex items-center gap-1.5 text-xs font-bold text-emerald-800 cursor-pointer">
                      <input
                        type="radio"
                        name="status"
                        value="active"
                        checked={formStatus === 'active'}
                        onChange={() => setFormStatus('active')}
                        className="accent-emerald-600"
                      />
                      <span>Active</span>
                    </label>
                    <label className="flex items-center gap-1.5 text-xs font-bold text-stone-600 cursor-pointer">
                      <input
                        type="radio"
                        name="status"
                        value="inactive"
                        checked={formStatus === 'inactive'}
                        onChange={() => setFormStatus('inactive')}
                        className="accent-stone-600"
                      />
                      <span>Inactive</span>
                    </label>
                  </div>

                  <label className="flex items-center gap-2 text-xs font-bold text-stone-800 cursor-pointer border-l border-stone-300 pl-4">
                    <input
                      type="checkbox"
                      checked={formShowOnHome}
                      onChange={(e) => setFormShowOnHome(e.target.checked)}
                      className="w-4 h-4 rounded text-[#C81E3D] accent-[#C81E3D] cursor-pointer"
                    />
                    <span>Show on Top Announcement Bar / Home</span>
                  </label>
                </div>
              </div>

              {modalNotice && (
                <div
                  className={`p-3 rounded-xl text-xs font-semibold ${
                    modalNotice.type === 'success'
                      ? 'bg-emerald-50 text-emerald-800 border border-emerald-200'
                      : 'bg-rose-50 text-rose-800 border border-rose-200'
                  }`}
                >
                  {modalNotice.msg}
                </div>
              )}

              <div className="flex justify-end gap-2 pt-2 border-t border-stone-200">
                <button
                  type="button"
                  onClick={() => setShowModal(false)}
                  className="px-4 py-2 bg-stone-100 hover:bg-stone-200 text-stone-700 rounded-xl text-xs font-bold cursor-pointer"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={isSaving}
                  className="px-5 py-2 bg-[#C81E3D] hover:bg-[#a81631] text-white rounded-xl text-xs font-bold flex items-center gap-1.5 cursor-pointer disabled:opacity-50"
                >
                  {isSaving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Tag className="w-4 h-4" />}
                  <span>Save Coupon Code</span>
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

    </div>
  );
};