// app/page.tsx
"use client";

import { useState, useCallback, useMemo, JSX, useEffect } from "react";
import Modal from "@/modules/ui/modal";
import { ShareIcon } from "@/modules/icons/share-icon";
import { FacebookIcon } from "@/modules/icons/facebook-icon";
import { TwitterIcon } from "@/modules/icons/twitter-icon";
import { WhatsAppIcon } from "@/modules/icons/whats-app-icon";
import { EmailShareIcon } from "@/modules/icons/email-share-icon";
import { CopyIcon } from "@/modules/icons/copy-icon";
import { facebook_url, twitter_url, whatsapp_url } from "@/lib/types/constants";

interface SharePlatform {
  key: string;
  label: string;
  icon: JSX.Element;
  url: string;
  ariaLabel: string;
}

export default function Page({ title = "" }: { title?: string }) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [copied, setCopied] = useState(false);
  const [currentUrl, setCurrentUrl] = useState("");
  useEffect(() => {
    if (typeof window !== "undefined") {
      setCurrentUrl(window.location.href);
    }
  }, []);

  // Memoized share URLs to prevent recalculations on re-renders
  const shareUrls = useMemo(
    () => ({
      facebook: `${facebook_url}/sharer/sharer.php?u=${encodeURIComponent(
        currentUrl
      )}`,
      twitter: `${twitter_url}/intent/tweet?text=${encodeURIComponent(
        title
      )}&url=${encodeURIComponent(currentUrl)}`,
      whatsapp: `${whatsapp_url}/send?text=${encodeURIComponent(
        `${title} ${currentUrl}`
      )}`,
      email: `mailto:?subject=Awesome Vibrant Print Product&body=${encodeURIComponent(
        `${title}\n\nCheck it out: ${currentUrl}`
      )}`,
    }),
    [title, currentUrl]
  );

  // Memoized share platforms configuration
  const sharePlatforms = useMemo<SharePlatform[]>(
    () => [
      {
        key: "facebook",
        label: "Facebook",
        icon: <FacebookIcon />,
        url: shareUrls.facebook,
        ariaLabel: "Share on Facebook",
      },
      {
        key: "twitter",
        label: "Twitter",
        icon: <TwitterIcon />,
        url: shareUrls.twitter,
        ariaLabel: "Share on Twitter",
      },
      {
        key: "whatsapp",
        label: "WhatsApp",
        icon: <WhatsAppIcon />,
        url: shareUrls.whatsapp,
        ariaLabel: "Share on WhatsApp",
      },
      {
        key: "email",
        label: "Email",
        icon: <EmailShareIcon />,
        url: shareUrls.email,
        ariaLabel: "Share via Email",
      },
    ],
    [shareUrls]
  );

  // Optimized copy to clipboard function with useCallback
  const copyToClipboard = useCallback(async () => {
    if (!currentUrl) return;
    try {
      await navigator.clipboard.writeText(currentUrl);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error("Failed to copy text: ", err);
      // Fallback for older browsers
      const textArea = document.createElement("textarea");
      textArea.value = currentUrl;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand("copy");
      document.body.removeChild(textArea);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  }, [currentUrl]);

  const handleOpenModal = useCallback(() => setIsModalOpen(true), []);
  const handleCloseModal = useCallback(() => setIsModalOpen(false), []);

  return (
    <div className="max-w-4xl mx-auto">
      <div className="space-y-4">
        <button
          onClick={handleOpenModal}
          className="mt-1"
          aria-label="Share product"
        >
          <ShareIcon />
        </button>

        {isModalOpen && (
          <Modal
            isOpen={isModalOpen}
            onClose={handleCloseModal}
            size="md"
            title="Share this product"
          >
            <div className="flex items-center gap-6">
              <div className="w-12 h-12 bg-gray-200 rounded-lg flex items-center justify-center">
                {/* Placeholder for product image */}
                <span className="text-sm text-gray-500">Image</span>
              </div>
              <p className="text-sm md:text-base font-medium text-gray-600">
                {title}
              </p>
            </div>

            <div className="my-5 border-b border-gray-200" />

            <h2 className="text-lg font-medium text-gray-900">Share with</h2>

            <div className="mt-2 grid grid-cols-2 sm:grid-cols-4 gap-4">
              {sharePlatforms.map((platform) => (
                <a
                  key={platform.key}
                  href={platform.url}
                  target={platform.key === "email" ? "_self" : "_blank"}
                  rel={
                    platform.key === "email" ? undefined : "noopener noreferrer"
                  }
                  aria-label={platform.ariaLabel}
                  className="flex flex-col items-center gap-2 p-3 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  {platform.icon}
                  <p className="text-sm text-gray-600">{platform.label}</p>
                </a>
              ))}
            </div>

            <div className="my-4 p-4 border border-gray-300 rounded-lg flex items-center gap-4">
              <p className="flex-1 text-sm text-gray-900 font-medium truncate">
                {currentUrl}
              </p>
              <button
                type="button"
                onClick={copyToClipboard}
                className="flex items-center gap-2 py-2 px-4 rounded-full text-sm font-medium text-white bg-primary hover:bg-primary-dark transition-colors shrink-0"
                aria-label="Copy link to clipboard"
                disabled={!currentUrl}
              >
                <CopyIcon />
                {copied ? "Copied!" : "Copy"}
              </button>
            </div>
          </Modal>
        )}
      </div>
    </div>
  );
}