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

const platforms = [
  {
    name: 'Windows',
    icon: Monitor,
    description: 'Windows 10/11 (64-bit)',
    filename: 'RemoteLink-Setup.exe',
    size: '45 MB',
    available: true,
  },
  {
    name: 'macOS',
    icon: Apple,
    description: 'macOS 11+ (Apple Silicon & Intel)',
    filename: 'RemoteLink.dmg',
    size: '52 MB',
    available: true,
  },
  {
    name: 'Linux',
    icon: Terminal,
    description: 'Ubuntu, Debian, Fedora, Arch',
    filename: 'remotelink-agent.AppImage',
    size: '48 MB',
    available: true,
  },
]

const features = [
  {
    icon: Shield,
    title: 'Secure',
    description: 'End-to-end encryption for all connections',
  },
  {
    icon: Cpu,
    title: 'Lightweight',
    description: 'Minimal system resource usage',
  },
  {
    icon: HardDrive,
    title: 'Portable',
    description: 'No installation required on Windows',
  },
]

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. 
          The agent runs in the background and enables secure connections.
        </p>
      </div>

      <div className="grid gap-4 md:grid-cols-3">
        {platforms.map((platform) => (
          <Card key={platform.name} className="border-border/50">
            <CardHeader className="text-center pb-2">
              <div className="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10">
                <platform.icon className="h-7 w-7 text-primary" />
              </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>
                <p>{platform.size}</p>
              </div>
              <Button 
                className="w-full" 
                disabled={!platform.available}
              >
                <Download className="mr-2 h-4 w-4" />
                Download
              </Button>
            </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">Windows</h4>
            <ol className="list-decimal list-inside space-y-1 text-sm text-muted-foreground">
              <li>Download and run RemoteLink-Setup.exe</li>
              <li>Follow the installation wizard</li>
              <li>The agent will start automatically and appear in your system tray</li>
              <li>Click the tray icon to generate a session code</li>
            </ol>
          </div>
          <div>
            <h4 className="font-medium mb-2">macOS</h4>
            <ol className="list-decimal list-inside space-y-1 text-sm text-muted-foreground">
              <li>Download and open RemoteLink.dmg</li>
              <li>Drag RemoteLink to your Applications folder</li>
              <li>Open RemoteLink from Applications</li>
              <li>Grant accessibility permissions when prompted</li>
            </ol>
          </div>
          <div>
            <h4 className="font-medium mb-2">Linux</h4>
            <ol className="list-decimal list-inside space-y-1 text-sm text-muted-foreground">
              <li>Download the AppImage file</li>
              <li>Make it executable: <code className="bg-muted px-1 rounded">chmod +x remotelink-agent.AppImage</code></li>
              <li>Run the AppImage</li>
              <li>The agent will appear in your system tray</li>
            </ol>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}