import { createFileRoute } from "@tanstack/react-router";
import { AppShell } from "@/components/layout/AppShell";
import { Card, CardContent } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { mockUsers } from "@/lib/mock-data";

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

function Users() {
  return (
    <AppShell variant="admin" title="Admin · Users">
      <Card>
        <CardContent className="p-0">
          <div className="flex items-center justify-between border-b p-4">
            <h2 className="text-sm font-medium">{mockUsers.length} users</h2>
            <Button size="sm">Invite user</Button>
          </div>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Email</TableHead>
                <TableHead>Role</TableHead>
                <TableHead>Storage</TableHead>
                <TableHead>Files</TableHead>
                <TableHead>Joined</TableHead>
                <TableHead>Status</TableHead>
                <TableHead></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {mockUsers.map((u) => (
                <TableRow key={u.email}>
                  <TableCell className="font-medium">{u.email}</TableCell>
                  <TableCell><Badge variant={u.role === "Admin" ? "default" : "outline"}>{u.role}</Badge></TableCell>
                  <TableCell className="text-muted-foreground">{u.storage}</TableCell>
                  <TableCell>{u.files}</TableCell>
                  <TableCell className="text-muted-foreground">{u.joined}</TableCell>
                  <TableCell><Badge variant={u.status === "Active" ? "secondary" : "destructive"}>{u.status}</Badge></TableCell>
                  <TableCell><Button variant="ghost" size="sm">Manage</Button></TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </AppShell>
  );
}