"use client";

import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import CustomLoader from "@/components/common/CustomLoader";

const BASE_URL = "/uploaded/sitesettings";

export default function SiteSettings() {
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [logoPreview, setLogoPreview] = useState<string | null>(null);
  const [footerLogoPreview, setFooterLogoPreview] = useState<string | null>(null);
  const [mobileLogoPreview, setMobileLogoPreview] = useState<string | null>(null);

  const [form, setForm] = useState<{
    site_name: string;
    site_contact_number: string;
    site_contact_email: string;
    site_contact_address: string;
    site_facebook_link: string;
    site_instagram_link: string;
    site_twitter_link: string;
    site_youtube_link: string;
    site_whatsapp_link: string;
    site_footer_text: string;
    site_header_text: string;
    site_logo: File | null;
    site_footer_logo: File | null;
    site_mobile_logo: File | null;
  }>({
    site_name: "",
    site_contact_number: "",
    site_contact_email: "",
    site_contact_address: "",
    site_facebook_link: "",
    site_instagram_link: "",
    site_twitter_link: "",
    site_youtube_link: "",
    site_whatsapp_link: "",
    site_footer_text: "",
    site_header_text: "",
    site_logo: null,
    site_footer_logo: null,
    site_mobile_logo: null,
  });

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

  const fetchSettings = async () => {
    try {
      setLoading(true);
      const res = await fetch("/api/admin/site-settings");
      const json = await res.json();

      if (json.success && json.data) {
        const d = json.data;
        setForm({
          site_name: d.site_name || "",
          site_contact_number: d.site_contact_number || "",
          site_contact_email: d.site_contact_email || "",
          site_contact_address: d.site_contact_address || "",
          site_facebook_link: d.site_facebook_link || "",
          site_instagram_link: d.site_instagram_link || "",
          site_twitter_link: d.site_twitter_link || "",
          site_youtube_link: d.site_youtube_link || "",
          site_whatsapp_link: d.site_whatsapp_link || "",
          site_footer_text: d.site_footer_text || "",
          site_header_text: d.site_header_text || "",
          site_logo: null,
          site_footer_logo: null,
          site_mobile_logo: null,
        });

        // Prepend base path to show existing logos
        setLogoPreview(d.site_logo ? `${d.site_logo}` : null);
        setFooterLogoPreview(d.site_footer_logo ? `${d.site_footer_logo}` : null);
        setMobileLogoPreview(d.site_mobile_logo ? `${d.site_mobile_logo}` : null);
      }
    } catch {
      toast.error("Failed to load settings");
    } finally {
      setLoading(false);
    }
  };

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = e.target;
    setForm((prev) => ({ ...prev, [name]: value }));
  };

  const handleFileChange = (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    const { name, files } = e.target;

    if (!files || files.length === 0) return;

    const file = files[0];
    if (!file) return;

    setForm((prev) => ({ ...prev, [name]: file }));

    // Show instant preview using FileReader
    const reader = new FileReader();
    reader.onloadend = () => {
      const result = reader.result as string;

      if (name === "site_logo") {
        setLogoPreview(result);
      }

      if (name === "site_footer_logo") {
        setFooterLogoPreview(result);
      }

      if (name === "site_mobile_logo") {
        setMobileLogoPreview(result);
      }
    };
    reader.readAsDataURL(file);
  };

  const handleSubmit = async () => {
    if (!form.site_name.trim()) return toast.error("Site name is required");
    if (!form.site_contact_number.trim()) return toast.error("Contact number is required");
    if (!form.site_contact_email.trim()) return toast.error("Contact email is required");
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.site_contact_email)) return toast.error("Enter a valid email");
    if (!form.site_contact_address.trim()) return toast.error("Contact address is required");
    if (!form.site_facebook_link.trim()) return toast.error("Facebook link is required");

    try {
      setSaving(true);

      const formData = new FormData();
      formData.append("site_name", form.site_name);
      formData.append("site_contact_number", form.site_contact_number);
      formData.append("site_contact_email", form.site_contact_email);
      formData.append("site_contact_address", form.site_contact_address);
      formData.append("site_facebook_link", form.site_facebook_link);
      formData.append("site_instagram_link", form.site_instagram_link);
      formData.append("site_twitter_link", form.site_twitter_link);
      formData.append("site_youtube_link", form.site_youtube_link);
      formData.append("site_whatsapp_link", form.site_whatsapp_link);
      formData.append("site_footer_text", form.site_footer_text);
      formData.append("site_header_text", form.site_header_text);
      if (form.site_logo) formData.append("site_logo", form.site_logo);
      if (form.site_footer_logo) formData.append("site_footer_logo", form.site_footer_logo);
      if (form.site_mobile_logo) { formData.append("site_mobile_logo", form.site_mobile_logo); }

      const res = await fetch("/api/admin/site-settings", {
        method: "PUT",
        body: formData,
      });

      const json = await res.json();
      if (json.success) {
        toast.success("Settings saved successfully");
        fetchSettings();
      } else {
        toast.error(json.message || "Failed to save settings");
      }
    } catch {
      toast.error("Failed to save settings");
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <CustomLoader />
    );
  }

  return (
    <div className="admin-page-wrapper">
      {/* Header */}
      <div className="admin-page-header mb-4">
        <div className="d-flex justify-content-between align-items-center">
          <div>
            <h2 className="admin-page-title">Site Settings</h2>
            <p className="admin-page-subtitle">Manage all website site settings here</p>
          </div>
          <button className="admin-theme-btn" onClick={handleSubmit} disabled={saving}>
            {saving ? (
              <><span className="spinner-border spinner-border-sm me-1" />Saving...</>
            ) : (
              <><i className="bi bi-floppy me-1" />Save Changes</>
            )}
          </button>
        </div>
      </div>

      <div className="row g-4">

        {/* ── General Information ── */}
        <div className="col-12">
          <div className="card-theme p-4">
            <h5 className="mb-3 fw-semibold">
              <i className="bi bi-globe me-2 text-primary" />
              General Information
            </h5>
            <div className="row g-3">
              <div className="col-md-6">
                <label className="form-label">Site Name <span className="text-danger">*</span></label>
                <input
                  type="text"
                  className="form-control"
                  name="site_name"
                  value={form.site_name}
                  onChange={handleChange}
                  placeholder="Enter site name"
                />
              </div>

              <div className="col-md-6">
                <label className="form-label">Header Text</label>
                <input
                  type="text"
                  className="form-control"
                  name="site_header_text"
                  value={form.site_header_text}
                  onChange={handleChange}
                  placeholder="Enter header text"
                />
              </div>

              <div className="col-12">
                <label className="form-label">Footer Text</label>
                <textarea
                  className="form-control"
                  name="site_footer_text"
                  value={form.site_footer_text}
                  onChange={handleChange}
                  rows={5}
                  placeholder="Enter footer text"
                />
              </div>
            </div>
          </div>
        </div>

        {/* ── Contact Information ── */}
        <div className="col-12">
          <div className="card-theme p-4">
            <h5 className="mb-3 fw-semibold">
              <i className="bi bi-telephone me-2 text-primary" />
              Contact Information
            </h5>
            <div className="row g-3">
              <div className="col-md-6">
                <label className="form-label">Contact Number <span className="text-danger">*</span></label>
                <input
                  type="text"
                  className="form-control"
                  name="site_contact_number"
                  value={form.site_contact_number}
                  onChange={handleChange}
                  placeholder="Enter contact number"
                />
              </div>

              <div className="col-md-6">
                <label className="form-label">Contact Email <span className="text-danger">*</span></label>
                <input
                  type="email"
                  className="form-control"
                  name="site_contact_email"
                  value={form.site_contact_email}
                  onChange={handleChange}
                  placeholder="Enter contact email"
                />
              </div>

              <div className="col-12">
                <label className="form-label">Contact Address <span className="text-danger">*</span></label>
                <textarea
                  className="form-control"
                  name="site_contact_address"
                  value={form.site_contact_address}
                  onChange={handleChange}
                  rows={2}
                  placeholder="Enter contact address"
                />
              </div>
            </div>
          </div>
        </div>

        {/* ── Social Media ── */}
        <div className="col-12">
          <div className="card-theme p-4">
            <h5 className="mb-3 fw-semibold">
              <i className="bi bi-share me-2 text-primary" />
              Social Media Links
            </h5>
            <div className="row g-3">
              <div className="col-md-6">
                <label className="form-label">
                  <i className="bi bi-facebook me-1 text-primary" />
                  Facebook <span className="text-danger">*</span>
                </label>
                <input
                  type="url"
                  className="form-control"
                  name="site_facebook_link"
                  value={form.site_facebook_link}
                  onChange={handleChange}
                  placeholder="https://facebook.com/..."
                />
              </div>

              <div className="col-md-6">
                <label className="form-label">
                  <i className="bi bi-instagram me-1 text-danger" />
                  Instagram
                </label>
                <input
                  type="url"
                  className="form-control"
                  name="site_instagram_link"
                  value={form.site_instagram_link}
                  onChange={handleChange}
                  placeholder="https://instagram.com/..."
                />
              </div>

              <div className="col-md-6">
                <label className="form-label">
                  <i className="bi bi-twitter-x me-1" />
                  Twitter / X
                </label>
                <input
                  type="url"
                  className="form-control"
                  name="site_twitter_link"
                  value={form.site_twitter_link}
                  onChange={handleChange}
                  placeholder="https://twitter.com/..."
                />
              </div>

              <div className="col-md-6">
                <label className="form-label">
                  <i className="bi bi-youtube me-1 text-danger" />
                  YouTube
                </label>
                <input
                  type="url"
                  className="form-control"
                  name="site_youtube_link"
                  value={form.site_youtube_link}
                  onChange={handleChange}
                  placeholder="https://youtube.com/..."
                />
              </div>

              <div className="col-md-6">
                <label className="form-label">
                  <i className="bi bi-whatsapp me-1 text-success" />
                  WhatsApp
                </label>
                <input
                  type="url"
                  className="form-control"
                  name="site_whatsapp_link"
                  value={form.site_whatsapp_link}
                  onChange={handleChange}
                  placeholder="https://wa.me/919999999999"
                />
              </div>
            </div>
          </div>
        </div>

        {/* ── Logos ── */}
        <div className="col-12">
          <div className="card-theme p-4">
            <h5 className="mb-3 fw-semibold">
              <i className="bi bi-image me-2 text-primary" />
              Logos
            </h5>
            <div className="row g-4">

              {/* Site Logo */}
              <div className="col-md-6">
                <label className="form-label">Site Logo</label>
                <input
                  type="file"
                  className="form-control"
                  name="site_logo"
                  accept="image/*"
                  onChange={handleFileChange}
                />
                {logoPreview && (
                  <div className="mt-3 p-3 border rounded" style={{ background: "#f8f9fa" }}>
                    <p className="text-muted small mb-2">Current Logo:</p>
                    <img
                      src={logoPreview}
                      alt="Site Logo"
                      style={{ height: "70px", objectFit: "contain" }}
                    />
                  </div>
                )}
              </div>

              {/* Mobile Logo */}
              <div className="col-md-6">
                <label className="form-label">Mobile Logo</label>

                <input
                  type="file"
                  className="form-control"
                  name="site_mobile_logo"
                  accept="image/*"
                  onChange={handleFileChange}
                />

                {mobileLogoPreview && (
                  <div
                    className="mt-3 p-3 border rounded"
                    style={{ background: "#f8f9fa" }}
                  >
                    <p className="text-muted small mb-2">
                      Current Mobile Logo:
                    </p>

                    <img
                      src={mobileLogoPreview}
                      alt="Mobile Logo"
                      style={{
                        height: "70px",
                        objectFit: "contain",
                      }}
                    />
                  </div>
                )}
              </div>

              {/* Footer Logo */}
              <div className="col-md-6">
                <label className="form-label">Footer Logo</label>
                <input
                  type="file"
                  className="form-control"
                  name="site_footer_logo"
                  accept="image/*"
                  onChange={handleFileChange}
                />
                {footerLogoPreview && (
                  <div className="mt-3 p-3 border rounded" style={{ background: "#f8f9fa" }}>
                    <p className="text-muted small mb-2">Current Footer Logo:</p>
                    <img
                      src={footerLogoPreview}
                      alt="Footer Logo"
                      style={{ height: "70px", objectFit: "contain" }}
                    />
                  </div>
                )}
              </div>

            </div>
          </div>
        </div>

        {/* Bottom Save */}
        <div className="col-12 d-flex justify-content-end pb-4">
          <button className="admin-theme-btn" onClick={handleSubmit} disabled={saving}>
            {saving ? (
              <><span className="spinner-border spinner-border-sm me-1" />Saving...</>
            ) : (
              <><i className="bi bi-floppy me-1" />Save Changes</>
            )}
          </button>
        </div>

      </div>
    </div>
  );
}