// Shared screen shell — geri butonlu header + başlık.
// Daha önce directions.jsx içinde yaşıyordu; o ekran kaldırılınca silinmişti ama
// upload / tables / photos / games / dj / admin ekranlarının hepsi buna dayanıyor.
// index.html'deki .shell-header / .shell-pad / .shell-title sınıflarıyla çalışır.
function ScreenShell({ title, kicker, onBack, children, pad = true }) {
  return (
    <div style={shellStyles.wrap}>
      <header className="shell-header" style={shellStyles.header}>
        {/* Geniş, etiketli dokunma hedefi — kolay basılsın (sadece ok değil). */}
        <button onClick={onBack} className="shell-back" style={shellStyles.backBtn} aria-label="Geri">
          <span className="shell-back__circle" style={shellStyles.backCircle}>
            <Icons.ArrowLeft size={20} />
            <span className="label" style={{ fontSize: 12.5, letterSpacing: '0.08em' }}>Geri</span>
          </span>
        </button>
        <div style={{ textAlign: 'right' }}>
          {kicker && <div className="label-sm" style={{ opacity: 0.65 }}>{kicker}</div>}
        </div>
      </header>
      <div className={pad ? 'shell-pad' : 'shell-pad-bare'}>
        {title && <h1 className="hand shell-title" style={shellStyles.title}>{title}</h1>}
        {children}
      </div>
    </div>
  );
}

const shellStyles = {
  wrap: { minHeight: '100dvh', paddingBottom: 30 },
  header: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: 'max(22px, env(safe-area-inset-top))',
    paddingBottom: 12,
  },
  // Şeffaf, geniş dokunma hedefi (~104×56); görünür hap butonu içerir.
  // Negatif margin + padding ile isabet alanı görünür butonun her yanına taşar.
  backBtn: {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    minHeight: 52,
    margin: '-8px -12px',
    padding: '8px 12px',
    background: 'transparent',
    border: 0,
    cursor: 'pointer',
    WebkitTapHighlightColor: 'transparent',
    touchAction: 'manipulation',
  },
  // Görünür buton: ok + "Geri" etiketli hap.
  backCircle: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 7,
    height: 42,
    padding: '0 16px 0 13px',
    borderRadius: 999,
    border: '1.5px solid rgba(150,40,64,0.3)',
    color: 'var(--burgundy)',
    transition: 'background 0.12s ease, transform 0.08s ease',
  },
  title: {
    margin: '10px 0 18px',
    color: 'var(--burgundy)',
  },
};

// Basınca anında görsel geri bildirim (parmak değdiği an).
const shellBackCSS = `
  .shell-back{ -webkit-tap-highlight-color:transparent; }
  .shell-back:active .shell-back__circle,
  .shell-back:focus-visible .shell-back__circle{
    background:rgba(150,40,64,0.14);
    transform:scale(0.92);
  }
  .shell-back:focus{ outline:none; }
`;
if (typeof document !== 'undefined' && !document.getElementById('__shell-back')) {
  const s = document.createElement('style');
  s.id = '__shell-back';
  s.textContent = shellBackCSS;
  document.head.appendChild(s);
}

window.ScreenShell = ScreenShell;