'use client';

import React, { useState, useEffect } from 'react';
import { apiRequest, uploadFile } from '@/lib/api';
import { toast } from '@/context/ToastContext';
import { getMediaUrl } from '@/lib/media';
import ConfirmDeleteModal from '@/components/admin/ConfirmDeleteModal';
import {
  Image as ImageIcon,
  Plus,
  Edit2,
  Trash2,
  Eye,
  EyeOff,
  Upload,
  Link as LinkIcon,
  RefreshCw,
  X,
  Sparkles,
  CheckCircle,
  ExternalLink,
} from 'lucide-react';

interface Banner {
  _id: string;
  title: string;
  subtitle?: string;
  imageUrl: string;
  linkUrl: string;
  ctaText?: string;
  isActive: boolean;
  displayOrder: number;
  createdAt?: string;
}

export default function AdminBannersPage() {
  const [banners, setBanners] = useState<Banner[]>([]);
  const [loading, setLoading] = useState(true);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingBanner, setEditingBanner] = useState<Banner | null>(null);
  const [uploading, setUploading] = useState(false);
  const [deletingBanner, setDeletingBanner] = useState<Banner | null>(null);
  const [deleteLoading, setDeleteLoading] = useState(false);

  // Form fields
  const [title, setTitle] = useState('');
  const [subtitle, setSubtitle] = useState('');
  const [imageUrl, setImageUrl] = useState('');
  const [linkUrl, setLinkUrl] = useState('/#courses');
  const [ctaText, setCtaText] = useState('START LEARNING NOW');
  const [isActive, setIsActive] = useState(true);
  const [displayOrder, setDisplayOrder] = useState(0);

  const fetchBanners = async () => {
    setLoading(true);
    const res = await apiRequest('/banners');
    if (res.success && res.banners) {
      setBanners(res.banners);
    } else {
      toast.error(res.error || 'Failed to load banners');
    }
    setLoading(false);
  };

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

  const resetForm = () => {
    setEditingBanner(null);
    setTitle('');
    setSubtitle('');
    setImageUrl('');
    setLinkUrl('/#courses');
    setCtaText('START LEARNING NOW');
    setIsActive(true);
    setDisplayOrder(0);
  };

  const handleOpenAdd = () => {
    resetForm();
    setIsModalOpen(true);
  };

  const handleOpenEdit = (b: Banner) => {
    setEditingBanner(b);
    setTitle(b.title);
    setSubtitle(b.subtitle || '');
    setImageUrl(b.imageUrl);
    setLinkUrl(b.linkUrl || '/#courses');
    setCtaText(b.ctaText || 'START LEARNING NOW');
    setIsActive(b.isActive);
    setDisplayOrder(b.displayOrder || 0);
    setIsModalOpen(true);
  };

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

    setUploading(true);
    try {
      const res = await uploadFile(file, 'general');
      setUploading(false);
      const uploadedPath = res.fileUrl || res.url || res.relativeUrl;
      if (res.success && uploadedPath) {
        setImageUrl(uploadedPath);
        toast.success('Image uploaded successfully');
      } else {
        toast.error(res.error || 'Failed to upload image');
      }
    } catch {
      setUploading(false);
      toast.error('Error uploading image file');
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!title.trim() || !imageUrl.trim()) {
      toast.error('Title and Banner Image are required.');
      return;
    }

    const payload = {
      title: title.trim(),
      subtitle: subtitle.trim(),
      imageUrl: imageUrl.trim(),
      linkUrl: linkUrl.trim() || '/#courses',
      ctaText: ctaText.trim() || 'START LEARNING NOW',
      isActive,
      displayOrder: Number(displayOrder) || 0,
    };

    if (editingBanner) {
      const res = await apiRequest(`/banners/${editingBanner._id}`, {
        method: 'PUT',
        body: JSON.stringify(payload),
      });
      if (res.success) {
        toast.success('Banner updated successfully!');
        setIsModalOpen(false);
        fetchBanners();
      } else {
        toast.error(res.error || 'Failed to update banner');
      }
    } else {
      const res = await apiRequest('/banners', {
        method: 'POST',
        body: JSON.stringify(payload),
      });
      if (res.success) {
        toast.success('Banner created successfully!');
        setIsModalOpen(false);
        fetchBanners();
      } else {
        toast.error(res.error || 'Failed to create banner');
      }
    }
  };

  const handleToggleActive = async (banner: Banner) => {
    const res = await apiRequest(`/banners/${banner._id}`, {
      method: 'PUT',
      body: JSON.stringify({ isActive: !banner.isActive }),
    });
    if (res.success) {
      toast.success(`Banner ${!banner.isActive ? 'activated' : 'deactivated'}`);
      setBanners((prev) =>
        prev.map((b) => (b._id === banner._id ? { ...b, isActive: !b.isActive } : b))
      );
    } else {
      toast.error(res.error || 'Failed to toggle banner status');
    }
  };

  const handleConfirmDeleteBanner = async () => {
    if (!deletingBanner) return;

    setDeleteLoading(true);
    const res = await apiRequest(`/banners/${deletingBanner._id}`, {
      method: 'DELETE',
    });
    setDeleteLoading(false);

    if (res.success) {
      toast.success('Banner deleted successfully!');
      setBanners((prev) => prev.filter((b) => b._id !== deletingBanner._id));
      setDeletingBanner(null);
    } else {
      toast.error(res.error || 'Failed to delete banner');
    }
  };

  return (
    <div className="space-y-8 max-w-7xl mx-auto">
      {/* Page Header */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight flex items-center gap-3">
            {/* <ImageIcon className="w-8 h-8 text-[#FECE00]" /> */}
            <span>Homepage Hero Banners</span>
          </h1>
          {/* <p className="text-sm text-gray-500 mt-1 font-medium">
            Manage, upload, and publish dynamic hero banners displayed on the website homepage.
          </p> */}
        </div>

        <div className="flex items-center gap-3">
          {/* <button
            onClick={fetchBanners}
            className="px-4 py-2.5 rounded-xl bg-white hover:bg-gray-100 text-gray-700 font-bold text-sm border border-gray-200 shadow-xs transition flex items-center gap-2 cursor-pointer"
          >
            <RefreshCw className={`w-4 h-4 text-gray-500 ${loading ? 'animate-spin' : ''}`} />
            <span>Refresh</span>
          </button> */}

          <button
            onClick={handleOpenAdd}
            className="px-4 py-2 bg-[#FECE00] hover:bg-[#e5b800] text-black text-sm font-medium rounded-lg shadow-sm transition-colors flex items-center gap-2 cursor-pointer"
          >
            <Plus className="w-4 h-4" />
            <span>Create New Banner</span>
          </button>
        </div>
      </div>

      {/* Banners Grid */}
      {loading ? (
        <div className="p-16 bg-white rounded-3xl border border-gray-200 text-center flex flex-col items-center justify-center gap-3">
          <div className="w-8 h-8 border-3 border-[#FECE00] border-t-transparent rounded-full animate-spin" />
          <span className="text-xs font-semibold text-gray-500">Loading website banners...</span>
        </div>
      ) : banners.length === 0 ? (
        <div className="p-16 bg-white rounded-3xl border border-gray-200 text-center space-y-4">
          <ImageIcon className="w-12 h-12 text-gray-300 mx-auto" />
          <p className="text-sm text-gray-600 font-semibold">No hero banners created yet.</p>
          <button
            onClick={handleOpenAdd}
            className="px-4 py-2 bg-[#FECE00] hover:bg-[#e5b800] text-black text-sm font-medium rounded-lg shadow-sm transition-colors flex items-center justify-center gap-2 cursor-pointer inline-flex"
          >
            <Plus className="w-4 h-4" />
            <span>Add Your First Banner</span>
          </button>
        </div>
      ) : (
        <div className="bg-white rounded-2xl border border-gray-200/90 shadow-sm overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-left text-xs border-collapse">
              <thead>
                <tr className="bg-gray-50/50 border-b border-amber-100 text-gray-700 font-extrabold uppercase tracking-wider">
                  <th className="py-3.5 px-4 sm:px-6">Banner Image</th>
                  <th className="py-3.5 px-4">Title & Subtitle</th>
                  <th className="py-3.5 px-4">CTA Text</th>
                  <th className="py-3.5 px-4 text-center">Order</th>
                  <th className="py-3.5 px-4 text-center">Status</th>
                  <th className="py-3.5 px-4 sm:px-6 text-right">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100 font-medium text-gray-800">
                {banners.map((b) => (
                  <tr key={b._id} className="hover:bg-amber-50/20 transition-colors">
                    {/* Banner Thumbnail */}
                    <td className="py-3.5 px-4 sm:px-6">
                      <div className="w-28 h-14 rounded-xl bg-gray-900 border border-gray-200 overflow-hidden relative group shrink-0">
                        <img
                          src={getMediaUrl(b.imageUrl)}
                          alt={b.title}
                          className="w-full h-full object-cover"
                          onError={(e) => {
                            (e.target as HTMLElement).style.display = 'none';
                          }}
                        />
                      </div>
                    </td>

                    {/* Title & Subtitle */}
                    <td className="py-3.5 px-4 max-w-xs">
                      <span className="font-extrabold text-gray-900 text-sm block truncate">
                        {b.title}
                      </span>
                      {b.subtitle && (
                        <span className="text-gray-500 text-[11px] block truncate mt-0.5">
                          {b.subtitle}
                        </span>
                      )}
                    </td>

                    {/* CTA Text */}
                    <td className="py-3.5 px-4">
                      <span className="px-2.5 py-1 rounded-lg bg-amber-100/70 text-amber-900 font-bold text-[11px] inline-block">
                        {b.ctaText || 'Learn More'}
                      </span>
                    </td>

                    {/* Display Order */}
                    <td className="py-3.5 px-4 text-center font-extrabold text-gray-900">
                      {b.displayOrder}
                    </td>

                    {/* Status Badge & Toggle */}
                    <td className="py-3.5 px-4 text-center">
                      <button
                        onClick={() => handleToggleActive(b)}
                        className={`px-3 py-1 rounded-full text-[11px] font-black uppercase tracking-wider inline-flex items-center gap-1 transition cursor-pointer ${b.isActive
                          ? 'bg-emerald-100 text-emerald-800 hover:bg-emerald-200'
                          : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                          }`}
                        title="Click to toggle status"
                      >
                        {b.isActive ? <Eye className="w-3 h-3" /> : <EyeOff className="w-3 h-3" />}
                        <span>{b.isActive ? 'Active' : 'Inactive'}</span>
                      </button>
                    </td>

                    {/* Action Buttons */}
                    <td className="py-3.5 px-4 sm:px-6 text-right">
                      <div className="flex items-center justify-end gap-2">
                        <button
                          onClick={() => handleOpenEdit(b)}
                          className="p-2 rounded-xl bg-gray-100 hover:bg-black text-gray-700 hover:text-[#FECE00] transition cursor-pointer"
                          title="Edit banner"
                        >
                          <Edit2 className="w-4 h-4" />
                        </button>
                        <button
                          onClick={() => setDeletingBanner(b)}
                          className="p-2 rounded-xl bg-red-50 hover:bg-red-600 text-red-600 hover:text-white transition cursor-pointer"
                          title="Delete banner"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Add / Edit Banner Modal */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-md flex items-center justify-center p-4 animate-fadeIn !m-0">
          <div className="bg-white max-w-3xl w-full rounded-3xl shadow-[0_0_40px_rgba(0,0,0,0.15)] border border-gray-100 p-6 sm:p-8 space-y-6 max-h-[92vh] overflow-y-auto relative">
            <div className="flex items-center justify-between border-b border-gray-100 pb-4">
              <h3 className="text-2xl font-black text-gray-900 flex items-center gap-2">
                <ImageIcon className="w-6 h-6 text-[#FECE00]" />
                {editingBanner ? 'Edit Hero Banner' : 'Create New Hero Banner'}
              </h3>
              <button
                onClick={() => setIsModalOpen(false)}
                className="p-2 rounded-xl text-gray-400 hover:text-gray-900 hover:bg-gray-100 transition cursor-pointer"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <form onSubmit={handleSubmit} className="space-y-4 text-xs sm:text-sm">
              {/* Title */}
              <div>
                <label className="block font-bold text-gray-800 mb-1">
                  Banner Main Title <span className="text-red-500">*</span>
                </label>
                <input
                  type="text"
                  required
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  placeholder="e.g. Apka German School"
                  className="w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 text-gray-900 focus:bg-white focus:border-[#FECE00] outline-none font-medium"
                />
              </div>

              {/* Subtitle */}
              <div>
                <label className="block font-bold text-gray-800 mb-1">Subtitle / Bullet Notes</label>
                <textarea
                  rows={3}
                  value={subtitle}
                  onChange={(e) => setSubtitle(e.target.value)}
                  placeholder="e.g. - App for B1 German Exam&#10;- YouTube Channel&#10;- German Courses"
                  className="w-full p-4 rounded-xl bg-gray-50 border border-gray-200 text-gray-900 focus:bg-white focus:border-[#FECE00] outline-none font-medium resize-none"
                />
              </div>

              {/* Banner Image Upload */}
              <div className="space-y-2">
                <label className="block font-bold text-gray-800">
                  Banner Image <span className="text-red-500">*</span>
                  <span className="text-xs text-gray-400 font-medium ml-2 font-normal block sm:inline mt-1 sm:mt-0">
                    (Recommended: 16:9 aspect ratio, e.g. 1920x1080)
                  </span>
                </label>

                <div className="flex items-center gap-3">
                  <label className="flex-1 cursor-pointer">
                    <div className="px-4 py-3.5 rounded-xl bg-amber-50 hover:bg-amber-100 border border-amber-300 text-amber-950 font-extrabold text-xs flex items-center justify-center gap-2 transition shadow-xs">
                      <Upload className="w-4 h-4 text-amber-700" />
                      <span>{uploading ? 'Uploading...' : imageUrl ? 'Change Banner Image' : 'Upload Banner Image File'}</span>
                    </div>
                    <input
                      type="file"
                      accept="image/*"
                      className="hidden"
                      onChange={handleFileUpload}
                      disabled={uploading}
                    />
                  </label>
                </div>

                {imageUrl && (
                  <div className="p-3 rounded-2xl bg-gray-50 border border-gray-200 flex items-center gap-4 mt-2">
                    <img
                      src={getMediaUrl(imageUrl)}
                      alt="Uploaded Banner Preview"
                      className="w-16 h-12 object-cover rounded-xl border border-gray-300 bg-gray-900 shadow-xs"
                    />
                    <div className="flex-1 overflow-hidden">
                      <p className="text-xs font-extrabold text-emerald-700 flex items-center gap-1">
                        <CheckCircle className="w-3.5 h-3.5" />
                        <span>Banner Image Attached</span>
                      </p>
                    </div>
                  </div>
                )}
              </div>

              {/* CTA Text Grid */}
              <div className="grid grid-cols-1 gap-4">
                <div>
                  <label className="block font-bold text-gray-800 mb-1.5">CTA Button Text</label>
                  <input
                    type="text"
                    value={ctaText}
                    onChange={(e) => setCtaText(e.target.value)}
                    placeholder="e.g. START LEARNING NOW"
                    className="w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 text-gray-900 focus:bg-white focus:border-[#FECE00] outline-none font-bold transition-colors"
                  />
                </div>
              </div>

              {/* Display Order & Active Checkbox */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-2">
                <div>
                  <label className="block font-bold text-gray-800 mb-1.5">Display Order</label>
                  <input
                    type="number"
                    value={displayOrder}
                    onChange={(e) => setDisplayOrder(Number(e.target.value))}
                    className="w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 text-gray-900 focus:bg-white focus:border-[#FECE00] outline-none font-bold transition-colors"
                  />
                </div>

                <div className="flex items-center pt-1 sm:pt-7">
                  <label className="flex items-center gap-3 cursor-pointer p-3 rounded-xl border border-gray-100 bg-gray-50 w-full hover:bg-gray-100 transition-colors">
                    <input
                      type="checkbox"
                      checked={isActive}
                      onChange={(e) => setIsActive(e.target.checked)}
                      className="w-5 h-5 text-[#FECE00] bg-white border-gray-300 focus:ring-[#FECE00] rounded transition-colors"
                    />
                    <span className="font-bold text-gray-800 text-xs sm:text-sm">Publish & Activate Immediately</span>
                  </label>
                </div>
              </div>

              {/* Submit Button */}
              <button
                type="submit"
                className="w-full py-4 rounded-xl bg-[#FECE00] hover:bg-black text-black hover:text-[#FECE00] font-extrabold text-xs uppercase tracking-wider shadow-md transition-all cursor-pointer mt-4"
              >
                {editingBanner ? 'Save Changes' : 'Create Banner'}
              </button>
            </form>
          </div>
        </div>
      )}

      {/* Delete Banner Confirmation Modal */}
      <ConfirmDeleteModal
        isOpen={!!deletingBanner}
        onClose={() => setDeletingBanner(null)}
        onConfirm={handleConfirmDeleteBanner}
        loading={deleteLoading}
        title="Delete Banner"
        description={`Are you sure you want to delete "${deletingBanner?.title}"? This action cannot be undone and will remove the banner permanently.`}
      />
    </div>
  );
}