import { createFileRoute, notFound, Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { appealsService } from "@/services/api/appeals";
import type { Appeal } from "@/types";
import { toast } from "sonner";
import { useAuthStore } from "@/store/auth";

export const Route = createFileRoute("/_public/account/appeals/$id")({
  loader: async ({ params }) => {
    const a = await appealsService.get(params.id);
    if (!a) throw notFound();
    return { a };
  },
  head: ({ loaderData }) => ({ meta: [{ title: loaderData ? `Appeal ${loaderData.a.id}` : "Appeal" }] }),
  component: AppealDetailPage,
});

function AppealDetailPage() {
  const { a } = Route.useLoaderData();
  const [appeal, setAppeal] = useState<Appeal>(a);
  const [reply, setReply] = useState("");
  const user = useAuthStore((s) => s.user);

  useEffect(() => { setAppeal(a); }, [a]);

  async function send() {
    if (!reply.trim() || !user) return;
    const next = await appealsService.reply(appeal.id, reply.trim(), "player", user.name);
    setAppeal(next); setReply(""); toast.success("Reply sent");
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2 text-xs text-muted-foreground">
        <Link to="/account/appeals" className="hover:text-secondary">← All appeals</Link>
      </div>
      <div className="rounded-xl border border-border bg-card p-5">
        <div className="flex flex-wrap items-center gap-2">
          <h1 className="font-display text-xl font-bold">Appeal {appeal.id}</h1>
          <Badge variant="outline" className="capitalize">{appeal.status.replace("_", " ")}</Badge>
          {appeal.assignedAdmin && <Badge variant="outline">Assigned: {appeal.assignedAdmin}</Badge>}
        </div>
        <div className="mt-4 grid gap-4 md:grid-cols-2 text-sm">
          <div><dt className="text-xs uppercase text-muted-foreground">Punishment</dt><dd><Link to="/punishments/$id" params={{ id: appeal.punishmentId }} className="hover:text-secondary">{appeal.punishmentId}</Link></dd></div>
          <div><dt className="text-xs uppercase text-muted-foreground">Reason</dt><dd>{appeal.reason}</dd></div>
          <div className="md:col-span-2"><dt className="text-xs uppercase text-muted-foreground">Explanation</dt><dd className="whitespace-pre-wrap">{appeal.explanation}</dd></div>
          {appeal.evidenceLinks.length > 0 && <div className="md:col-span-2"><dt className="text-xs uppercase text-muted-foreground">Evidence</dt><dd className="space-y-0.5">{appeal.evidenceLinks.map((l) => <a key={l} href={l} target="_blank" rel="noreferrer" className="block truncate text-secondary hover:underline">{l}</a>)}</dd></div>}
          {appeal.videoUrl && <div className="md:col-span-2"><dt className="text-xs uppercase text-muted-foreground">Video</dt><dd><a href={appeal.videoUrl} target="_blank" rel="noreferrer" className="text-secondary hover:underline">{appeal.videoUrl}</a></dd></div>}
          {appeal.attachments.length > 0 && <div className="md:col-span-2"><dt className="text-xs uppercase text-muted-foreground">Attachments</dt><dd>{appeal.attachments.map((f) => <a key={f.url} href={f.url} className="mr-2 text-xs text-secondary hover:underline">{f.name}</a>)}</dd></div>}
        </div>
      </div>

      <div className="grid gap-4 lg:grid-cols-[1fr_320px]">
        <div className="space-y-3">
          <div className="rounded-xl border border-border bg-card p-4">
            <h3 className="font-semibold">Messages</h3>
            <div className="mt-3 space-y-3">
              {appeal.messages.length === 0 && <p className="text-sm text-muted-foreground">No messages yet.</p>}
              {appeal.messages.map((m) => (
                <div key={m.id} className={`rounded-md border p-3 text-sm ${m.role === "admin" ? "border-primary/30 bg-primary/5" : "border-border bg-surface/60"}`}>
                  <div className="mb-1 flex items-center gap-2 text-xs text-muted-foreground"><span className="font-semibold text-foreground">{m.author}</span><Badge variant="outline" className="capitalize">{m.role}</Badge>{m.time}</div>
                  <div>{m.body}</div>
                </div>
              ))}
            </div>
            {!["approved", "rejected", "closed"].includes(appeal.status) && (
              <div className="mt-4 space-y-2">
                <Textarea rows={3} value={reply} onChange={(e) => setReply(e.target.value)} placeholder="Add more information…" />
                <div className="flex justify-end"><Button size="sm" onClick={send} disabled={!reply.trim()} className="gradient-primary text-primary-foreground">Send reply</Button></div>
              </div>
            )}
          </div>
        </div>
        <div className="rounded-xl border border-border bg-card p-4">
          <h3 className="font-semibold">Timeline</h3>
          <ol className="mt-3 space-y-2">
            {appeal.timeline.map((t, i) => (
              <li key={i} className="text-xs">
                <div className="text-muted-foreground">{t.time}</div>
                <div>{t.label}</div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </div>
  );
}