import { createFileRoute, Link } from "@tanstack/react-router";
import { useMemo, useState } from "react";
import { PageHeader, EmptyState } from "@/components/common/PageHeader";
import { AdminDataTable, type Column } from "@/components/common/AdminDataTable";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { punishments } from "@/features/_mock/data";
import type { Punishment } from "@/types";

export const Route = createFileRoute("/_public/account/punishments")({
  head: () => ({ meta: [
    { title: "My punishments — Purple Zone Account" },
    { name: "description", content: "Punishments issued against your account and their appeal status." },
  ]}),
  component: PunishmentsPage,
});

const mine: Punishment[] = punishments.slice(0, 5);
const STATUS: Record<Punishment["status"], string> = {
  active: "border-destructive/40 text-destructive",
  expired: "border-muted-foreground/40 text-muted-foreground",
  removed: "border-success/40 text-success",
  appealed: "border-warning/40 text-warning",
  review: "border-primary/40 text-primary",
};

function PunishmentsPage() {
  const [q, setQ] = useState("");
  const [status, setStatus] = useState("all");
  const rows = useMemo(
    () => mine.filter((p) => (status === "all" || p.status === status) && (q === "" || p.reason.toLowerCase().includes(q.toLowerCase()) || p.id.includes(q))),
    [q, status],
  );

  const cols: Column<Punishment>[] = [
    { key: "id", header: "ID", cell: (p) => <span className="font-mono text-xs">{p.id}</span> },
    { key: "type", header: "Type", cell: (p) => <Badge variant="outline" className="capitalize">{p.type}</Badge> },
    { key: "reason", header: "Reason", cell: (p) => p.reason },
    { key: "srv", header: "Server", cell: (p) => <span className="text-muted-foreground">{p.server}</span> },
    { key: "dur", header: "Duration", cell: (p) => p.duration },
    { key: "left", header: "Remaining", cell: (p) => p.remaining },
    { key: "st", header: "Status", cell: (p) => <Badge variant="outline" className={`capitalize ${STATUS[p.status]}`}>{p.status}</Badge> },
  ];

  return (
    <div>
      <PageHeader title="Punishments" description="Punishments issued against your account." />
      {mine.length === 0 ? (
        <EmptyState title="Clean record" hint="No punishments on your account. Keep it up!" />
      ) : (
        <AdminDataTable
          rows={rows} columns={cols} search={q} onSearchChange={setQ}
          filters={
            <Select value={status} onValueChange={setStatus}>
              <SelectTrigger className="w-[160px]"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All statuses</SelectItem>
                <SelectItem value="active">Active</SelectItem>
                <SelectItem value="appealed">Appealed</SelectItem>
                <SelectItem value="expired">Expired</SelectItem>
                <SelectItem value="removed">Removed</SelectItem>
              </SelectContent>
            </Select>
          }
          rowActions={(p) => (
            <div className="flex justify-end gap-1">
              {p.status === "active" && <Button size="sm" className="gradient-primary text-primary-foreground" asChild><Link to="/punishments/$id" params={{ id: p.id }}>Appeal</Link></Button>}
              <Button size="sm" variant="ghost" asChild><Link to="/punishments/$id" params={{ id: p.id }}>Details</Link></Button>
            </div>
          )}
        />
      )}
    </div>
  );
}