fotospiel-app/resources/js/guest/components/ShareSheet.tsx

import React from 'react';
import { Share2, MessageSquare, Copy } from 'lucide-react';
import { useTranslation } from '../i18n/useTranslation';

type ShareSheetProps = {
  open: boolean;
  photoId?: number | null;
  eventName?: string | null;
  url?: string | null;
  loading?: boolean;
  onClose: () => void;
  onShareNative: () => void;
  onShareWhatsApp: () => void;
  onShareMessages: () => void;
  onCopyLink: () => void;
  radius?: number;
  bodyFont?: string | null;
  headingFont?: string | null;
};

const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
    <path
      fill="currentColor"
      d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
    />
  </svg>
);

export function ShareSheet({
  open,
  photoId,
  eventName,
  url,
  loading = false,
  onClose,
  onShareNative,
  onShareWhatsApp,
  onShareMessages,
  onCopyLink,
  radius = 12,
  bodyFont,
  headingFont,
}: ShareSheetProps) {
  const { t } = useTranslation();

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/70 backdrop-blur-sm">
      <div
        className="w-full max-w-md rounded-t-3xl border border-border bg-white/98 p-4 text-slate-900 shadow-2xl ring-1 ring-black/10 backdrop-blur-md dark:border-white/10 dark:bg-slate-900/98 dark:text-white"
        style={{ ...(bodyFont ? { fontFamily: bodyFont } : {}), borderRadius: radius }}
      >
        <div className="mb-4 flex items-start justify-between gap-3">
          <div className="space-y-1">
            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              {t('share.title', 'Geteiltes Foto')}
            </p>
            <p className="text-base font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>
              {photoId ? `#${photoId}` : ''}
            </p>
            {eventName ? <p className="text-xs text-muted-foreground line-clamp-2">{eventName}</p> : null}
          </div>
          <button
            type="button"
            className="rounded-full border border-muted px-3 py-1 text-xs font-semibold text-foreground transition hover:bg-muted/80 dark:border-white/20 dark:text-white"
            style={{ borderRadius: radius }}
            onClick={onClose}
          >
            {t('lightbox.close', 'Schließen')}
          </button>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <button
            type="button"
            className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-3 py-3 text-left text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 disabled:border-slate-200 disabled:bg-slate-50 disabled:text-slate-800 disabled:opacity-100 dark:border-white/15 dark:bg-white/10 dark:text-white dark:disabled:bg-white/10 dark:disabled:text-white/80"
            onClick={onShareNative}
            disabled={loading}
            style={{ borderRadius: radius }}
          >
            <Share2 className="h-4 w-4" aria-hidden />
            <div>
              <div>{t('share.button', 'Teilen')}</div>
              <div className="text-xs text-slate-600 dark:text-white/70">{t('share.title', 'Geteiltes Foto')}</div>
            </div>
          </button>
          <button
            type="button"
            className="flex items-center gap-3 rounded-2xl border border-emerald-200 bg-emerald-500/90 px-3 py-3 text-left text-sm font-semibold text-white shadow transition hover:bg-emerald-600 disabled:opacity-60 dark:border-emerald-400/40"
            onClick={onShareWhatsApp}
            disabled={loading}
            style={{ borderRadius: radius }}
          >
            <WhatsAppIcon className="h-5 w-5" />
            <div>
              <div>{t('share.whatsapp', 'WhatsApp')}</div>
              <div className="text-xs text-white/80">{loading ? '…' : ''}</div>
            </div>
          </button>
          <button
            type="button"
            className="flex items-center gap-3 rounded-2xl border border-sky-200 bg-sky-500/90 px-3 py-3 text-left text-sm font-semibold text-white shadow transition hover:bg-sky-600 disabled:opacity-60 dark:border-sky-400/40"
            onClick={onShareMessages}
            disabled={loading}
            style={{ borderRadius: radius }}
          >
            <MessageSquare className="h-5 w-5" />
            <div>
              <div>{t('share.imessage', 'Nachrichten')}</div>
              <div className="text-xs text-white/80">{loading ? '…' : ''}</div>
            </div>
          </button>
          <button
            type="button"
            className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-3 py-3 text-left text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-500 dark:border-white/15 dark:bg-white/10 dark:text-white dark:disabled:bg-white/5 dark:disabled:text-white/50"
            onClick={onCopyLink}
            disabled={loading}
            style={{ borderRadius: radius }}
          >
            <Copy className="h-4 w-4" aria-hidden />
            <div>
              <div className="text-slate-900 dark:text-white">{t('share.copyLink', 'Link kopieren')}</div>
              <div className="text-xs text-slate-600 dark:text-white/80">{loading ? t('share.loading', 'Lädt…') : ''}</div>
            </div>
          </button>
        </div>

        {url ? (
          <p className="mt-3 truncate text-xs text-slate-700 dark:text-white/80" title={url}>
            {url}
          </p>
        ) : null}
      </div>
    </div>
  );
}

export default ShareSheet;