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

export default function SettingsPage() {
  // Dummy user statistics data
  const userStats = {
    rank: "Gold Tier",
    apiHitsToday: 750,
    apiLimitDaily: 1000,
    manualDownloadsToday: 5,
    manualDownloadLimitDaily: 20,
    filesDownloaded: 123,
  };

  const apiUsagePercentage = (userStats.apiHitsToday / userStats.apiLimitDaily) * 100;
  const manualDownloadsPercentage = (userStats.manualDownloadsToday / userStats.manualDownloadLimitDaily) * 100;

  return (
    <div className="container mx-auto p-4 py-8 md:py-12 lg:py-16 xl:max-w-7xl space-y-8 lg:space-y-10">
      <div className="flex justify-between items-center mb-6 lg:mb-8">
        <h1 className="text-3xl lg:text-4xl font-bold">User Settings</h1>
        <div className="space-x-2">
          <Link href="/news" passHref>
            <Button variant="ghost">News</Button>
          </Link>
          <Link href="/upgrade" passHref>
            <Button variant="ghost">Upgrade</Button>
          </Link>
          <Link href="/" passHref>
            <Button variant="outline">Back to Indexer</Button>
          </Link>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10">
        <div className="lg:col-span-2 space-y-8 lg:space-y-10">
          {/* User Statistics Card */}
          <Card className="shadow-sm">
            <CardHeader>
              <CardTitle className="text-xl lg:text-2xl">Your Statistics</CardTitle>
              <CardDescription>Overview of your account activity and limits.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="flex justify-between items-center">
                <span className="text-sm font-medium">Current Rank:</span>
                <span className="text-sm text-primary font-semibold">{userStats.rank}</span>
              </div>
              <div className="space-y-1">
                <div className="flex justify-between items-center mb-1">
                    <span className="text-sm font-medium">Daily API Usage:</span>
                    <span className="text-sm text-muted-foreground">
                        {userStats.apiHitsToday.toLocaleString()} / {userStats.apiLimitDaily.toLocaleString()} hits
                    </span>
                </div>
                <Progress value={apiUsagePercentage} className="w-full" />
              </div>
              <div className="space-y-1">
                <div className="flex justify-between items-center mb-1">
                    <span className="text-sm font-medium">Daily Manual Downloads:</span>
                    <span className="text-sm text-muted-foreground">
                        {userStats.manualDownloadsToday.toLocaleString()} / {userStats.manualDownloadLimitDaily.toLocaleString()} files
                    </span>
                </div>
                <Progress value={manualDownloadsPercentage} className="w-full" />
              </div>
              <div className="flex justify-between items-center">
                <span className="text-sm font-medium">Total Releases Grabbed (All Time):</span>
                <span className="text-sm font-semibold">{userStats.filesDownloaded.toLocaleString()}</span>
              </div>
            </CardContent>
            <CardFooter>
                <Link href="/upgrade" passHref className="w-full">
                    <Button className="w-full">Upgrade Your Tier</Button>
                </Link>
            </CardFooter>
          </Card>

          <Card className="shadow-sm">
            <CardHeader>
              <CardTitle className="text-xl lg:text-2xl">Account Information</CardTitle>
              <CardDescription>Manage your account details.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-1">
                <label htmlFor="username" className="text-sm font-medium">
                  Username
                </label>
                <Input id="username" defaultValue="CurrentUser" disabled />
              </div>
              <div className="space-y-1">
                <label htmlFor="email" className="text-sm font-medium">
                  Email
                </label>
                <Input id="email" type="email" defaultValue="user@example.com" disabled />
              </div>
            </CardContent>
            <CardFooter>
              <Button disabled>Update Account (Not Implemented)</Button>
            </CardFooter>
          </Card>

          <Card className="shadow-sm">
            <CardHeader>
              <CardTitle className="text-xl lg:text-2xl">API Key</CardTitle>
              <CardDescription>
                Manage your API key for external applications.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-1">
                <label htmlFor="apiKey" className="text-sm font-medium">
                  Your API Key
                </label>
                <div className="flex items-center space-x-2">
                  <Input
                    id="apiKey"
                    defaultValue="dummy-api-key-12345abcdef"
                    readOnly
                  />
                  <Button variant="outline" disabled>Copy (Not Implemented)</Button>
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <Button variant="secondary" disabled>Regenerate API Key (Not Implemented)</Button>
            </CardFooter>
          </Card>
        </div>

        <div className="lg:col-span-1 space-y-8 lg:space-y-10">
        <Card className="border-destructive shadow-sm">
          <CardHeader>
            <CardTitle className="text-xl lg:text-2xl text-destructive">Danger Zone</CardTitle>
            <CardDescription>
              Permanent actions that cannot be undone.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Button variant="destructive" disabled>
              Delete Account (Not Implemented)
            </Button>
          </CardContent>
        </Card>
        </div>
      </div>
    </div>
  );
}