import { createFileRoute } from "@tanstack/react-router";
import { AppShell } from "@/components/layout/AppShell";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { mockLogs } from "@/lib/mock-data";

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

function Logs() {
  return (
    <AppShell variant="admin" title="Admin · Logs">
      <Card>
        <CardContent className="p-0">
          <div className="flex flex-wrap items-center gap-2 border-b p-4">
            <Input placeholder="Filter messages…" className="h-8 max-w-xs" />
            <Select defaultValue="all">
              <SelectTrigger className="h-8 w-32"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All levels</SelectItem>
                <SelectItem value="info">Info</SelectItem>
                <SelectItem value="warn">Warn</SelectItem>
                <SelectItem value="error">Error</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="font-mono text-xs">
            {mockLogs.map((l, i) => (
              <div key={i} className="flex items-start gap-3 border-b px-4 py-2">
                <span className="text-muted-foreground">{l.ts}</span>
                <Badge variant={l.level === "error" ? "destructive" : l.level === "warn" ? "outline" : "secondary"} className="h-5">
                  {l.level}
                </Badge>
                <span className="flex-1">{l.msg}</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </AppShell>
  );
}