import { Badge } from "@/registry/ui/badge"
import { Button } from "@/registry/ui/button"
import { Card, CardTitle } from "@/registry/ui/card"
import { Input } from "@/registry/ui/input"
import { Select } from "@/registry/ui/select"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/registry/ui/table"

const summary = [
  { label: "Open", value: "24" },
  { label: "Overdue", value: "3" },
  { label: "Resolved today", value: "17" },
]

const rows = [
  {
    id: "REQ-4192",
    subject: "Rate limit on /v1/orders",
    owner: "Priya R.",
    status: "Open",
    variant: "accent",
    age: "2h",
  },
  {
    id: "REQ-4187",
    subject: "Backfill missing customer_id",
    owner: "Tomas E.",
    status: "Blocked",
    variant: "warning",
    age: "1d",
  },
  {
    id: "REQ-4179",
    subject: "Read replica lag in eu-west",
    owner: "Dana W.",
    status: "Overdue",
    variant: "danger",
    age: "4d",
  },
  {
    id: "REQ-4165",
    subject: "Rotate the staging key",
    owner: "Mara A.",
    status: "Done",
    variant: "success",
    age: "6d",
  },
]

export default function AppDashboard() {
  return (
    <section className="px-6 py-10">
      <div className="mx-auto max-w-5xl">
        <div className="flex flex-wrap items-end justify-between gap-4">
          <div>
            <p className="font-mono text-xs text-muted">workspace / northwind</p>
            <h1 className="mt-1 text-2xl font-semibold tracking-tight">Requests</h1>
          </div>
          <Button size="sm">New request</Button>
        </div>

        <div className="mt-6 flex flex-wrap gap-6">
          {summary.map((item) => (
            <div key={item.label}>
              <p className="text-xl font-semibold">{item.value}</p>
              <p className="font-mono text-xs text-muted">{item.label}</p>
            </div>
          ))}
        </div>

        <Card className="mt-8 overflow-hidden">
          {/* Card's own header and content parts set their padding; this row
              needs none on the sides, so it is a plain div instead. */}
          <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border p-4">
            <CardTitle className="text-sm">Last 30 days</CardTitle>
            <div className="flex w-full gap-2 sm:w-auto">
              <Input size="sm" placeholder="Filter by subject…" className="sm:w-56" />
              <Select size="sm" defaultValue="all" className="sm:w-36">
                <option value="all">All statuses</option>
                <option value="open">Open</option>
                <option value="blocked">Blocked</option>
                <option value="done">Done</option>
              </Select>
            </div>
          </div>

          <div>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="pl-6">Request</TableHead>
                  <TableHead>Owner</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="pr-6 text-right">Age</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {rows.map((row) => (
                  <TableRow key={row.id}>
                    <TableCell className="pl-6">
                      <span className="block font-medium text-fg">{row.subject}</span>
                      <span className="font-mono text-xs">{row.id}</span>
                    </TableCell>
                    <TableCell>{row.owner}</TableCell>
                    <TableCell>
                      <Badge size="sm" variant={row.variant}>
                        {row.status}
                      </Badge>
                    </TableCell>
                    <TableCell className="pr-6 text-right font-mono text-xs">
                      {row.age}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </Card>
      </div>
    </section>
  )
}