goodgo-platform/apps/web/components/listings/social-share.tsx

'use client';

import * as React from 'react';
import { Button } from '@/components/ui/button';

// ---------------------------------------------------------------------------
// Social Share Buttons — Facebook, Zalo, Copy Link, QR Code
// ---------------------------------------------------------------------------

interface SocialShareProps {
  listingId: string;
  listingTitle: string;
}

const apiUrl = process.env['NEXT_PUBLIC_API_URL'] || 'http://localhost:3001/api/v1';

export function SocialShare({ listingId, listingTitle }: SocialShareProps) {
  const [copied, setCopied] = React.useState(false);
  const [showQr, setShowQr] = React.useState(false);

  const listingUrl = typeof window !== 'undefined'
    ? window.location.href
    : '';

  const handleCopyLink = React.useCallback(async () => {
    try {
      await navigator.clipboard.writeText(listingUrl);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      // Fallback for older browsers
      const textarea = document.createElement('textarea');
      textarea.value = listingUrl;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  }, [listingUrl]);

  const handleShareFacebook = React.useCallback(() => {
    const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(listingUrl)}`;
    window.open(url, '_blank', 'noopener,noreferrer,width=600,height=400');
  }, [listingUrl]);

  const handleShareZalo = React.useCallback(() => {
    const url = `https://zalo.me/share?url=${encodeURIComponent(listingUrl)}&title=${encodeURIComponent(listingTitle)}`;
    window.open(url, '_blank', 'noopener,noreferrer,width=600,height=400');
  }, [listingUrl, listingTitle]);

  const qrCodeUrl = `${apiUrl}/listings/${listingId}/qr-code`;

  return (
    <div className="space-y-3">
      <p className="text-sm font-medium">Chia sẻ</p>

      <div className="flex flex-wrap gap-2">
        {/* Facebook */}
        <Button
          variant="outline"
          size="sm"
          className="gap-2"
          onClick={handleShareFacebook}
          aria-label="Chia sẻ lên Facebook"
        >
          <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
          </svg>
          Facebook
        </Button>

        {/* Zalo */}
        <Button
          variant="outline"
          size="sm"
          className="gap-2"
          onClick={handleShareZalo}
          aria-label="Chia sẻ lên Zalo"
        >
          <svg className="h-4 w-4" viewBox="0 0 48 48" fill="none">
            <circle cx="24" cy="24" r="24" fill="#0068FF" />
            <path d="M12.5 17.8h10.2c.3 0 .5.1.6.3.1.2.1.5-.1.7l-7.8 11.4h7.7c.4 0 .7.3.7.7v1.4c0 .4-.3.7-.7.7H12.5c-.3 0-.5-.1-.6-.3-.1-.2-.1-.5.1-.7l7.8-11.4h-7.3c-.4 0-.7-.3-.7-.7v-1.4c0-.4.3-.7.7-.7zm25.4 0c.4 0 .7.3.7.7v13.8c0 .4-.3.7-.7.7h-1.4c-.4 0-.7-.3-.7-.7V18.5c0-.4.3-.7.7-.7h1.4z" fill="white" />
          </svg>
          Zalo
        </Button>

        {/* Copy link */}
        <Button
          variant="outline"
          size="sm"
          className="gap-2"
          onClick={handleCopyLink}
          aria-label="Sao chép liên kết"
        >
          {copied ? (
            <svg className="h-4 w-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
          ) : (
            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
            </svg>
          )}
          {copied ? 'Đã sao chép!' : 'Sao chép liên kết'}
        </Button>
      </div>

      {/* QR Code toggle */}
      <div>
        <Button
          variant="ghost"
          size="sm"
          className="gap-2 text-muted-foreground"
          onClick={() => setShowQr(!showQr)}
          aria-label={showQr ? 'Ẩn mã QR' : 'Hiện mã QR'}
        >
          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
          </svg>
          {showQr ? 'Ẩn mã QR' : 'Mã QR'}
        </Button>

        {showQr && (
          <div className="mt-2 flex justify-center rounded-lg border bg-white p-3">
            <img
              src={qrCodeUrl}
              alt={`Mã QR cho ${listingTitle}`}
              width={200}
              height={200}
              className="h-[200px] w-[200px]"
            />
          </div>
        )}
      </div>
    </div>
  );
}