/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import styles from "./single-business.module.scss";
import DashboardLayout from "@/layouts/dashboard";
import { useState } from "react";
import {
  FiMapPin,
  FiPhone,
  FiUser,
  FiGlobe,
  FiBriefcase,
  FiEdit3,
} from "react-icons/fi";

import {
  FaWhatsapp,
  FaFacebook,
  FaInstagram,
  FaTwitter,
  FaLinkedin,
} from "react-icons/fa";

import { usePage } from "@inertiajs/react";
import DeleteModal from "@/components/modals/delete-modal";
import UpdateBusinessStatusModal from "@/components/modals/update-business-status-modal";
import { capitalizeFirstLetter } from "@/lib/utils";

const tabs = [
  { key: "overview", title: "Overview", desc: "Business information" },
  { key: "contact", title: "Contact", desc: "Reach the business" },
  { key: "details", title: "Details", desc: "Extra details" },
];

/* ================= SOCIAL CONFIG ================= */
const socialConfig: Record<
  string,
  { icon: any; className: string; label: string }
> = {
  whatsapp: {
    icon: <FaWhatsapp />,
    className: "whatsapp",
    label: "WhatsApp",
  },
  facebook: {
    icon: <FaFacebook />,
    className: "facebook",
    label: "Facebook",
  },
  instagram: {
    icon: <FaInstagram />,
    className: "instagram",
    label: "Instagram",
  },
  twitter: {
    icon: <FaTwitter />,
    className: "twitter",
    label: "Twitter",
  },
  linkedin: {
    icon: <FaLinkedin />,
    className: "linkedin",
    label: "LinkedIn",
  },
};

export default function SingleBusiness({ business }: any) {
  const [active, setActive] = useState("overview");
  const [showDelete, setShowDelete] = useState(false);
  const [showStatusModal, setShowStatusModal] = useState(false);

  /* ================= SAFE DATA ================= */
  const features = business?.features
    ? JSON.parse(business.features)
    : [];

  const socials = business?.social_media
    ? JSON.parse(business.social_media)
    : [];

  const cover = business?.cover_image
    ? `/storage/${business.cover_image}`
    : "/business-logo.jpeg";

  const logo = business?.logo
    ? `/storage/${business.logo}`
    : "/business-logo.jpeg";

  const handleOpenStatusModal = () => {
    setShowStatusModal(!showStatusModal);
  };

  /* ================= ROW ================= */
  const row = (
    icon: any,
    label: string,
    value: any,
    type: "text" | "link" | "button" = "text"
  ) => (
    <div className={styles.row}>
      <span className={styles.icon}>{icon}</span>

      <div>
        <p className={styles.label}>{label}</p>

        {type === "button" && value ? (
          <a
            href={value}
            target="_blank"
            rel="noopener noreferrer"
            className={styles.primaryBtn}
          >
            Visit Website
          </a>
        ) : type === "link" && value ? (
          <a
            href={value}
            target="_blank"
            rel="noopener noreferrer"
            className={styles.link}
          >
            {value}
          </a>
        ) : (
          <h4 className={styles.value}>{value || "—"}</h4>
        )}
      </div>
    </div>
  );

  return (
    <div className={styles.page}>
      {/* ================= HEADER ================= */}
      <div
        className={styles.header}
        style={{ backgroundImage: `url(${cover})` }}
      >
        <div className={styles.overlay} />

        <div className={styles.typeBadge}>
          {business?.type === "product_vendor"
            ? "Product Vendor"
            : "Service Provider"}
        </div>

        <div className={styles.avatar}>
          <img src={logo} alt={business?.name} />
        </div>
      </div>

      {/* ================= PROFILE ================= */}
      <div className={styles.profile}>
        <div className={styles.nameRow}>
          <h1>{business?.name}</h1>

          {business?.status === "approved" ? (
            <span className={styles.verified}>✔ Approved</span>
          ) : business?.status === "rejected" ? (
            <span className={styles.rejected}>Rejected</span>
          ) : (
            <span className={styles.pending}>Pending</span>
          )}
        </div>

        <p className={styles.description}>
          {business?.description?.slice(0, 140)}...
        </p>

        <div className={styles.tags}>
          {features.map((f: string) => (
            <span key={f}>{f}</span>
          ))}
        </div>

        <div className={styles.meta}>
          <FiMapPin /> <span>{business?.address}</span>
        </div>

        <div className={styles.actions}>
          <button
            className={styles.statusBtn}
            onClick={handleOpenStatusModal}
          >
            <FiEdit3 size={14} />
            Update Status
          </button>
        </div>
      </div>

      {/* ================= BODY ================= */}
      <div className={styles.wrapper}>
        <div className={styles.sidebar}>
          {tabs.map((t) => (
            <div
              key={t.key}
              className={`${styles.tabItem} ${
                active === t.key ? styles.activeTab : ""
              }`}
              onClick={() => setActive(t.key)}
            >
              <h4>{t.title}</h4>
              <p>{t.desc}</p>
            </div>
          ))}
        </div>

        <div className={styles.content}>
          <div className={styles.contentHeader}>
            <h2>{tabs.find((t) => t.key === active)?.title}</h2>
            <p>{tabs.find((t) => t.key === active)?.desc}</p>
          </div>

          {/* ================= OVERVIEW ================= */}
          {active === "overview" && (
            <div className={styles.grid}>
              {row(<FiBriefcase />, "Business Name", business?.name)}
              {row(<FiUser />, "Owner", business?.owner)}
              {row(<FiMapPin />, "Address", business?.address)}
              {row(<FiPhone />, "Phone", business?.phone)}
              {row(<FiGlobe />, "Website", business?.website_url, "button")}
            </div>
          )}

          {/* ================= CONTACT ================= */}
          {active === "contact" && (
            <div className={styles.grid}>
              {row(<FiPhone />, "Phone", business?.phone)}

              {socials.map((s: any, i: number) => {
                const config = socialConfig[s.platform] || {};

                return (
                  <div key={i} className={styles.row}>
                    <span className={styles.icon}>{config.icon}</span>

                    <div>
                      <p className={styles.label}>
                        {config.label ||
                          capitalizeFirstLetter(s.platform)}
                      </p>

                      <a
                        href={s.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className={`${styles.socialBtn} ${
                          styles[config.className]
                        }`}
                      >
                        Open {config.label || s.platform}
                      </a>
                    </div>
                  </div>
                );
              })}

              {row(<FiMapPin />, "Location", business?.address)}
            </div>
          )}

          {/* ================= DETAILS ================= */}
          {active === "details" && (
            <>
              <p className={styles.about}>
                {business?.description}
              </p>

              <div className={styles.tags}>
                {features.map((f: string) => (
                  <span key={f}>{f}</span>
                ))}
              </div>
            </>
          )}
        </div>
      </div>

      {/* ================= MODALS ================= */}
      {showDelete && (
        <DeleteModal
          closeModal={() => setShowDelete(!showDelete)}
          deleteUrl={`/member/businesses/${business.id}`}
          message={`Are you sure you want to delete your business profile?`}
        />
      )}

      {showStatusModal && (
        <UpdateBusinessStatusModal
          closeModal={handleOpenStatusModal}
          business={business}
        />
      )}
    </div>
  );
}

SingleBusiness.layout = (page: any) => (
  <DashboardLayout title="Business Details">
    {page}
  </DashboardLayout>
);