cruciverb/frontend/src/components/ShareModal.tsx

import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { motion, AnimatePresence } from 'motion/react'
import { QRCodeSVG } from 'qrcode.react'
import { IconCopy, IconX, IconQrcode, IconDownload, IconFileTypePdf,
         IconCodeCircleFilled, IconChevronDownFilled } from '@tabler/icons-react'
import { useStore } from '../store'
import { useFocusTrap } from '../hooks/useFocusTrap'

export default function ShareModal({ onClose }: { onClose: () => void }) {
  const trapRef = useFocusTrap(true)
  const { t } = useTranslation()
  const shortId = useStore((s) => s.shortId)
  const puzzleId = useStore((s) => s.puzzleId)
  const [showEmbed, setShowEmbed] = useState(false)
  const [embedTheme, setEmbedTheme] = useState('auto')
  const [embedTimer, setEmbedTimer] = useState(true)
  const [embedHints, setEmbedHints] = useState(true)
  const [copied, setCopied] = useState(false)
  const [copiedEmbed, setCopiedEmbed] = useState(false)

  if (!shortId || !puzzleId) return null

  const url = `${window.location.origin}/p/${shortId}`

  const copy = () => {
    navigator.clipboard.writeText(url)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  const download = (format: string) => {
    window.open(`/api/puzzles/${puzzleId}/export/${format}`, '_blank')
  }

  const embedParams = [
    embedTheme !== 'auto' ? `theme=${embedTheme}` : '',
    !embedTimer ? 'timer=false' : '',
    !embedHints ? 'hints=false' : '',
  ].filter(Boolean).join('&')
  const embedUrl = `${window.location.origin}/e/${shortId}${embedParams ? '?' + embedParams : ''}`
  const embedCode = `<iframe src="${embedUrl}" width="600" height="700" style="border: none;"></iframe>`

  const copyEmbed = () => {
    navigator.clipboard.writeText(embedCode)
    setCopiedEmbed(true)
    setTimeout(() => setCopiedEmbed(false), 2000)
  }

  return (
    <motion.div className="settings-overlay" onClick={onClose}
      initial={{ opacity: 0 }} animate={{ opacity: 1 }}
      exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
      <motion.div ref={trapRef} className="settings-panel" onClick={e => e.stopPropagation()} style={{ textAlign: 'center' }}
        role="dialog" aria-modal="true" aria-label={t('share.title')}
        initial={{ opacity: 0, scale: 0.96, y: 10 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        exit={{ opacity: 0, scale: 0.96, y: 10 }}
        transition={{ duration: 0.2 }}>
        <div className="settings-header">
          <h3><IconQrcode size={18} style={{ verticalAlign: -3, marginRight: 6 }} />{t('share.title')}</h3>
          <button className="btn btn-sm btn-ghost" onClick={onClose} aria-label={t('common.close')}><IconX size={16} aria-hidden="true" /></button>
        </div>
        <div style={{ padding: '20px 0' }}>
          <QRCodeSVG value={url} size={180} level="M" aria-label={t('share.qrLabel')} />
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--text-secondary)', marginBottom: 16, wordBreak: 'break-all' }}>
          {url}
        </div>
        <div style={{ display: 'flex', gap: 6, justifyContent: 'center', marginBottom: 16 }}>
          <button className="btn btn-primary" onClick={copy}>
            <IconCopy size={14} style={{ verticalAlign: -2, marginRight: 4 }} aria-hidden="true" /> {copied ? <span role="status">{t('common.copied')}</span> : t('common.copyLink')}
          </button>
        </div>

        <div style={{ borderTop: '1px solid var(--border)', paddingTop: 12 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.563rem', textTransform: 'uppercase', letterSpacing: '0.15em', color: 'var(--text-tertiary)', marginBottom: 8 }}>
            {t('common.export')}
          </div>
          <div style={{ display: 'flex', gap: 6, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-sm" onClick={() => download('puz')}>
              <IconDownload size={12} style={{ verticalAlign: -1, marginRight: 3 }} /> .puz
            </button>
            <button className="btn btn-sm" onClick={() => download('ipuz')}>
              <IconDownload size={12} style={{ verticalAlign: -1, marginRight: 3 }} /> .ipuz
            </button>
            <button className="btn btn-sm" onClick={() => download('pdf?variant=puzzle')}>
              <IconFileTypePdf size={12} style={{ verticalAlign: -1, marginRight: 3 }} /> {t('share.puzzle')}
            </button>
            <button className="btn btn-sm" onClick={() => download('pdf?variant=solution')}>
              <IconFileTypePdf size={12} style={{ verticalAlign: -1, marginRight: 3 }} /> {t('share.solution')}
            </button>
          </div>
        </div>

        <div style={{ borderTop: '1px solid var(--border)', marginTop: 12, paddingTop: 12 }}>
          <button className="share-embed-toggle" onClick={() => setShowEmbed(!showEmbed)}>
            <IconCodeCircleFilled size={12} />
            <span>{t('share.embedOnWebsite')}</span>
            <IconChevronDownFilled size={10} style={{ transform: showEmbed ? 'rotate(180deg)' : 'none', transition: 'transform 200ms' }} />
          </button>

          <AnimatePresence>
            {showEmbed && (
            <motion.div style={{ marginTop: 10, textAlign: 'left', overflow: 'hidden' }}
              initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }}
              exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.2 }}>
              <div style={{ display: 'flex', gap: 8, marginBottom: 8, justifyContent: 'center' }}>
                {(['auto', 'light', 'dark'] as const).map(t => (
                  <button key={t} className={`theme-chip ${embedTheme === t ? 'theme-chip-active' : ''}`}
                    onClick={() => setEmbedTheme(t)}>{t}</button>
                ))}
              </div>
              <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginBottom: 10, fontSize: '0.688rem', fontFamily: 'var(--font-body)' }}>
                <label style={{ display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer', color: 'var(--text-secondary)' }}>
                  <input type="checkbox" checked={embedTimer} onChange={e => setEmbedTimer(e.target.checked)} /> {t('share.timer')}
                </label>
                <label style={{ display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer', color: 'var(--text-secondary)' }}>
                  <input type="checkbox" checked={embedHints} onChange={e => setEmbedHints(e.target.checked)} /> {t('share.hintsLabel')}
                </label>
              </div>
              <div style={{
                background: 'var(--surface)', border: '1px solid var(--border)',
                padding: '0.5rem', fontFamily: 'var(--font-mono)', fontSize: '0.563rem',
                color: 'var(--text-secondary)', wordBreak: 'break-all', lineHeight: 1.5,
                marginBottom: 8,
              }}>
                {embedCode}
              </div>
              <button className="btn btn-sm" onClick={copyEmbed} style={{ width: '100%' }}>
                <IconCopy size={12} style={{ verticalAlign: -1, marginRight: 4 }} aria-hidden="true" /> {copiedEmbed ? <span role="status">{t('common.copied')}</span> : t('share.copyEmbed')}
              </button>
            </motion.div>
            )}
          </AnimatePresence>
        </div>
      </motion.div>
    </motion.div>
  )
}