// src/components/ShareButtons.tsx
"use client";

import { useState } from "react";
import { usePathname } from "next/navigation";

type Props = {
  title?: string;
  summary?: string;
  slug?: string;
  siteOrigin?: string;
};

export default function ShareButtons({
  title = "",
  slug = "",
  siteOrigin = "",
}: Props) {
  const pathname = usePathname();
  const [copied, setCopied] = useState(false);

  // ✅ derive URL directly (no useEffect, no setState)
  const base =
    siteOrigin ||
    (typeof window !== "undefined" ? window.location.origin : "");

  const path = slug || pathname || "";
  const url = `${base}${path}`;

  const encodedUrl = encodeURIComponent(url);
  const encodedTitle = encodeURIComponent(title);

  const openWindow = (shareUrl: string) => {
    const width = 900;
    const height = 600;
    const left = window.screenX + (window.outerWidth - width) / 2;
    const top = window.screenY + (window.outerHeight - height) / 2;

    window.open(
      shareUrl,
      "shareWindow",
      `toolbar=0,status=0,width=${width},height=${height},top=${top},left=${left}`
    );
  };

  const onCopy = async () => {
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      alert("Copy failed — please copy manually:\n" + url);
    }
  };
  return (
    <div className="p-[30px] rounded-xl bg-white border border-[#202020]/15">
      <h3 className="font-mono text-2xl text-[#202020] font-medium mb-4">Follow & Share</h3>

      <div className="flex justify-start gap-2">
        {/* Facebook */}
        <button
          onClick={() =>
            openWindow(`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`)
          }
          aria-label="Share on Facebook"
          className="w-9 h-9 p-1 flex items-center justify-center rounded transition bg-[#202020] text-white cursor-pointer"
        >
          {/* svg icon */}
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="w-6 h-6 object-cover"><path fill="currentColor" d="M13.397 20.997v-8.196h2.765l.411-3.209h-3.176V7.548c0-.926.258-1.56 1.587-1.56h1.684V3.127A22 22 0 0 0 14.201 3c-2.444 0-4.122 1.492-4.122 4.231v2.355H7.332v3.209h2.753v8.202z"/></svg>
        </button>

        {/* X / Twitter */}
        <button
          onClick={() =>
            openWindow(`https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`)
          }
          aria-label="Share on X"
          className="w-9 h-9 p-1 flex items-center justify-center rounded transition bg-[#202020] text-white cursor-pointer"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 128 128" className="w-4 h-4 object-cover"><path fill="currentColor" d="M75.916 54.2L122.542 0h-11.05L71.008 47.06L38.672 0H1.376l48.898 71.164L1.376 128h11.05L55.18 78.303L89.328 128h37.296L75.913 54.2ZM60.782 71.79l-4.955-7.086l-39.42-56.386h16.972L65.19 53.824l4.954 7.086l41.353 59.15h-16.97L60.782 71.793Z"/></svg>
        </button>

        {/* LinkedIn */}
        <button
          onClick={() =>
            openWindow(
              `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`
            )
          }
          aria-label="Share on LinkedIn"
          className="w-9 h-9 p-1 flex items-center justify-center rounded transition bg-[#202020] text-white cursor-pointer"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="w-5 h-5 object-cover"><path fill="currentColor" d="M6.94 5a2 2 0 1 1-4-.002a2 2 0 0 1 4 .002M7 8.48H3V21h4zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91z"/></svg>
        </button>

        {/* Instagram - no direct web share, link to profile (placeholder) */}
        <a
          href="https://www.instagram.com/togweofficial/"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Instagram profile"
          className="w-9 h-9 p-1 flex items-center justify-center rounded transition bg-[#202020] text-white cursor-pointer"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="w-5 h-5 object-cover"><path fill="currentColor" d="M17.34 5.46a1.2 1.2 0 1 0 1.2 1.2a1.2 1.2 0 0 0-1.2-1.2m4.6 2.42a7.6 7.6 0 0 0-.46-2.43a4.9 4.9 0 0 0-1.16-1.77a4.7 4.7 0 0 0-1.77-1.15a7.3 7.3 0 0 0-2.43-.47C15.06 2 14.72 2 12 2s-3.06 0-4.12.06a7.3 7.3 0 0 0-2.43.47a4.8 4.8 0 0 0-1.77 1.15a4.7 4.7 0 0 0-1.15 1.77a7.3 7.3 0 0 0-.47 2.43C2 8.94 2 9.28 2 12s0 3.06.06 4.12a7.3 7.3 0 0 0 .47 2.43a4.7 4.7 0 0 0 1.15 1.77a4.8 4.8 0 0 0 1.77 1.15a7.3 7.3 0 0 0 2.43.47C8.94 22 9.28 22 12 22s3.06 0 4.12-.06a7.3 7.3 0 0 0 2.43-.47a4.7 4.7 0 0 0 1.77-1.15a4.85 4.85 0 0 0 1.16-1.77a7.6 7.6 0 0 0 .46-2.43c0-1.06.06-1.4.06-4.12s0-3.06-.06-4.12M20.14 16a5.6 5.6 0 0 1-.34 1.86a3.06 3.06 0 0 1-.75 1.15a3.2 3.2 0 0 1-1.15.75a5.6 5.6 0 0 1-1.86.34c-1 .05-1.37.06-4 .06s-3 0-4-.06a5.7 5.7 0 0 1-1.94-.3a3.3 3.3 0 0 1-1.1-.75a3 3 0 0 1-.74-1.15a5.5 5.5 0 0 1-.4-1.9c0-1-.06-1.37-.06-4s0-3 .06-4a5.5 5.5 0 0 1 .35-1.9A3 3 0 0 1 5 5a3.1 3.1 0 0 1 1.1-.8A5.7 5.7 0 0 1 8 3.86c1 0 1.37-.06 4-.06s3 0 4 .06a5.6 5.6 0 0 1 1.86.34a3.06 3.06 0 0 1 1.19.8a3.1 3.1 0 0 1 .75 1.1a5.6 5.6 0 0 1 .34 1.9c.05 1 .06 1.37.06 4s-.01 3-.06 4M12 6.87A5.13 5.13 0 1 0 17.14 12A5.12 5.12 0 0 0 12 6.87m0 8.46A3.33 3.33 0 1 1 15.33 12A3.33 3.33 0 0 1 12 15.33"/></svg>
        </a>

        {/* YouTube - placeholder */}
        <a
          href="https://www.youtube.com/"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="YouTube"
          className="w-9 h-9 p-1 flex items-center justify-center rounded transition bg-[#202020] text-white cursor-pointer"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="34.14" height="24" viewBox="0 0 256 180" className="w-5 h-5 object-cover"><path fill="#fff" d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"/><path fill="#000" d="m102.421 128.06l66.328-38.418l-66.328-38.418z"/></svg>
        </a>

        {/* Copy Link */}
        <button
          onClick={onCopy}
          aria-label="Copy link"
          className="w-9 h-9 p-1 flex items-center justify-center rounded transition bg-[#202020] text-white cursor-pointer"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48" className="w-5 h-5 object-cover"><defs><mask id="SVGoWjt7dcv"><g fill="none" strokeWidth="4"><path stroke="#fff" d="M12 9.927V7a3 3 0 0 1 3-3h26a3 3 0 0 1 3 3v26a3 3 0 0 1-3 3h-2.983"/><rect width="34" height="34" x="4" y="10" fill="#fff" stroke="#fff" strokeLinejoin="round" rx="3"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="m18.44 23.11l5.292-5.51c1.451-1.451 3.837-1.42 5.328.072s1.523 3.877.072 5.328l-1.91 2.023m-13.756 3.724c-.51.51-1.565 1.53-1.565 1.53c-1.452 1.451-1.492 4.038 0 5.53c1.49 1.49 3.876 1.523 5.328.071l5.164-4.688"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M18.663 28.328a3.86 3.86 0 0 1-1.131-2.473A3.67 3.67 0 0 1 18.592 23m3.729 2.861c1 .49 .49 .49 .49 .49"/></g></mask></defs><path fill="currentColor" d="M0 0h48v48H0z" mask="url(#SVGoWjt7dcv)"/></svg>
        </button>
      </div>

      {/* UI feedback */}
      {copied && <div className="mt-3 text-sm text-green-500">Link copied!</div>}
    </div>
  );
}