"use client";

import { useParams, useRouter } from "next/navigation";
import { useCallback, useEffect, useState } from "react";

import { api } from "@/lib/api/client";
import type { components } from "@/lib/api/schema";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

type Person = components["schemas"]["PersonRead"];

export default function RecoveryPage() {
  const router = useRouter();
  const params = useParams<{ id: string }>();
  const treeId = params.id;

  const [people, setPeople] = useState<Person[]>([]);
  const [ready, setReady] = useState(false);

  const load = useCallback(async () => {
    const { data, response } = await api.GET("/api/v1/trees/{tree_id}/persons", {
      params: { path: { tree_id: treeId }, query: { deleted: true } },
    });
    if (response.status === 401) {
      router.push("/login");
      return;
    }
    setPeople(data ?? []);
    setReady(true);
  }, [router, treeId]);

  useEffect(() => {
    load();
  }, [load]);

  async function restore(id: string) {
    await api.POST("/api/v1/trees/{tree_id}/persons/{person_id}/restore", {
      params: { path: { tree_id: treeId, person_id: id } },
    });
    load();
  }

  if (!ready) return <p className="text-[var(--muted)]">Loading…</p>;

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-semibold">Recently deleted</h1>
      <p className="text-sm text-[var(--muted)]">
        Deleted people are recoverable for 30 days, then permanently purged.
      </p>
      {people.length === 0 ? (
        <p className="text-[var(--muted)]">Nothing here.</p>
      ) : (
        <ul className="space-y-2">
          {people.map((p) => (
            <li key={p.id}>
              <Card>
                <CardContent className="flex items-center justify-between p-4">
                  <span className="text-[var(--muted)]">{p.primary_name ?? "Unnamed"}</span>
                  <Button variant="outline" size="sm" onClick={() => restore(p.id)}>
                    Restore
                  </Button>
                </CardContent>
              </Card>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}