"use client";

import { useEffect, useRef, useState } from "react";
import { toast } from "react-toastify";
import Image from "next/image";
import Link from "next/link";

interface Banner {
  id: number;
  banner_name: string;
  banner_sub_text: string;
  banner_text: string;
  desktop_banner: string;
  tab_banner: string;
  mobile_banner: string;
  active_status: boolean;
  created_at: string;
  updated_at: string;
}

interface Props {
  pageName: string;
  pageTitle: string;
  pageSubtitle?: string;
}

const emptyForm = {
  banner_name: "",
  banner_sub_text: "",
  banner_text: "",
  active_status: true,
};

type FileKey = "desktop_banner" | "tab_banner" | "mobile_banner";

const emptyFiles: Record<FileKey, File | null> = {
  desktop_banner: null,
  tab_banner: null,
  mobile_banner: null,
};

const emptyPreviews: Record<FileKey, string> = {
  desktop_banner: "",
  tab_banner: "",
  mobile_banner: "",
};

export default function BannerPageManager({ pageName, pageTitle, pageSubtitle }: Props) {
  const [banners, setBanners] = useState<Banner[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [deletingId, setDeletingId] = useState<number | null>(null);

  const [form, setForm] = useState(emptyForm);
  const [files, setFiles] = useState<Record<FileKey, File | null>>(emptyFiles);
  const [previews, setPreviews] = useState<Record<FileKey, string>>(emptyPreviews);
  const [errors, setErrors] = useState({
    banner_name: "",
    desktop_banner: "",
    tab_banner: "",
    mobile_banner: "",
  });

  const [viewImage, setViewImage] = useState<{ src: string; label: string } | null>(null);

  const formRef = useRef<HTMLDivElement>(null);
  const desktopRef = useRef<HTMLInputElement>(null);
  const tabRef = useRef<HTMLInputElement>(null);
  const mobileRef = useRef<HTMLInputElement>(null);

  const fileRefs: Record<FileKey, React.RefObject<HTMLInputElement | null>> = {
    desktop_banner: desktopRef,
    tab_banner: tabRef,
    mobile_banner: mobileRef,
  };

  const isHome = pageName === "home";

  const fetchBanners = async () => {
    try {
      const res = await fetch(`/api/admin/banners/${pageName}`);
      const json = await res.json();
      if (json.success) setBanners(json.data);
    } catch {
      toast.error("Failed to load banners");
    } finally {
      setLoading(false);
    }
  };

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

  // cleanup blob object URLs on unmount
  useEffect(() => {
    return () => {
      Object.values(previews).forEach((url) => {
        if (url.startsWith("blob:")) URL.revokeObjectURL(url);
      });
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

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

    const url = URL.createObjectURL(file);

    setFiles((prev) => ({ ...prev, [key]: file }));
    setPreviews((prev) => ({ ...prev, [key]: url }));
    setErrors((prev) => ({ ...prev, [key]: "" }));
  };

  const removeFile = (key: FileKey) => {
    setFiles((prev) => ({ ...prev, [key]: null }));
    setPreviews((prev) => ({ ...prev, [key]: "" }));

    const ref = fileRefs[key];
    if (ref.current) ref.current.value = "";
  };

  const handleEdit = (banner: Banner) => {
    setEditingId(banner.id);
    setForm({
      banner_name: banner.banner_name,
      banner_sub_text: banner.banner_sub_text,
      banner_text: banner.banner_text,
      active_status: banner.active_status,
    });
    setFiles(emptyFiles);
    // Use the full URL directly — no path construction needed
    setPreviews({
      desktop_banner: banner.desktop_banner || "",
      tab_banner: banner.tab_banner || "",
      mobile_banner: banner.mobile_banner || "",
    });
    setErrors({ banner_name: "", desktop_banner: "", tab_banner: "", mobile_banner: "" });

    setTimeout(() => {
      formRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 100);
  };

  const handleReset = () => {
    setEditingId(null);
    setForm(emptyForm);
    setFiles(emptyFiles);
    setPreviews(emptyPreviews);
    setErrors({ banner_name: "", desktop_banner: "", tab_banner: "", mobile_banner: "" });
    if (desktopRef.current) desktopRef.current.value = "";
    if (tabRef.current) tabRef.current.value = "";
    if (mobileRef.current) mobileRef.current.value = "";
  };

  const validate = () => {
    const newErrors = { banner_name: "", desktop_banner: "", tab_banner: "", mobile_banner: "" };

    if (!form.banner_name.trim()) newErrors.banner_name = "Banner heading is required";

    const needDesktop = !files.desktop_banner && !previews.desktop_banner;
    const needTab = !files.tab_banner && !previews.tab_banner;
    const needMobile = !files.mobile_banner && !previews.mobile_banner;

    if (needDesktop) newErrors.desktop_banner = "Desktop banner image is required";

    if (isHome) {
      if (needTab) newErrors.tab_banner = "Tab banner image is required";
      if (needMobile) newErrors.mobile_banner = "Mobile banner image is required";
    }

    setErrors(newErrors);
    return !Object.values(newErrors).some(Boolean);
  };

  const handleSubmit = async () => {
    if (!validate()) return;

    try {
      setSaving(true);

      const fd = new FormData();
      if (editingId) fd.append("id", String(editingId));
      fd.append("banner_name", form.banner_name);
      fd.append("banner_sub_text", form.banner_sub_text);
      fd.append("banner_text", form.banner_text);
      fd.append("active_status", String(form.active_status));

      if (files.desktop_banner) fd.append("desktop_banner", files.desktop_banner);
      if (files.tab_banner) fd.append("tab_banner", files.tab_banner);
      if (files.mobile_banner) fd.append("mobile_banner", files.mobile_banner);

      const res = await fetch(`/api/admin/banners/${pageName}`, {
        method: editingId ? "PUT" : "POST",
        body: fd,
      });

      const json = await res.json();

      if (json.success) {
        toast.success(editingId ? "Banner updated" : "Banner created");
        handleReset();
        fetchBanners();
      } else {
        toast.error(json.message || "Failed to save banner");
      }
    } catch {
      toast.error("Failed to save banner");
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (id: number) => {
    if (!confirm("Delete this banner?")) return;
    try {
      setDeletingId(id);
      const res = await fetch(`/api/admin/banners/${pageName}`, {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id }),
      });
      const json = await res.json();
      if (json.success) {
        toast.success("Banner deleted");
        setBanners((prev) => prev.filter((b) => b.id !== id));
      } else {
        toast.error(json.message || "Failed to delete banner");
      }
    } catch {
      toast.error("Failed to delete banner");
    } finally {
      setDeletingId(null);
    }
  };

  const ImageUploadField = ({
    label,
    fieldKey,
    required,
  }: {
    label: string;
    fieldKey: FileKey;
    required?: boolean;
  }) => {
    const inputRef = fileRefs[fieldKey];
    const preview = previews[fieldKey];
    const error = errors[fieldKey];

    // blob: URLs are local new selections; full https: URLs are from the server
    const isExternalUrl = preview && !preview.startsWith("blob:");

    return (
      <div className="col-md-4">
        <label className="form-label">
          {label} {required && <span className="text-danger">*</span>}
        </label>
        <div
          className={`rounded p-1 banner-img-bx text-center position-relative ${error ? "border-danger" : ""}`}>
          {preview ? (
            <div className="position-relative h-100 d-flex">
              {/* Use <img> for external URLs to avoid Next.js domain config; keep <Image> for blobs */}
              {isExternalUrl ? (
                <img
                  src={preview}
                  alt={label}
                  className="img-fluid rounded"
                  onClick={() => setViewImage({ src: preview, label })}
                />
              ) : (
                <Image
                  src={preview}
                  alt={label}
                  width={
                    fieldKey === "desktop_banner" ? 1920 :
                      fieldKey === "tab_banner" ? 1024 :
                        375
                  }
                  height={
                    fieldKey === "desktop_banner" ? 600 :
                      fieldKey === "tab_banner" ? 500 :
                        600
                  }
                  unoptimized
                  className="img-fluid rounded"
                  onClick={() => setViewImage({ src: preview, label })}
                />
              )}
              <button
                type="button"
                className="btn btn-secondary btn-sm position-absolute top-0 start-0 m-1"
                onClick={() => setViewImage({ src: preview, label })}
                title="View full image"
              >
                <i className="bi bi-eye" />
              </button>
              <button
                type="button"
                className="btn btn-danger btn-sm position-absolute top-0 end-0 m-1"
                onClick={() => removeFile(fieldKey)}
                title="Remove"
              >
                <i className="bi bi-trash"></i>
              </button>
            </div>
          ) : (
            <div
              className="d-flex flex-column align-items-center justify-content-center"
              style={{ minHeight: 120, cursor: "pointer" }}
              onClick={() => inputRef.current?.click()}
            >
              <i className="bi bi-cloud-upload fs-2 mb-0" />
              <span className="small">Click to upload</span>
            </div>
          )}
        </div>

        <input
          ref={inputRef}
          type="file"
          accept="image/*"
          className="d-none"
          onChange={(e) => handleFileChange(e, fieldKey)}
        />

        {error && <div className="text-danger small mt-1">{error}</div>}

        {!preview && (
          <button
            type="button"
            className="admin-theme-btn w-100 mt-1"
            onClick={() => inputRef.current?.click()}
          >
            <i className="bi bi-upload me-1" />
            Choose Image
          </button>
        )}
      </div>
    );
  };

  return (
    <div className="admin-page-wrapper">
      {/* Header */}
      <div className="admin-page-header mb-3">
        <div className="d-flex justify-content-between align-items-center">
          <div>
            <h2 className="admin-page-title">{pageTitle}</h2>
            <p className="admin-page-subtitle">
              {pageSubtitle || `Manage banners for the ${pageName} page`}
            </p>
          </div>
          {/* <Link href="/admin/banners" className="default-btn px-3">
            <i className="bi bi-arrow-left" />
            Back
          </Link> */}
        </div>
      </div>

      {/* Add / Edit Form */}
      <div className="card-theme mb-3" ref={formRef}>
        <h5 className="fw-semibold mb-3">
          {editingId ? (
            <><i className="bi bi-pencil me-2 text-warning" />Edit Banner</>
          ) : (
            <><i className="bi bi-plus-circle me-2 text-primary" />Add New Banner</>
          )}
        </h5>

        <div className="row g-3">
          {/* Banner Name */}
          <div className="col-md-6">
            <label className="form-label">
              Banner Heading <span className="text-danger">*</span>
            </label>
            <input
              type="text"
              className={`form-control ${errors.banner_name ? "is-invalid" : form.banner_name ? "is-valid" : ""}`}
              placeholder="Enter banner name"
              value={form.banner_name}
              onChange={(e) => {
                setForm((prev) => ({ ...prev, banner_name: e.target.value }));
                if (e.target.value.trim()) setErrors((prev) => ({ ...prev, banner_name: "" }));
              }}
            />
            {errors.banner_name && (
              <div className="invalid-feedback d-block">{errors.banner_name}</div>
            )}
          </div>

          {/* Active Status */}
          <div className="col-md-6 d-flex align-items-end">
            <div className="form-check form-switch mb-2">
              <input
                className="form-check-input"
                type="checkbox"
                id="activeStatus"
                checked={form.active_status}
                onChange={(e) =>
                  setForm((prev) => ({ ...prev, active_status: e.target.checked }))
                }
              />
              <label className="form-check-label ms-2" htmlFor="activeStatus">
                Active
              </label>
            </div>
          </div>

          <div className="col-md-12">
            <label className="form-label">
              Banner Sub Heading
            </label>

            <input
              type="text"
              className="form-control"
              placeholder="Enter banner sub text"
              value={form.banner_sub_text}
              onChange={(e) =>
                setForm((prev) => ({
                  ...prev,
                  banner_sub_text: e.target.value,
                }))
              }
            />
          </div>

          {/* Banner Text */}
          <div className="col-12">
            <label className="form-label">Banner Text</label>
            <textarea
              className="form-control"
              rows={3}
              placeholder="Enter banner text (optional)"
              value={form.banner_text}
              onChange={(e) =>
                setForm((prev) => ({ ...prev, banner_text: e.target.value }))
              }
            />
          </div>

          {/* Image Uploads */}
          <ImageUploadField label="Desktop Banner" fieldKey="desktop_banner" required />
          <ImageUploadField label="Tab Banner" fieldKey="tab_banner" required={isHome} />
          <ImageUploadField label="Mobile Banner" fieldKey="mobile_banner" required={isHome} />
        </div>

        {/* Form Actions */}
        <div className="d-flex justify-content-end gap-2 mt-4">
          {editingId && (
            <button className="btn btn-light px-4" onClick={handleReset}>
              Cancel
            </button>
          )}
          <button className="admin-theme-btn" onClick={handleSubmit} disabled={saving}>
            {saving ? (
              <>
                <span className="spinner-border spinner-border-sm me-1" />
                {editingId ? "Saving..." : "Creating..."}
              </>
            ) : editingId ? (
              <><i className="bi bi-check-circle me-1" />Save Changes</>
            ) : (
              <><i className="bi bi-plus-circle me-1" />Add Banner</>
            )}
          </button>
        </div>
      </div>

      {/* Banners List */}
      <div className="card-theme">
        <h5 className="fw-semibold mb-3">
          <i className="bi bi-card-image me-2" />
          Existing Banners
        </h5>

        {loading ? (
          <div className="text-center py-4">
            <span className="spinner-border text-secondary" />
          </div>
        ) : banners.length === 0 ? (
          <div className="text-center text-muted py-4">
            <i className="bi bi-card-image fs-1 d-block mb-2" />
            No banners yet. Add one above.
          </div>
        ) : (
          <div className="row gx-2">
            {banners.map((banner) => (
              <div key={banner.id} className="col-xl-12 col-lg-12 col-md-6 col-sm-12 col-12 mb-3">
                <div className="rounded h-100 p-3 active-banner">
                  <div className="d-flex justify-content-between gap-2">
                    <div className="pb-1">
                      <div className="d-flex align-items-center gap-2 mb-1">
                        <span className="fw-semibold">{banner.banner_name}</span>
                        <span className={`badge ${banner.active_status ? "bg-success" : "bg-secondary"}`}>
                          {banner.active_status ? "Active" : "Inactive"}
                        </span>
                      </div>
                      {banner.banner_sub_text && (
                        <p
                          className="text-muted small mb-1"
                          style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}
                        >
                          {banner.banner_sub_text}
                        </p>
                      )}
                      {banner.banner_text && (
                        <p
                          className="text-muted small mb-1"
                          style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}
                        >
                          {banner.banner_text}
                        </p>
                      )}
                    </div>
                    {/* Actions */}
                    <div className="d-flex gap-2 align-self-start">
                      <button className="btn btn-warning btn-sm table-action-btn" onClick={() => handleEdit(banner)}>
                        <i className="bi bi-pencil-square"></i>
                      </button>
                      <button
                        className="btn btn-danger btn-sm"
                        onClick={() => handleDelete(banner.id)}
                        disabled={deletingId === banner.id}
                      >
                        {deletingId === banner.id ? (
                          <span className="spinner-border spinner-border-sm me-1" />
                        ) : (
                          <i className="bi bi-trash" />
                        )}
                      </button>
                    </div>
                  </div>
                  <div className="row gx-2 preview-img-outer">
                    <div className="col-xl-1 col-lg-2 col-md-3 col-sm-3 col-4">
                      {/* Desktop preview */}
                      <div className="preview-img">
                        <div className="d-flex gap-1 small text-muted mb-1"><i className="bi bi-display" />Desktop</div>
                        {banner.desktop_banner ? (
                          <img
                            src={banner.desktop_banner}
                            alt={`${banner.banner_name} - desktop`}
                            className="rounded img-fluid"
                            onClick={() =>
                              setViewImage({
                                src: banner.desktop_banner,
                                label: `${banner.banner_name} - Desktop`,
                              })
                            }
                          />
                        ) : (
                          <div
                            className="bg-light rounded d-flex align-items-center justify-content-center text-muted"
                            style={{ width: 160, height: 80 }}
                          >
                            <i className="bi bi-image fs-3" />
                          </div>
                        )}
                      </div>
                    </div>
                    <div className="col-xl-1 col-lg-2 col-md-3 col-sm-3 col-4">
                      {/* Tab preview */}
                      <div className="preview-img">
                        <div className="d-flex gap-1 small text-muted mb-1"><i className="bi bi-tablet" />Tab</div>
                        {banner.tab_banner ? (
                          <img
                            src={banner.tab_banner}
                            alt={`${banner.banner_name} - tab`}
                            className="rounded img-fluid"
                            onClick={() =>
                              setViewImage({
                                src: banner.tab_banner,
                                label: `${banner.banner_name} - Tab`,
                              })
                            }
                          />
                        ) : (
                          <div
                            className="bg-light rounded d-flex align-items-center justify-content-center text-muted"
                            style={{ width: 120, height: 80 }}
                          >
                            <i className="bi bi-tablet fs-4" />
                          </div>
                        )}
                      </div>
                    </div>
                    <div className="col-xl-1 col-lg-2 col-md-3 col-sm-3 col-4">
                      {/* Mobile preview */}
                      <div className="preview-img">
                        <div className="d-flex gap-1 small text-muted mb-1"><i className="bi bi-phone" />Mobile</div>
                        {banner.mobile_banner ? (
                          <img
                            src={banner.mobile_banner}
                            alt={`${banner.banner_name} - mobile`}
                            className="rounded img-fluid"
                            onClick={() =>
                              setViewImage({
                                src: banner.mobile_banner,
                                label: `${banner.banner_name} - Mobile`,
                              })
                            }
                          />
                        ) : (
                          <div
                            className="bg-light rounded d-flex align-items-center justify-content-center text-muted"
                            style={{ width: 60, height: 100 }}
                          >
                            <i className="bi bi-phone fs-4" />
                          </div>
                        )}
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Full Image View Modal */}
      {viewImage && (
        <div
          className="position-fixed top-0 start-0 w-100 h-100 d-flex flex-column align-items-center justify-content-center"
          style={{ backgroundColor: "rgba(0,0,0,0.8)", zIndex: 1050 }}
          onClick={() => setViewImage(null)}
        >
          <div className="text-white mb-2 fw-semibold">{viewImage.label}</div>
          <div
            className="position-relative"
            style={{ maxWidth: "90vw", maxHeight: "85vh" }}
            onClick={(e) => e.stopPropagation()}
          >
            <img
              src={viewImage.src}
              alt={viewImage.label}
              style={{ maxWidth: "90vw", maxHeight: "85vh", objectFit: "contain" }}
              className="rounded"
            />
          </div>
          <button type="button" className="btn btn-light btn-sm mt-3" onClick={() => setViewImage(null)}>
            <i className="bi bi-x-lg me-1" />
            Close
          </button>
        </div>
      )}
    </div>
  );
}