import { ArrowLeft, Download, Monitor, Terminal } from 'lucide-react'

const downloads = [
  {
    href: '/downloads/fieldlens-print-windows-x64-setup.exe',
    label: 'Windows',
    detail: 'x64 · NSIS installer · current-user install',
    icon: Monitor,
  },
  {
    href: '/downloads/fieldlens-print-linux-x64.deb',
    label: 'Linux',
    detail: 'x64 · Debian / Ubuntu .deb package',
    icon: Terminal,
  },
  {
    href: '/downloads/install.sh',
    label: 'Linux install script',
    detail: 'x64 · verifies SHA-256 · installs the .deb',
    icon: Terminal,
  },
]

export function DesktopDownloadsLink({ onOpen }: { onOpen: () => void }) {
  return (
    <section className="settings-section desktop-downloads-link">
      <header>
        <span className="settings-icon"><Download /></span>
        <div><h2>Desktop app</h2><p>Capture printed barcodes without a physical scan</p></div>
      </header>

      <button className="desktop-download-settings-link" type="button" onClick={onOpen}>
        <span>
          <strong>Get the desktop app</strong>
          <small>Windows and Linux installers</small>
        </span>
        <span className="desktop-download-action"><Download size={13} /> Downloads</span>
      </button>
    </section>
  )
}

export function DesktopDownloadsPage({ onBack }: { onBack: () => void }) {
  return (
    <main className="downloads-page">
      <div className="downloads-shell">
        <button className="downloads-back" type="button" onClick={onBack}><ArrowLeft size={16} /> Back to FieldLens</button>

        <header className="downloads-hero">
          <span className="downloads-mark">FL</span>
          <div>
            <p className="downloads-kicker">FIELDLENS PRINT</p>
            <h1>Get the desktop app</h1>
            <p>Capture barcodes directly from print jobs and sync them into FieldLens without a physical scan.</p>
          </div>
        </header>

        <section className="downloads-panel" aria-labelledby="downloads-title">
          <div className="downloads-panel-heading">
            <div>
              <h2 id="downloads-title">Choose your platform</h2>
              <p>FieldLens Print captures RAW/ZPL and spool output locally, extracts barcode values, then syncs them to FieldLens.</p>
            </div>
          </div>

          <div className="desktop-download-grid">
            {downloads.map(({ href, label, detail, icon: Icon }) => (
              <a className="desktop-download-card" href={href} download key={href}>
                <span className="desktop-download-icon"><Icon size={21} /></span>
                <span className="desktop-download-copy">
                  <strong>{label}</strong>
                  <small>{detail}</small>
                </span>
                <span className="desktop-download-action"><Download size={14} /> Download</span>
              </a>
            ))}
          </div>

          <div className="downloads-command">
            <span>Linux quick install</span>
            <code>curl -fsSL https://fieldlens.arrowstack.dev/downloads/install.sh | sh</code>
          </div>

          <div className="downloads-notes">
            <p><strong>Windows:</strong> installs for the current user, so the app itself does not require administrator elevation.</p>
            <p><strong>Linux script:</strong> supports x86_64/amd64 Debian/Ubuntu-style systems and verifies the package checksum before installation.</p>
            <p><strong>Printer setup:</strong> changing a managed Windows printer queue or port can still require IT/admin permission.</p>
          </div>
        </section>
      </div>
    </main>
  )
}