import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import Link from "next/link";

// Placeholder SVG for QR Code
const PlaceholderQrCode = () => (
  <svg width="128" height="128" viewBox="0 0 100 100" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" fill="hsl(var(--muted))"/>
    <rect x="10" y="10" width="20" height="20" fill="hsl(var(--foreground))"/>
    <rect x="40" y="10" width="20" height="20" fill="hsl(var(--foreground))"/>
    <rect x="70" y="10" width="20" height="20" fill="hsl(var(--foreground))"/>
    <rect x="10" y="40" width="20" height="20" fill="hsl(var(--foreground))"/>
    <rect x="70" y="40" width="20" height="20" fill="hsl(var(--foreground))"/>
    <rect x="10" y="70" width="20" height="20" fill="hsl(var(--foreground))"/>
    <rect x="40" y="70" width="20" height="20" fill="hsl(var(--foreground))"/>
    <rect x="70" y="70" width="20" height="20" fill="hsl(var(--foreground))"/>
    <rect x="50" y="50" width="10" height="10" fill="hsl(var(--foreground))"/>
  </svg>
);

export default function UpgradePage() {
  const xmrAddress = "4YOURXMRADDRESSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
  const ltcAddress = "LYOURLTCADDRESSXXXXXXXXXXXXXXXXXXXXXXX";

  return (
    <div className="container mx-auto p-4 py-8 md:py-12 space-y-8">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold tracking-tight">Support & Upgrade</h1>
        <div className="space-x-2">
          <Link href="/news" passHref>
            <Button variant="ghost">News</Button>
          </Link>
          <Link href="/settings" passHref>
            <Button variant="ghost">Settings</Button>
          </Link>
          <Link href="/" passHref>
            <Button variant="outline">Back to Indexer</Button>
          </Link>
        </div>
      </div>
      <CardDescription className="text-center text-xl text-muted-foreground max-w-2xl mx-auto">
        If you find this NZB Indexer useful, please consider supporting its development and maintenance.
        Your contributions help keep the servers running and allow us to introduce new features!
      </CardDescription>

      <div className="grid md:grid-cols-2 gap-10">
        {/* Monero (XMR) Card */}
        <Card className="shadow-[0_8px_30px_rgb(160,32,240,0.3)] hover:shadow-[0_12px_40px_rgb(160,32,240,0.4)] transition-all duration-300 ease-out">
          <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
                <CardTitle className="text-2xl font-semibold">Monero (XMR)</CardTitle>
                {/* Optional: XMR Icon can go here */}
            </div>
            <CardDescription className="pt-1">
              Donate Monero for private, untraceable support.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6 text-center pt-4">
            <div className="flex justify-center my-6">
              <PlaceholderQrCode />
            </div>
            <p className="text-sm font-medium text-foreground/90">XMR Address:</p>
            <div className="flex items-center space-x-2">
              <Input type="text" value={xmrAddress} readOnly className="text-xs bg-background/30 border-foreground/20" />
              <Button variant="outline" size="sm" disabled>Copy</Button>
            </div>
            <p className="text-xs text-muted-foreground pt-2">
              Ensure you are sending XMR to this address. Transactions are irreversible.
            </p>
          </CardContent>
        </Card>

        {/* Litecoin (LTC) Card */}
        <Card className="shadow-[0_8px_30px_rgb(56,189,248,0.3)] hover:shadow-[0_12px_40px_rgb(56,189,248,0.4)] transition-all duration-300 ease-out">
          <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
                <CardTitle className="text-2xl font-semibold">Litecoin (LTC)</CardTitle>
                {/* Optional: LTC Icon can go here */}
            </div>
            <CardDescription className="pt-1">
              Donate Litecoin for fast and low-fee transactions.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6 text-center pt-4">
            <div className="flex justify-center my-6">
              <PlaceholderQrCode />
            </div>
            <p className="text-sm font-medium text-foreground/90">LTC Address:</p>
            <div className="flex items-center space-x-2">
              <Input type="text" value={ltcAddress} readOnly className="text-xs bg-background/30 border-foreground/20" />
              <Button variant="outline" size="sm" disabled>Copy</Button>
            </div>
            <p className="text-xs text-muted-foreground pt-2">
              Ensure you are sending LTC to this address. Transactions are irreversible.
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}