ignum/pages/products/slug/rightSide.tsx

"use client";

import { usePriceModalStore } from "@/zustand/useProceModalStore";
import { Check, Instagram, Send, Share2 } from "lucide-react";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import { useState } from "react";

interface RightSideProps {
  id: number;
  title: string;
  articular: string;
  status: string;
  description: string;
  price: string;
  image: string;
}

export function RightSide({
  title,
  articular,
  status,
  description,
  price,
  id,
  image,
}: RightSideProps) {
  const openModal = usePriceModalStore((state) => state.openModal);
  const t = useTranslations();
  const params = useParams();
  const locale = params.locale || "uz";
  const [copied, setCopied] = useState(false);

  const handleShare = async () => {
    const productUrl = `${window.location.origin}/${locale}/catalog_page/products/special_product?productId=${id}`;

    try {
      // Modern Web Share API dan foydalanish (mobil qurilmalar uchun)
      if (navigator.share) {
        await navigator.share({
          title: title,
          text: `${title} - ${description.slice(0, 100)}...`,
          url: productUrl,
        });
      } else {
        // Desktop uchun clipboard ga copy qilish
        await navigator.clipboard.writeText(productUrl);
        setCopied(true);

        // 2 soniyadan keyin "Copied" holatini o'chirish
        setTimeout(() => {
          setCopied(false);
        }, 2000);
      }
    } catch (error) {
      console.error("Share error:", error);
      // Fallback - clipboard ga copy qilish
      try {
        await navigator.clipboard.writeText(productUrl);
        setCopied(true);
        setTimeout(() => {
          setCopied(false);
        }, 2000);
      } catch (clipboardError) {
        console.error("Clipboard error:", clipboardError);
      }
    }
  };

  const handleGetPrice = () => {
    openModal({
      id,
      name: title,
      image,
      inStock: status === "Sotuvda mavjud",
    });
  };

  // Status color logic
  const isInStock = status === "Sotuvda mavjud";
  const statusColor = isInStock
    ? "bg-green-600/20 text-green-400 border border-green-600/30"
    : "bg-red-600/20 text-red-400 border border-red-600/30";

  return (
    <div className="flex flex-col justify-center space-y-6">
      {/* Title */}
      <h1 className="text-xl md:text-3xl font-unbounded font-bold text-white leading-tight">
        {title}
      </h1>

      {/* Article ID */}
      <div className="flex items-center gap-2 text-sm md:text-base">
        <span className="text-gray-400">Artikul:</span>
        <span className="text-white font-semibold">{articular}</span>
      </div>

      {/* Status Badge */}
      <div>
        <span
          className={`inline-block px-4 py-2 rounded-lg text-sm font-semibold ${statusColor}`}
        >
          {status}
        </span>
      </div>

      {/* Description */}
      <div className="border-l-4 border-red-700 pl-4">
        <p className="text-sm md:text-base text-gray-300 leading-relaxed">
          {description}
        </p>
      </div>

      {/* Price Section */}
      <div className="bg-[#1716169f] rounded-xl p-5 space-y-6">
        {/* Action Button */}
        <button
          onClick={handleGetPrice}
          className="w-full bg-red-700 hover:bg-red-800 text-white font-bold py-4 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-red-700/50"
        >
          {t("products.send")}
        </button>

        {/* Social Share */}
        <div className="pt-4 border-t border-gray-800 flex items-center gap-5">
          <button
            onClick={handleShare}
            className="flex items-center gap-3 mb-3 text-gray-400 hover:text-white transition-colors group"
          >
            {copied ? (
              <>
                <Check className="w-5 h-5 text-green-400" />
                <span className="text-sm text-green-400">
                  {t("products.copied") || "Link nusxalandi!"}
                </span>
              </>
            ) : (
              <>
                <Share2 className="w-5 h-5 group-hover:scale-110 transition-transform" />
                <span className="text-sm">{t("products.share")}:</span>
              </>
            )}
          </button>
          <a
            href="https://t.me/ignum_tech"
            className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500"
          >
            <Send />
          </a>
        </div>
      </div>
    </div>
  );
}