import React from 'react';
import { Gift, Plus, Trash2 } from 'lucide-react';

interface MarketingManagerProps {
  settings: any;
  updateSettings: (updates: any) => void;
  isSaving: boolean;
  saveSiteSettings: (updates?: any) => Promise<void>;
}

export default function MarketingManager({ settings, updateSettings, isSaving, saveSiteSettings }: MarketingManagerProps) {
  return (
    <>

            <div className="space-y-6 animate-fade-in-up">
              <div className="bg-white dark:bg-slate-900 rounded-[32px] p-8 shadow-sm border border-slate-200">
                <div className="flex flex-col md:flex-row items-center justify-between gap-4 mb-8 pb-8 border-b border-slate-100">
                  <div className="flex items-center gap-4">
                    <div className="w-14 h-14 bg-red-50 text-red-600 rounded-2xl flex items-center justify-center shrink-0">
                      <Gift size={28} />
                    </div>
                    <div>
                      <h2 className="text-2xl font-black text-slate-800">Coupon Management</h2>
                      <p className="text-sm text-slate-500 font-medium">Create multiple coupons and choose which to display on home pages.</p>
                    </div>
                  </div>
                  <button
                    onClick={() => {
                      const newCoupons = [...(settings.marketingCoupons || []), { id: Date.now().toString(), code: '', discountDesc: '', showOnHome: false }];
                      updateSettings({ ...settings, marketingCoupons: newCoupons });
                    }}
                    className="px-6 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-xl transition-colors flex items-center gap-2"
                  >
                    <Plus size={18} /> Add Coupon
                  </button>
                </div>

                <div className="space-y-4 max-w-4xl">
                  {(settings.marketingCoupons || []).map((coupon: any, idx: number) => (
                    <div key={coupon.id} className="p-6 bg-slate-50 rounded-2xl border border-slate-200 relative group flex flex-col md:flex-row gap-6 items-start md:items-center">
                      <button
                        onClick={() => {
                          const newCoupons = (settings.marketingCoupons || []).filter((_: any, i: number) => i !== idx);
                          updateSettings({ ...settings, marketingCoupons: newCoupons });
                        }}
                        className="absolute top-4 right-4 text-slate-500 dark:text-slate-400 hover:text-red-500 transition-colors"
                      >
                        <Trash2 size={18} />
                      </button>

                      <div className="flex-grow space-y-4 w-full md:w-auto mt-4 md:mt-0">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div>
                            <label className="block text-xs font-bold text-slate-500 mb-1 uppercase tracking-wider">Coupon Code</label>
                            <input
                              type="text"
                              placeholder="e.g. SAVE20"
                              value={coupon.code}
                              onChange={(e) => {
                                const newCoupons = [...(settings.marketingCoupons || [])];
                                newCoupons[idx].code = e.target.value;
                                updateSettings({ ...settings, marketingCoupons: newCoupons });
                              }}
                              className="w-full h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-red-600 outline-none uppercase font-bold bg-white"
                            />
                          </div>
                          <div>
                            <label className="block text-xs font-bold text-slate-500 mb-1 uppercase tracking-wider">Discount Text</label>
                            <input
                              type="text"
                              placeholder="e.g. 20% OFF"
                              value={coupon.discountDesc}
                              onChange={(e) => {
                                const newCoupons = [...(settings.marketingCoupons || [])];
                                newCoupons[idx].discountDesc = e.target.value;
                                updateSettings({ ...settings, marketingCoupons: newCoupons });
                              }}
                              className="w-full h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-red-600 outline-none font-medium bg-white"
                            />
                          </div>
                        </div>
                      </div>

                      <div className="flex items-center gap-3 bg-white p-3 rounded-xl border py-4 md:py-3 w-full md:w-auto shrink-0 justify-between md:justify-start">
                        <div>
                          <p className="font-bold text-sm text-slate-800">Show on Home</p>
                          <p className="text-[10px] text-slate-500 max-w-[120px]">Show globally</p>
                        </div>
                        <label className="relative inline-flex items-center cursor-pointer">
                          <input
                            type="checkbox"
                            className="sr-only peer"
                            checked={coupon.showOnHome}
                            onChange={(e) => {
                              const newCoupons = [...(settings.marketingCoupons || [])];
                              newCoupons[idx].showOnHome = e.target.checked;
                              updateSettings({ ...settings, marketingCoupons: newCoupons });
                            }}
                          />
                          <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
                        </label>
                      </div>
                    </div>
                  ))}

                  {!(settings.marketingCoupons && settings.marketingCoupons.length > 0) && (
                    <div className="text-center py-10 bg-slate-50 rounded-2xl border-2 border-dashed border-slate-200">
                      <Gift size={32} className="mx-auto text-slate-500 dark:text-slate-300 mb-3" />
                      <p className="text-slate-500 font-medium pb-2">No coupons generated yet.</p>
                      <button
                        onClick={() => {
                          const newCoupons = [...(settings.marketingCoupons || []), { id: Date.now().toString(), code: '', discountDesc: '', showOnHome: false }];
                          updateSettings({ ...settings, marketingCoupons: newCoupons });
                        }}
                        className="px-6 py-2 bg-white border border-slate-200 shadow-sm text-slate-600 font-bold rounded-lg text-sm"
                      >
                        Create Your First Coupon
                      </button>
                    </div>
                  )}

                  <div className="flex flex-col md:flex-row gap-4 items-center mt-6">
                    <button
                      id="saveSettingsBtn"
                      onClick={() => saveSiteSettings({ marketingCoupons: settings.marketingCoupons })}
                      className="px-10 py-4 bg-red-600 hover:bg-red-700 text-white font-black rounded-2xl shadow-xl shadow-red-600/20 transition-all w-full md:w-auto"
                    >
                      Save All Coupons
                    </button>
                  </div>
                </div>
              </div>
            </div>

    </>
  );
}
