import { useState } from 'react'

const bridge = (window as any).{{bridgeGlobal}} || {}

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

export default function Home(): JSX.Element {
  const [fileContent, setFileContent] = useState('')
  const [filePath, setFilePath] = useState('')
  const [clipText, setClipText] = useState('')
  const [inputText, setInputText] = useState('Hello from mixone!')
  const [toast, setToast] = useState<{ msg: string; type: string } | null>(null)

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

  async function openFile() {
    const r = await bridge.dialog?.openFile({ title: 'Select file', filters: [{ 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: 'Message dialog demo', buttons: ['Cancel', 'OK'] })
    showToast(`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') }

  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 + TypeScript + Electron · mixone IPC full demo</p>
      </div>

      <div className="stat-grid">
        {[{ val: bridge.version, lbl: 'Electron', icon: '⚡' }, { val: bridge.chrome, lbl: 'Chromium', icon: '🌐' }, { val: bridge.node, lbl: 'Node.js', icon: '📦' }, { val: bridge.platform, lbl: 'Platform', icon: '💻' }].map(s => (
          <div className="stat-box" key={s.lbl}>
            <div className="stat-icon">{s.icon}</div>
            <div className="stat-value">{s.val || '-'}</div>
            <div className="stat-label">{s.lbl}</div>
          </div>
        ))}
      </div>

      <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>
        </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>

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

      <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>

      <div className="card">
        <div className="card-title">🪟 Window Management</div>
        <div className="btn-group">
          <button className="btn" onClick={() => { bridge.window?.open({ url: baseUrl() + '#/about', width: 600, height: 400 }); showToast('Opened', 'success') }}>📄 Child window</button>
          <button className="btn" onClick={() => bridge.window?.openModal({ url: baseUrl() + '#/about', width: 520, height: 420 })} style={{ borderColor: 'rgba(168,85,247,0.3)', color: '#c084fc' }}>🔒 Modal</button>
          <button className="btn" onClick={async () => { const r = await bridge.window?.maximize(); showToast(r?.maximized ? 'Maximized' : 'Restored', 'info') }}>🔼 Maximize</button>
          <button className="btn" onClick={() => bridge.window?.minimize()}>⬇️ Minimize</button>
          <button className="btn btn-danger" onClick={() => bridge.window?.close()}>✕ Close</button>
        </div>
      </div>

      <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>

      <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.fs.readText(path)</span><span className="tag tag-green">Read file</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.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>
  )
}