import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Download, Monitor, Apple, Terminal, Shield, Cpu, HardDrive, Clock } from 'lucide-react'
import Link from 'next/link'

const platforms = [
  {
    name: 'Windows',
    icon: Monitor,
    description: 'Windows 10/11 (64-bit)',
    filename: 'RemoteLink-Setup.exe',
    downloadPath: null,
    available: false,
    note: 'Coming soon — build on Windows with PyInstaller + NSIS',
  },
  {
    name: 'macOS',
    icon: Apple,
    description: 'macOS 11+ (Apple Silicon & Intel)',
    filename: 'remotelink-agent-macos',
    downloadPath: null,
    available: false,
    note: 'Coming soon — build on macOS with PyInstaller',
  },
  {
    name: 'Linux',
    icon: Terminal,
    description: 'x86_64 — Ubuntu, Debian, Fedora, Arch',
    filename: 'remotelink-agent-linux',
    downloadPath: '/downloads/remotelink-agent-linux',
    available: true,
    size: '19 MB',
    note: null,
  },
]

const features = [
  { icon: Shield, title: 'Secure', description: 'All traffic routed through your own relay server' },
  { icon: Cpu, title: 'Lightweight', description: 'Single binary, minimal CPU and memory usage' },
  { icon: HardDrive, title: 'Portable', description: 'Run once with no install, or deploy as a service' },
]

export default function DownloadPage() {
  return (
    <div className="max-w-4xl mx-auto space-y-8">
      <div className="text-center">
        <h2 className="text-2xl font-bold mb-2">Download RemoteLink Agent</h2>
        <p className="text-muted-foreground max-w-xl mx-auto text-balance">
          Install the agent on machines you want to control remotely.
          It connects back to your server and waits for a viewer session.
        </p>
      </div>

      <div className="grid gap-4 md:grid-cols-3">
        {platforms.map((platform) => (
          <Card key={platform.name} className={`border-border/50 ${!platform.available ? 'opacity-60' : ''}`}>
            <CardHeader className="text-center pb-2">
              <div className={`mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-xl ${platform.available ? 'bg-primary/10' : 'bg-muted'}`}>
                <platform.icon className={`h-7 w-7 ${platform.available ? 'text-primary' : 'text-muted-foreground'}`} />
              </div>
              <CardTitle>{platform.name}</CardTitle>
              <CardDescription>{platform.description}</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="text-center text-sm text-muted-foreground">
                <p className="font-mono">{platform.filename}</p>
                {platform.available && 'size' in platform && <p>{platform.size}</p>}
              </div>

              {platform.available && platform.downloadPath ? (
                <Button className="w-full" asChild>
                  <a href={platform.downloadPath} download={platform.filename}>
                    <Download className="mr-2 h-4 w-4" />
                    Download
                  </a>
                </Button>
              ) : (
                <Button className="w-full" disabled>
                  <Clock className="mr-2 h-4 w-4" />
                  Coming soon
                </Button>
              )}

              {platform.note && (
                <p className="text-xs text-muted-foreground text-center">{platform.note}</p>
              )}
            </CardContent>
          </Card>
        ))}
      </div>

      <Card className="border-border/50 bg-muted/20">
        <CardContent className="py-6">
          <h3 className="font-semibold mb-4 text-center">Agent Features</h3>
          <div className="grid gap-6 sm:grid-cols-3">
            {features.map((feature) => (
              <div key={feature.title} className="flex items-start gap-3">
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                  <feature.icon className="h-5 w-5 text-primary" />
                </div>
                <div>
                  <p className="font-medium">{feature.title}</p>
                  <p className="text-sm text-muted-foreground">{feature.description}</p>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <Card className="border-border/50">
        <CardHeader>
          <CardTitle>Installation Instructions</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <h4 className="font-medium mb-2">Linux — run once (portable)</h4>
            <ol className="list-decimal list-inside space-y-1 text-sm text-muted-foreground">
              <li>Download <code className="bg-muted px-1 rounded">remotelink-agent-linux</code></li>
              <li>Make it executable: <code className="bg-muted px-1 rounded">chmod +x remotelink-agent-linux</code></li>
              <li>Get an enrollment token from <Link href="/dashboard/admin" className="text-primary underline underline-offset-2">Admin → Agent enrollment</Link></li>
              <li>Run: <code className="bg-muted px-1 rounded">./remotelink-agent-linux --server https://your-server --enroll YOUR_TOKEN --run-once</code></li>
            </ol>
          </div>
          <div>
            <h4 className="font-medium mb-2">Linux — permanent install (reconnects on reboot)</h4>
            <ol className="list-decimal list-inside space-y-1 text-sm text-muted-foreground">
              <li>Run without <code className="bg-muted px-1 rounded">--run-once</code> — config is saved to <code className="bg-muted px-1 rounded">/etc/remotelink/agent.json</code></li>
              <li>Create a systemd service or add to crontab with <code className="bg-muted px-1 rounded">@reboot</code></li>
            </ol>
          </div>
          <div>
            <h4 className="font-medium mb-2">Windows — silent mass deploy (coming soon)</h4>
            <ol className="list-decimal list-inside space-y-1 text-sm text-muted-foreground">
              <li>Build <code className="bg-muted px-1 rounded">RemoteLink-Setup.exe</code> on a Windows machine using the NSIS installer script in the agent source</li>
              <li>Deploy silently: <code className="bg-muted px-1 rounded">RemoteLink-Setup.exe /S /SERVER=https://your-server /ENROLL=YOUR_TOKEN</code></li>
              <li>The installer registers a Windows Service that auto-starts on boot</li>
            </ol>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}