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

export default function BannerManager() {
  const [banners, setBanners] = useState<any[]>([]);
  const [form, setForm] = useState({
    id: '',
    title: '',
    imageUrl: '',
    linkUrl: '',
    sortOrder: 0,
    isActive: true,
  });
  const [isEditing, setIsEditing] = useState(false);
  const [uploading, setUploading] = useState(false);

  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (file.size > 8 * 1024 * 1024) {
      showToast('Image must be 8MB or smaller', 'error');
      return;
    }

    setUploading(true);
    const reader = new FileReader();
    reader.onload = async () => {
      try {
        const res = await api.post('/upload/image', {
          dataUrl: reader.result as string,
          fileName: file.name,
        });
        const uploadedUrl = res.data?.data?.url;
        if (uploadedUrl) {
          setForm((prev) => ({ ...prev, imageUrl: uploadedUrl }));
          showToast('Image uploaded successfully!', 'success');
        }
      } catch (err: any) {
        showToast(err.response?.data?.message || 'Upload failed', 'error');
      } finally {
        setUploading(false);
      }
    };
    reader.onerror = () => {
      showToast('Error reading file', 'error');
      setUploading(false);
    };
    reader.readAsDataURL(file);
  };

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

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

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      if (isEditing) {
        await api.put(`/admin/banners/${form.id}`, form);
        showToast('Banner updated successfully!', 'success');
      } else {
        await api.post('/admin/banners', form);
        showToast('Banner created successfully!', 'success');
      }
      resetForm();
      fetchBanners();
    } catch (err: any) {
      showToast('Failed to save banner settings', 'error');
    }
  };

  const handleEdit = (banner: any) => {
    setForm({
      id: banner.id,
      title: banner.title,
      imageUrl: banner.imageUrl,
      linkUrl: banner.linkUrl || '',
      sortOrder: banner.sortOrder,
      isActive: banner.isActive,
    });
    setIsEditing(true);
  };

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

  const resetForm = () => {
    setForm({
      id: '',
      title: '',
      imageUrl: '',
      linkUrl: '',
      sortOrder: 0,
      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">
          <Layers className="w-5.5 h-5.5 text-[#701a08]" /> Banner & Slider Campaigns
        </h2>
        <p className="text-xs text-zinc-500 mt-1">
          Configure homepage sliders, active promotion banners, and priority sort ordering.
        </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 Banner details' : 'Add Banner card'}
          </h3>

          <div>
            <label className="text-zinc-500 block mb-1">Banner Title</label>
            <input
              type="text"
              required
              value={form.title}
              onChange={(e) => setForm({ ...form, title: e.target.value })}
              placeholder="e.g. Festival Vedic Classics Sale"
              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">Image URL</label>
            <input
              type="text"
              required
              value={form.imageUrl}
              onChange={(e) => setForm({ ...form, imageUrl: e.target.value })}
              placeholder="https://images.unsplash.com/..."
              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 className="mt-2 flex items-center gap-2">
              <span className="text-[10px] text-zinc-450 dark:text-zinc-400 font-semibold">Or upload file:</span>
              <input
                type="file"
                accept="image/*"
                onChange={handleFileUpload}
                disabled={uploading}
                className="text-[10px] text-zinc-500 file:mr-2 file:py-1 file:px-2 file:rounded-lg file:border-0 file:text-[10px] file:font-bold file:bg-[#701a08] file:text-white file:cursor-pointer file:hover:bg-[#581406] cursor-pointer"
              />
              {uploading && <span className="text-[10px] text-zinc-400 animate-pulse">Uploading...</span>}
            </div>
          </div>

          <div>
            <label className="text-zinc-500 block mb-1">Redirect Link URL (Optional)</label>
            <input
              type="text"
              value={form.linkUrl}
              onChange={(e) => setForm({ ...form, linkUrl: e.target.value })}
              placeholder="e.g. /category/vedas"
              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>
            <label className="text-zinc-500 block mb-1">Sort Order</label>
            <input
              type="number"
              value={form.sortOrder}
              onChange={(e) => setForm({ ...form, sortOrder: parseInt(e.target.value) || 0 })}
              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 className="flex items-center gap-2 py-1">
            <input
              type="checkbox"
              id="isActive"
              checked={form.isActive}
              onChange={(e) => setForm({ ...form, isActive: e.target.checked })}
              className="rounded text-[#701a08]"
            />
            <label htmlFor="isActive" className="text-zinc-700 dark:text-zinc-300">Set as active banner</label>
          </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 Banner'}
            </button>
          </div>
        </form>

        {/* Right Side: List & Previews */}
        <div className="lg:col-span-2 space-y-4">
          <span className="text-[10px] uppercase font-bold tracking-wider text-zinc-400 block">Slider Layout Deck</span>

          {banners.length === 0 ? (
            <div className="p-8 text-center border border-zinc-200 rounded-2xl text-zinc-400 font-bold">No active banners found.</div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {banners.map((b) => (
                <div key={b.id} className="border border-zinc-200 dark:border-zinc-800 rounded-2xl overflow-hidden bg-white dark:bg-zinc-900 shadow-xs flex flex-col justify-between">
                  <div className="h-[120px] overflow-hidden bg-zinc-150 relative">
                    <img src={b.imageUrl} alt={b.title} className="w-full h-full object-cover" />
                    {!b.isActive && (
                      <span className="absolute top-2 right-2 px-2 py-0.5 rounded bg-zinc-650 text-white text-[9px] font-extrabold uppercase">Inactive</span>
                    )}
                  </div>
                  <div className="p-4 space-y-2">
                    <h4 className="font-extrabold text-xs text-zinc-900 dark:text-zinc-100">{b.title}</h4>
                    <span className="text-[10px] text-zinc-400 block font-mono">Redirect: {b.linkUrl || 'None'}</span>

                    <div className="flex justify-between items-center pt-2 border-t border-zinc-100 dark:border-zinc-800">
                      <span className="text-[10px] font-bold text-zinc-500">Sort: {b.sortOrder}</span>
                      <div className="flex gap-1.5">
                        <button
                          onClick={() => handleEdit(b)}
                          className="p-1 rounded bg-zinc-100 hover:bg-zinc-200 text-zinc-600"
                        >
                          <Edit2 className="w-3.5 h-3.5" />
                        </button>
                        <button
                          onClick={() => handleDelete(b.id)}
                          className="p-1 rounded bg-red-50 hover:bg-red-100 text-red-600"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}