provenance/frontend/app/trees/[id]/persons/[personId]/page.tsx

"use client";

import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { useCallback, useEffect, useMemo, 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, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";

type Person = components["schemas"]["PersonRead"];
type Event = components["schemas"]["EventRead"];
type Relationship = components["schemas"]["RelationshipRead"];
type Qualifier = components["schemas"]["ParentChildQualifier"];
type RelCreate = components["schemas"]["RelationshipCreate"];

const fieldCls =
  "h-10 rounded-md border border-[var(--border)] bg-[var(--surface)] px-2 text-sm";

const QUALIFIERS: Qualifier[] = ["biological", "adoptive", "step", "foster", "donor", "guardian"];

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

  const [person, setPerson] = useState<Person | null>(null);
  const [people, setPeople] = useState<Person[]>([]);
  const [events, setEvents] = useState<Event[]>([]);
  const [rels, setRels] = useState<Relationship[]>([]);
  const [ready, setReady] = useState(false);

  const [evType, setEvType] = useState("birth");
  const [evDate, setEvDate] = useState("");

  const [relKind, setRelKind] = useState<"parent" | "child" | "partner" | "sibling">("parent");
  const [relOther, setRelOther] = useState("");
  const [relQual, setRelQual] = useState<Qualifier>("biological");

  const load = useCallback(async () => {
    const p = await api.GET("/api/v1/trees/{tree_id}/persons/{person_id}", {
      params: { path: { tree_id: treeId, person_id: personId } },
    });
    if (p.response.status === 401) {
      router.push("/login");
      return;
    }
    setPerson(p.data ?? null);
    const [all, ev, rl] = await Promise.all([
      api.GET("/api/v1/trees/{tree_id}/persons", { params: { path: { tree_id: treeId } } }),
      api.GET("/api/v1/trees/{tree_id}/persons/{person_id}/events", {
        params: { path: { tree_id: treeId, person_id: personId } },
      }),
      api.GET("/api/v1/trees/{tree_id}/persons/{person_id}/relationships", {
        params: { path: { tree_id: treeId, person_id: personId } },
      }),
    ]);
    setPeople(all.data ?? []);
    setEvents(ev.data ?? []);
    setRels(rl.data ?? []);
    setReady(true);
  }, [router, treeId, personId]);

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

  const nameOf = useMemo(() => {
    const m = new Map(people.map((p) => [p.id, p.primary_name ?? "Unnamed"]));
    return (id: string) => m.get(id) ?? "Unknown";
  }, [people]);

  const others = people.filter((p) => p.id !== personId);
  const parents = rels.filter((r) => r.type === "parent_child" && r.person_to_id === personId);
  const children = rels.filter((r) => r.type === "parent_child" && r.person_from_id === personId);
  const partners = rels.filter((r) => r.type === "partnership");
  const siblings = rels.filter((r) => r.type === "sibling");

  async function addEvent(e: React.FormEvent) {
    e.preventDefault();
    if (!evType.trim()) return;
    const { error } = await api.POST("/api/v1/trees/{tree_id}/events", {
      params: { path: { tree_id: treeId } },
      body: { event_type: evType, person_id: personId, date_value: evDate || null },
    });
    if (!error) {
      setEvDate("");
      load();
    }
  }

  async function removeEvent(id: string) {
    await api.DELETE("/api/v1/trees/{tree_id}/events/{event_id}", {
      params: { path: { tree_id: treeId, event_id: id } },
    });
    load();
  }

  async function addRel(e: React.FormEvent) {
    e.preventDefault();
    if (!relOther) return;
    let body: RelCreate;
    if (relKind === "parent") {
      body = { type: "parent_child", person_from_id: relOther, person_to_id: personId, qualifier: relQual };
    } else if (relKind === "child") {
      body = { type: "parent_child", person_from_id: personId, person_to_id: relOther, qualifier: relQual };
    } else if (relKind === "partner") {
      body = { type: "partnership", person_from_id: personId, person_to_id: relOther };
    } else {
      body = { type: "sibling", person_from_id: personId, person_to_id: relOther };
    }
    const { error } = await api.POST("/api/v1/trees/{tree_id}/relationships", {
      params: { path: { tree_id: treeId } },
      body,
    });
    if (!error) {
      setRelOther("");
      load();
    }
  }

  async function removeRel(id: string) {
    await api.DELETE("/api/v1/trees/{tree_id}/relationships/{relationship_id}", {
      params: { path: { tree_id: treeId, relationship_id: id } },
    });
    load();
  }

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

  const relGroup = (label: string, items: Relationship[], otherId: (r: Relationship) => string) =>
    items.length > 0 && (
      <div>
        <h3 className="text-sm font-semibold text-bronze">{label}</h3>
        <ul className="mt-1 space-y-1">
          {items.map((r) => (
            <li key={r.id} className="flex items-center justify-between text-sm">
              <Link href={`/trees/${treeId}/persons/${otherId(r)}`} className="hover:underline">
                {nameOf(otherId(r))}
                {r.qualifier ? <span className="text-[var(--muted)]"> · {r.qualifier}</span> : null}
              </Link>
              <button
                onClick={() => removeRel(r.id)}
                className="text-[var(--muted)] hover:text-bronze"
                aria-label="Remove"
              >
                ×
              </button>
            </li>
          ))}
        </ul>
      </div>
    );

  return (
    <div className="space-y-6">
      <Link href={`/trees/${treeId}`} className="text-sm text-[var(--muted)] hover:underline">
        ← Back to tree
      </Link>

      <h1 className="text-3xl font-semibold">{person.primary_name ?? "Unnamed person"}</h1>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Life events</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {events.length === 0 ? (
            <p className="text-sm text-[var(--muted)]">No events yet.</p>
          ) : (
            <ul className="space-y-1">
              {events.map((ev) => (
                <li key={ev.id} className="flex items-center justify-between text-sm">
                  <span>
                    <span className="font-medium capitalize">{ev.event_type}</span>
                    {ev.date_value ? (
                      <span className="text-[var(--muted)]"> — {ev.date_value}</span>
                    ) : null}
                  </span>
                  <button
                    onClick={() => removeEvent(ev.id)}
                    className="text-[var(--muted)] hover:text-bronze"
                    aria-label="Remove"
                  >
                    ×
                  </button>
                </li>
              ))}
            </ul>
          )}
          <form onSubmit={addEvent} className="flex flex-wrap gap-2">
            <Input
              className="w-36"
              placeholder="Event type"
              value={evType}
              onChange={(e) => setEvType(e.target.value)}
            />
            <Input
              className="w-40"
              placeholder="Date (e.g. ABT 1850)"
              value={evDate}
              onChange={(e) => setEvDate(e.target.value)}
            />
            <Button type="submit">Add event</Button>
          </form>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Relationships</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {rels.length === 0 ? (
            <p className="text-sm text-[var(--muted)]">No relationships yet.</p>
          ) : (
            <div className="grid gap-4 sm:grid-cols-2">
              {relGroup("Parents", parents, (r) => r.person_from_id)}
              {relGroup("Children", children, (r) => r.person_to_id)}
              {relGroup("Partners", partners, (r) =>
                r.person_from_id === personId ? r.person_to_id : r.person_from_id,
              )}
              {relGroup("Siblings", siblings, (r) =>
                r.person_from_id === personId ? r.person_to_id : r.person_from_id,
              )}
            </div>
          )}

          {others.length === 0 ? (
            <p className="text-sm text-[var(--muted)]">Add more people to the tree to link them.</p>
          ) : (
            <form onSubmit={addRel} className="flex flex-wrap items-center gap-2">
              <span className="text-sm text-[var(--muted)]">Add</span>
              <select
                className={fieldCls}
                value={relKind}
                onChange={(e) => setRelKind(e.target.value as typeof relKind)}
              >
                <option value="parent">parent</option>
                <option value="child">child</option>
                <option value="partner">partner</option>
                <option value="sibling">sibling</option>
              </select>
              <select
                className={fieldCls}
                value={relOther}
                onChange={(e) => setRelOther(e.target.value)}
              >
                <option value="">— person —</option>
                {others.map((p) => (
                  <option key={p.id} value={p.id}>
                    {p.primary_name ?? "Unnamed"}
                  </option>
                ))}
              </select>
              {(relKind === "parent" || relKind === "child") && (
                <select
                  className={fieldCls}
                  value={relQual}
                  onChange={(e) => setRelQual(e.target.value as Qualifier)}
                >
                  {QUALIFIERS.map((q) => (
                    <option key={q} value={q}>
                      {q}
                    </option>
                  ))}
                </select>
              )}
              <Button type="submit">Link</Button>
            </form>
          )}
        </CardContent>
      </Card>
    </div>
  );
}