'use client';
import { useEffect, useState } from 'react';

export default function Shell({ title, subtitle, children }) {
  const [showInstall, setShowInstall] = useState(false);

  useEffect(() => {
    // 检测是否已在PWA模式，不是则提示安装
    const isStandalone =
      window.matchMedia('(display-mode: standalone)').matches ||
      window.navigator.standalone;
    if (!isStandalone) {
      const timer = setTimeout(() => setShowInstall(true), 3000);
      return () => clearTimeout(timer);
    }
  }, []);

  return (
    <main className="flex min-h-screen min-h-dvh flex-col px-4 py-10 pb-safe">
      <div className="mx-auto w-full max-w-lg">
        <header className="mb-8 text-center">
          <p className="mb-3 inline-block rounded-full border border-white/10 px-3 py-1 text-xs tracking-[0.2em] text-white/30">
            LINGJING
          </p>
          <h1 className="text-2xl font-semibold tracking-tight text-white/90">{title}</h1>
          {subtitle && (
            <p className="mt-2 text-sm text-white/40">{subtitle}</p>
          )}
        </header>
        {children}
      </div>

      {showInstall && (
        <div className="install-hint" onClick={() => setShowInstall(false)}>
          📲 添加到主屏幕，获得沉浸式体验 &nbsp;✕
        </div>
      )}
    </main>
  );
}