import { createFileRoute } from "@tanstack/react-router";
import { AppShell } from "@/components/layout/AppShell";
import { Card, CardContent } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { HardDrive, Cloud } from "lucide-react";

export const Route = createFileRoute("/admin/storage")({
  head: () => ({ meta: [{ title: "Admin · Storage — warpbox.dev" }] }),
  component: Storage,
});

function Storage() {
  return (
    <AppShell variant="admin" title="Admin · Storage">
      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-2"><HardDrive className="h-4 w-4" /><h2 className="font-medium">Local disk</h2><Badge variant="secondary" className="ml-auto">Primary</Badge></div>
            <p className="mt-1 text-sm text-muted-foreground">/var/lib/warpbox/data</p>
            <div className="mt-4 space-y-2">
              <div className="flex justify-between text-sm"><span>Used</span><span>412 GB / 1 TB</span></div>
              <Progress value={41} />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-2"><Cloud className="h-4 w-4" /><h2 className="font-medium">S3 backend</h2><Badge variant="outline" className="ml-auto">Mirror</Badge></div>
            <p className="mt-1 text-sm text-muted-foreground">s3://warpbox-archive · eu-central-1</p>
            <div className="mt-4 space-y-2">
              <div className="flex justify-between text-sm"><span>Synced</span><span>388 GB</span></div>
              <Progress value={94} />
            </div>
          </CardContent>
        </Card>
        <Card className="lg:col-span-2">
          <CardContent className="p-6">
            <h2 className="font-medium">Cleanup</h2>
            <p className="mt-1 text-sm text-muted-foreground">Run housekeeping for expired buckets and orphaned chunks.</p>
            <div className="mt-4 flex flex-wrap gap-2">
              <Button>Run cleanup now</Button>
              <Button variant="outline">Reindex storage</Button>
              <Button variant="outline">Verify S3 mirror</Button>
            </div>
            <p className="mt-3 text-xs text-muted-foreground">Last run: 14 minutes ago · 47 buckets removed · 312 MB reclaimed</p>
          </CardContent>
        </Card>
      </div>
    </AppShell>
  );
}