import { useState } from 'react'

const bridge = window.mixone || {}

function baseUrl() { return location.origin + location.pathname }

export default function Home() {
  const [fileContent, setFileContent] = useState('')
  const [filePath, setFilePath] = useState('')
  const [clipText, setClipText] = useState('')
  const [inputText, setInputText] = useState('Hello from mixone!')
  const [toast, setToast] = useState(null)

  function showToast(msg, type = 'info') {
    setToast({ msg, type })
    setTimeout(() => setToast(null), 2500)
  }

  async function openFile() {
    const r = await bridge.dialog?.openFile({
      title: 'Select file',
      filters: [{ name: 'Text', extensions: ['txt', 'md', 'js', 'ts', 'json'] }, { name: 'All', extensions: ['*'] }]
    })
    if (r?.canceled || !r?.filePaths?.length) return
    setFilePath(r.filePaths[0])
    const data = await bridge.fs?.readText(r.filePaths[0])
    if (data) { setFileContent(data.content); showToast(`Read ${data.size} bytes`, 'success') }
  }

  async function saveFile() {
    const r = await bridge.dialog?.saveFile({ title: 'Save file', defaultPath: 'untitled.txt' })
    if (r?.canceled || !r?.filePath) return
    const d = await bridge.fs?.writeText(r.filePath, fileContent)
    if (d) showToast(`Saved ${d.bytesWritten} bytes`, 'success')
  }

  async function messageBox() {
    const r = await bridge.dialog?.messageBox({ type: 'question', title: 'Confirm', message: 'This is a message dialog', buttons: ['Cancel', 'OK', 'Ignore'] })
    showToast(`You clicked button #${r?.response}`, 'info')
  }

  async function readClip() { const t = await bridge.clipboard?.readText(); setClipText(t || '(empty)'); showToast('Read clipboard', 'success') }
  async function writeClip() { await bridge.clipboard?.writeText(inputText); showToast('Wrote clipboard', 'success'); await readClip() }
  async function clearClip() { await bridge.clipboard?.clear(); setClipText('(cleared)'); showToast('Cleared clipboard', 'success') }

  function openSub() { bridge.window?.open({ url: baseUrl() + '#/about', width: 600, height: 400, title: 'Child Window' }); showToast('Child window opened', 'success') }
  function openModal() { bridge.window?.openModal({ url: baseUrl() + '#/about', width: 520, height: 420, title: 'Modal' }) }
  async function toggleMax() { const r = await bridge.window?.maximize(); showToast(r?.maximized ? 'Maximized' : 'Restored', 'info') }
  async function checkExists() { if (!filePath) return showToast('Select a file first', 'error'); const ok = await bridge.fs?.exists(filePath); showToast(ok ? 'File exists' : 'File not found', ok ? 'success' : 'info') }
  async function showInFolder() { if (!filePath) return showToast('Select a file first', 'error'); await bridge.shell?.showItemInFolder(filePath) }

  return (
    <div>
      {toast && <div className="toast-box"><div className={`toast toast-${toast.type}`}>{toast.msg}</div></div>}

      <div className="page-header">
        <h1>{{appName}}</h1>
        <p>React 19 + Electron · mixone IPC bridge full demo</p>
      </div>

      <div className="stat-grid">
        <div className="stat-box"><div className="stat-value">{bridge.version || '-'}</div><div className="stat-label">Electron</div></div>
        <div className="stat-box"><div className="stat-value">{bridge.chrome || '-'}</div><div className="stat-label">Chromium</div></div>
        <div className="stat-box"><div className="stat-value">{bridge.node || '-'}</div><div className="stat-label">Node.js</div></div>
        <div className="stat-box"><div className="stat-value">{bridge.platform || '-'}</div><div className="stat-label">Platform</div></div>
      </div>

      {/* Dialog + FS */}
      <div className="card">
        <div className="card-title">📁 File Dialog & Filesystem</div>
        <div className="btn-group" style={{ marginBottom: 12 }}>
          <button className="btn btn-primary" onClick={openFile}>📂 Open file</button>
          <button className="btn" onClick={saveFile}>💾 Save file</button>
          <button className="btn" onClick={checkExists}>🔍 Check exists</button>
          <button className="btn" onClick={showInFolder}>📁 Show in folder</button>
        </div>
        {filePath && <div className="info-row" style={{ marginBottom: 8 }}><span className="info-label">Current file</span><span className="info-value" style={{ fontSize: 11, wordBreak: 'break-all' }}>{filePath}</span></div>}
        <textarea className="textarea" value={fileContent} onChange={e => setFileContent(e.target.value)} placeholder="File content..." />
      </div>

      {/* Dialog */}
      <div className="card">
        <div className="card-title">💬 Message Dialog</div>
        <button className="btn" onClick={messageBox}>Open message dialog (3 buttons)</button>
      </div>

      {/* Clipboard */}
      <div className="card">
        <div className="card-title">📋 Clipboard</div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
          <input className="textarea" style={{ minHeight: 'auto', flex: 1 }} value={inputText} onChange={e => setInputText(e.target.value)} placeholder="Input text..." />
          <button className="btn btn-primary" onClick={writeClip}>Write</button>
        </div>
        <div className="info-row" style={{ marginBottom: 8 }}><span className="info-label">Clipboard</span><span className="info-value" style={{ fontSize: 12 }}>{clipText}</span></div>
        <div className="btn-group">
          <button className="btn" onClick={readClip}>🔄 Read</button>
          <button className="btn btn-danger" onClick={clearClip}>🗑️ Clear</button>
        </div>
      </div>

      {/* Window */}
      <div className="card">
        <div className="card-title">🪟 Window Management</div>
        <div className="btn-group">
          <button className="btn" onClick={openSub}>📄 Child window</button>
          <button className="btn" onClick={openModal} style={{ borderColor: 'rgba(168,85,247,0.3)', color: '#c084fc' }}>🔒 Modal</button>
          <button className="btn" onClick={toggleMax}>🔼 Maximize/Restore</button>
          <button className="btn" onClick={() => bridge.window?.minimize()}>⬇️ Minimize</button>
          <button className="btn btn-danger" onClick={() => bridge.window?.close()}>✕ Close</button>
        </div>
      </div>

      {/* Shell */}
      <div className="card">
        <div className="card-title">🔗 Shell Integration</div>
        <div className="btn-group">
          <button className="btn" onClick={() => bridge.shell?.openExternal('https://github.com/qew4/mixone-example')}>🌐 GitHub</button>
          <button className="btn" onClick={() => bridge.shell?.openExternal('https://www.npmjs.com/package/mixone')}>📦 npm</button>
          <button className="btn" onClick={() => bridge.shell?.beep()}>🔔 Beep</button>
        </div>
      </div>

      {/* API */}
      <div className="card">
        <div className="card-title">📖 API Reference</div>
        <div className="info-row"><span className="info-label">bridge.dialog.openFile(opts)</span><span className="tag tag-blue">File dialog</span></div>
        <div className="info-row"><span className="info-label">bridge.dialog.saveFile(opts)</span><span className="tag tag-blue">Save dialog</span></div>
        <div className="info-row"><span className="info-label">bridge.dialog.messageBox(opts)</span><span className="tag tag-blue">Message dialog</span></div>
        <div className="info-row"><span className="info-label">bridge.fs.readText(path)</span><span className="tag tag-green">Read file</span></div>
        <div className="info-row"><span className="info-label">bridge.fs.writeText(path, data)</span><span className="tag tag-green">Write file</span></div>
        <div className="info-row"><span className="info-label">bridge.clipboard.readText()</span><span className="tag tag-green">Read clipboard</span></div>
        <div className="info-row"><span className="info-label">bridge.clipboard.writeText(text)</span><span className="tag tag-green">Write clipboard</span></div>
        <div className="info-row"><span className="info-label">bridge.window.open(opts)</span><span className="tag tag-blue">New window</span></div>
        <div className="info-row"><span className="info-label">bridge.window.openModal(opts)</span><span className="tag tag-blue">Modal</span></div>
        <div className="info-row"><span className="info-label">bridge.shell.openExternal(url)</span><span className="tag tag-green">Open URL</span></div>
        <div className="info-row"><span className="info-label">bridge.app.info()</span><span className="tag tag-green">App info</span></div>
      </div>
    </div>
  )
}