import {
  LayoutGrid,
  Server,
  Bookmark,
  Terminal,
  Waypoints,
  FolderOpen,
  Box,
  MonitorSmartphone,
  Gauge,
  Settings,
  Search,
  type LucideIcon,
} from 'lucide-react'

const cardBase: React.CSSProperties = {
  backgroundColor: 'rgba(10, 10, 12, 0.92)',
  border: '1px solid rgba(200, 164, 52, 0.08)',
  borderRadius: '12px',
  padding: '22px',
}

interface GuideEntry {
  icon: LucideIcon
  title: string
  description: string
  tips?: string[]
}

const guideEntries: GuideEntry[] = [
  {
    icon: LayoutGrid,
    title: 'Glance',
    description:
      'The home dashboard. Shows overall system health, a rollup of connected integrations, recent activity, and shortcuts into the rest of the app.',
    tips: ['Click "Connected Integrations" entries to jump straight to Infrastructure.'],
  },
  {
    icon: Server,
    title: 'Infrastructure',
    description:
      'Lists every connected integration (Proxmox, AWS, Docker, NetBird, Cloudflare, Uptime Kuma, Weather, SSH hosts) and the live resources/health each one reports.',
    tips: ['Add new integrations from Settings → Integrations — they show up here automatically.'],
  },
  {
    icon: Bookmark,
    title: 'BookNest',
    description: 'A categorized bookmark manager for the links you use most — internal tools, dashboards, docs, anything.',
    tips: [
      'Icons are auto-detected from the title or URL (e.g. typing "Proxmox" picks up the real Proxmox logo) — pick "Choose manually" if it guesses wrong.',
      'Star a bookmark to pin it to the Favorites panel.',
    ],
  },
  {
    icon: Terminal,
    title: 'Terminal',
    description: 'A full SSH terminal to any host you\'ve added as an integration — supports tabs, split panes, jump hosts, and certificate auth.',
    tips: ['Session output can be logged; theme and font preferences are remembered between visits.'],
  },
  {
    icon: Waypoints,
    title: 'Tunnels',
    description: 'Local, remote, and dynamic (SOCKS5) SSH tunnels. Tunnels can be set to auto-start whenever the backend boots.',
  },
  {
    icon: FolderOpen,
    title: 'Files',
    description: 'Browse, edit, upload, and download files over SFTP on any connected SSH host — and transfer files directly between two hosts without round-tripping through your machine.',
    tips: ['Use the "Send to another host" action on a file row to start a host-to-host transfer; progress shows live in the panel at the bottom.'],
  },
  {
    icon: Box,
    title: 'Containers',
    description: 'Manage Docker containers on remote hosts — start, stop, view logs, and exec into a running container.',
  },
  {
    icon: MonitorSmartphone,
    title: 'Remote Desktop',
    description: 'RDP, VNC, and Telnet sessions to remote machines, streamed through the built-in Guacamole proxy — no separate client needed.',
  },
  {
    icon: Gauge,
    title: 'Host Metrics',
    description: 'Live CPU, memory, disk, network, listening-port, firewall, process, and login-activity widgets for any SSH-managed host.',
  },
  {
    icon: Settings,
    title: 'Settings',
    description: 'Your profile, integrations, appearance, notifications, and full data export/import (back up or migrate every integration, bookmark, and tunnel as a single JSON file).',
  },
  {
    icon: Search,
    title: 'Search (top bar)',
    description: 'The search box at the top of every page looks across pages, integrations, and bookmarks at once — press Enter to jump to the top match.',
  },
]

export default function Help() {
  return (
    <div className="p-8" style={{ maxWidth: '1100px' }}>
      <div style={{ marginBottom: '28px' }}>
        <h1 style={{ fontSize: '22px', color: '#E8E6E0', fontWeight: 700, marginBottom: '6px' }}>How ArchNest works</h1>
        <p style={{ fontSize: '13px', color: '#7A7D85' }}>
          A quick tour of every page and what it's for. Use the sidebar to navigate, or the search bar at the top to jump straight to something.
        </p>
      </div>

      <div className="grid grid-cols-2 gap-4">
        {guideEntries.map((entry) => {
          const Icon = entry.icon
          return (
            <div key={entry.title} style={cardBase}>
              <div className="flex items-center gap-3" style={{ marginBottom: '10px' }}>
                <div
                  className="flex items-center justify-center"
                  style={{
                    width: '36px',
                    height: '36px',
                    borderRadius: '8px',
                    backgroundColor: 'rgba(200,164,52,0.1)',
                    border: '1px solid rgba(200,164,52,0.18)',
                    flexShrink: 0,
                  }}
                >
                  <Icon size={18} style={{ color: '#C8A434' }} />
                </div>
                <h3 style={{ fontSize: '14px', color: '#E8E6E0', fontWeight: 600 }}>{entry.title}</h3>
              </div>
              <p style={{ fontSize: '12.5px', color: '#A8A6A0', lineHeight: 1.6 }}>{entry.description}</p>
              {entry.tips && entry.tips.length > 0 && (
                <ul style={{ marginTop: '10px', paddingLeft: '16px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
                  {entry.tips.map((tip, i) => (
                    <li key={i} style={{ fontSize: '11.5px', color: '#7A7D85', lineHeight: 1.5 }}>
                      {tip}
                    </li>
                  ))}
                </ul>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}