import { createFileRoute, Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { PageHeader, EmptyState } from "@/components/common/PageHeader";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Shield } from "lucide-react";
import { appealsService } from "@/services/api/appeals";
import type { Appeal, AppealStatus } from "@/types";
import { useAuthStore } from "@/store/auth";

export const Route = createFileRoute("/_public/account/appeals")({
  head: () => ({ meta: [{ title: "Appeals — Account" }] }),
  component: AppealsPage,
});

const TONE: Record<AppealStatus, string> = {
  submitted: "border-muted-foreground/40 text-muted-foreground",
  under_review: "border-info/40 text-info",
  more_info: "border-warning/40 text-warning",
  approved: "border-success/40 text-success",
  rejected: "border-destructive/40 text-destructive",
  closed: "border-border text-muted-foreground",
};

function AppealsPage() {
  const user = useAuthStore((s) => s.user);
  const [list, setList] = useState<Appeal[]>([]);
  useEffect(() => { appealsService.list(user?.id).then(setList); }, [user?.id]);

  return (
    <div className="space-y-4">
      <PageHeader title="My appeals" description="Track appeals you have submitted for punishments." />
      <div className="flex justify-end">
        <Button asChild variant="outline"><Link to="/punishments"><Shield className="mr-1.5 h-4 w-4" /> Browse punishments to appeal</Link></Button>
      </div>
      {list.length === 0 ? (
        <EmptyState title="No appeals yet" hint="Open a punishment page and submit an appeal." />
      ) : (
        <div className="overflow-hidden rounded-xl border border-border bg-card">
          <table className="w-full text-sm">
            <thead className="bg-surface text-left text-xs uppercase text-muted-foreground">
              <tr><th className="px-3 py-2.5">ID</th><th className="px-3 py-2.5">Punishment</th><th className="px-3 py-2.5">Reason</th><th className="px-3 py-2.5">Status</th><th className="px-3 py-2.5">Updated</th></tr>
            </thead>
            <tbody className="divide-y divide-border/40">
              {list.map((a) => (
                <tr key={a.id} className="hover:bg-surface/40">
                  <td className="px-3 py-2.5 font-mono text-xs"><Link to="/account/appeals/$id" params={{ id: a.id }} className="hover:text-secondary">{a.id}</Link></td>
                  <td className="px-3 py-2.5"><Link to="/punishments/$id" params={{ id: a.punishmentId }} className="hover:text-secondary">{a.punishmentId}</Link></td>
                  <td className="px-3 py-2.5">{a.reason}</td>
                  <td className="px-3 py-2.5"><Badge variant="outline" className={TONE[a.status]}>{a.status.replace("_", " ")}</Badge></td>
                  <td className="px-3 py-2.5 text-muted-foreground">{a.updatedAt}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}