// File: monorepo/web/maplefile-frontend/src/pages/Anonymous/Download/DownloadPage.jsx
// Simple download page for MapleFile desktop application
import { Link } from "react-router";
import { Button, Card, useUIXTheme } from "../../../components/UIX";
import {
  ArrowRightIcon,
  ArrowDownTrayIcon,
  LockClosedIcon,
} from "@heroicons/react/24/outline";

function DownloadPage() {
  const { getThemeClasses } = useUIXTheme();
  const currentVersion = "1.0.0";

  const downloads = [
    { platform: "macOS (Apple Silicon)", filename: `maplefile-${currentVersion}-darwin-arm64.dmg`, available: false },
    { platform: "macOS (Intel)", filename: `maplefile-${currentVersion}-darwin-amd64.dmg`, available: false },
    { platform: "Windows (64-bit)", filename: `maplefile-${currentVersion}-windows-amd64.exe`, available: false },
    { platform: "Linux (64-bit)", filename: `maplefile-${currentVersion}-linux-amd64.tar.gz`, available: false },
    { platform: "Linux (ARM64)", filename: `maplefile-${currentVersion}-linux-arm64.tar.gz`, available: false },
  ];

  return (
    <div className={`min-h-screen ${getThemeClasses("bg-gradient-primary")}`}>
      {/* Navigation */}
      <nav className={`relative z-50 ${getThemeClasses("bg-card")}/95 backdrop-blur-sm border-b ${getThemeClasses("border-muted")}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            <Link to="/" className="flex items-center group">
              <div className={`flex items-center justify-center h-10 w-10 ${getThemeClasses("bg-gradient-secondary")} rounded-lg mr-3 group-hover:scale-105 transition-transform duration-200`}>
                <LockClosedIcon className="h-6 w-6 text-white" />
              </div>
              <span className={`text-2xl font-bold ${getThemeClasses("text-primary")}`}>
                MapleFile
              </span>
            </Link>
            <div className="hidden md:flex items-center space-x-6">
              <Link to="/#how-it-works" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-accent")} font-medium`}>
                How It Works
              </Link>
              <Link to="/#security" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-accent")} font-medium`}>
                Security
              </Link>
              <Link to="/#pricing" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-accent")} font-medium`}>
                Pricing
              </Link>
              <Link to="/#faq" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-accent")} font-medium`}>
                FAQ
              </Link>
            </div>
            <div className="flex items-center space-x-4">
              <Link to="/login">
                <Button variant="ghost" size="md">Sign in</Button>
              </Link>
              <Link to="/register">
                <Button variant="primary" size="md" className="group">
                  <span className="flex items-center whitespace-nowrap">
                    Get Started Free
                    <ArrowRightIcon className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform duration-200 flex-shrink-0" />
                  </span>
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </nav>

      {/* Content */}
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="text-center mb-12">
          <h1 className={`text-4xl font-black ${getThemeClasses("text-primary")} mb-4`}>
            Download MapleFile
          </h1>
          <p className={`text-lg ${getThemeClasses("text-secondary")}`}>
            Desktop app with offline support and automatic sync.
          </p>
        </div>

        {/* Downloads List */}
        <Card className={`border ${getThemeClasses("border-muted")} mb-8`}>
          <div className={`divide-y ${getThemeClasses("divide-muted")}`}>
            {downloads.map((item, index) => (
              <div key={index} className="flex items-center justify-between px-6 py-4">
                <div>
                  <span className={`font-medium ${getThemeClasses("text-primary")}`}>{item.platform}</span>
                </div>
                {item.available ? (
                  <Button variant="secondary" size="sm">
                    <ArrowDownTrayIcon className="h-4 w-4 mr-2" />
                    Download
                  </Button>
                ) : (
                  <span className={`text-sm ${getThemeClasses("text-secondary")} font-medium`}>Coming Soon</span>
                )}
              </div>
            ))}
          </div>
        </Card>

        <p className={`text-center ${getThemeClasses("text-secondary")} text-sm mb-12`}>
          <Link to="/register" className={`${getThemeClasses("link-primary")} font-medium`}>
            Sign up
          </Link>
          {" "}to be notified when downloads are available.
        </p>

        {/* Web App CTA */}
        <Card className={`border-2 ${getThemeClasses("border-accent")} ${getThemeClasses("bg-accent-light")} p-8 text-center`}>
          <h2 className={`text-2xl font-bold ${getThemeClasses("text-primary")} mb-2`}>
            Use the Web App Now
          </h2>
          <p className={`${getThemeClasses("text-secondary")} mb-6`}>
            No download required. Get 10 GB free.
          </p>
          <Link to="/register">
            <Button variant="primary" size="lg" className="group">
              <span className="flex items-center">
                Get Started Free
                <ArrowRightIcon className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
              </span>
            </Button>
          </Link>
        </Card>
      </div>

      {/* Footer */}
      <footer className={`${getThemeClasses("bg-card")} border-t ${getThemeClasses("border-muted")} py-8`}>
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between">
            <div className="flex items-center mb-4 md:mb-0">
              <LockClosedIcon className={`h-5 w-5 ${getThemeClasses("text-accent")} mr-2`} />
              <span className={`font-bold ${getThemeClasses("text-primary")}`}>MapleFile</span>
              <span className={`ml-3 ${getThemeClasses("text-secondary")} text-sm`}>Made with ❤️ in Canada</span>
            </div>
            <div className={`flex space-x-6 text-sm ${getThemeClasses("text-secondary")}`}>
              <Link to="/" className={getThemeClasses("hover:text-accent")}>Home</Link>
              <Link to="/register" className={getThemeClasses("hover:text-accent")}>Register</Link>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default DownloadPage;
