import VisitorChat from '@/widgets/VisitorChat'

const WidgetPreview = () => {
  const origin = typeof window !== 'undefined' ? window.location.origin : 'https://your-host'

  return (
    <div className="min-h-screen bg-neutral-100 relative overflow-hidden">
      <div className="max-w-[960px] mx-auto px-6 py-10 opacity-40 select-none pointer-events-none">
        <div className="h-10 w-3/5 bg-neutral-200 rounded mb-4" />
        <div className="h-4 w-[90%] bg-neutral-200 rounded mb-3" />
        <div className="h-4 w-3/4 bg-neutral-200 rounded mb-6" />
        <div className="flex gap-4 mb-6">
          <div className="w-[200px] h-[120px] bg-neutral-200 rounded-lg" />
          <div className="w-[200px] h-[120px] bg-neutral-200 rounded-lg" />
          <div className="w-[200px] h-[120px] bg-neutral-200 rounded-lg" />
        </div>
        <div className="h-4 w-[85%] bg-neutral-200 rounded mb-3" />
        <div className="h-4 w-[70%] bg-neutral-200 rounded mb-3" />
        <div className="h-[200px] w-full bg-neutral-200 rounded-lg" />
      </div>

      <div className="absolute top-6 left-1/2 -translate-x-1/2 w-full max-w-xl px-4 pointer-events-auto">
        <div className="bg-white/95 backdrop-blur border border-neutral-200 rounded-xl shadow-sm p-4">
          <h1 className="text-base font-semibold text-neutral-800 m-0 mb-1">访客 Widget 预览</h1>
          <p className="text-xs text-neutral-500 m-0 mb-3">
            右下角为聊天组件。任意站点可嵌入下方脚本（iframe 版 SDK）。
          </p>
          <pre className="m-0 text-[11px] leading-relaxed bg-neutral-50 border border-neutral-100 rounded-lg p-3 overflow-x-auto text-neutral-700 whitespace-pre-wrap">
            {`<script src="${origin}/widget.js" data-id="WK_8a3f2e"></script>`}
          </pre>
          <p className="text-[11px] text-neutral-400 mt-2 mb-0">
            也可打开独立嵌入页：
            <a className="text-blue-600 ml-1" href="/widget/embed?channel_key=WK_8a3f2e&embedded=1" target="_blank" rel="noreferrer">
              /widget/embed
            </a>
          </p>
        </div>
      </div>

      <VisitorChat defaultOpen channelKey="WK_8a3f2e" />
    </div>
  )
}

export default WidgetPreview