import Link from "next/link";
import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { canEditHorse, getCurrentUser } from "@/lib/auth";
import { dueStatus, DUE_STATUS_LABELS, DUE_STATUS_COLORS } from "@/lib/health";
import { Field } from "@/components/Field";
import {
  addVaccination,
  updateVaccination,
  deleteVaccination,
  addDeworming,
  updateDeworming,
  deleteDeworming,
  addMedication,
  updateMedication,
  deleteMedication,
  addVetVisit,
  updateVetVisit,
  deleteVetVisit,
  addHealthDocument,
  updateHealthDocument,
  deleteHealthDocument,
  addAptitudeAssessment,
  updateAptitudeAssessment,
  deleteAptitudeAssessment,
} from "./actions";

function fmt(d: Date | null): string {
  return d ? new Date(d).toLocaleDateString() : "—";
}

function toDateInputValue(d: Date | null): string | undefined {
  if (!d) return undefined;
  const date = new Date(d);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

const inputCls =
  "w-full rounded-md border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1.5 text-sm text-neutral-900 dark:text-neutral-200 focus:border-neutral-500 focus:dark:border-neutral-400 focus:outline-none";

export default async function HealthRecordsPage(props: PageProps<"/horses/[id]/health">) {
  const { id } = await props.params;
  const sp = await props.searchParams;
  const editParam = (key: string) => (typeof sp[key] === "string" ? sp[key] : null);

  const horse = await prisma.horse.findUnique({
    where: { id },
    include: {
      vaccinations: { orderBy: { dateGiven: "desc" } },
      dewormings: { orderBy: { dateGiven: "desc" } },
      medications: { orderBy: { dateAdministered: "desc" } },
      vetVisits: { orderBy: { visitDate: "desc" } },
      healthDocuments: { orderBy: { createdAt: "desc" } },
      aptitudeAssessments: { orderBy: { assessmentDate: "desc" } },
    },
  });

  if (!horse) notFound();

  const currentUser = await getCurrentUser();
  const canEdit = !!currentUser && canEditHorse(currentUser, horse);

  const name = horse.registeredName || horse.barnName || "Unnamed Horse";
  const basePath = `/horses/${horse.id}/health`;

  const editVaccinationId = editParam("editVax");
  const editDewormingId = editParam("editDeworm");
  const editMedicationId = editParam("editMed");
  const editVetVisitId = editParam("editVet");
  const editHealthDocumentId = editParam("editDoc");
  const editAptitudeId = editParam("editApt");

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold">{name} — Health Records</h1>
          <p className="text-sm text-neutral-700 dark:text-neutral-300">Vaccinations, deworming, medications, vet visits, and documents.</p>
        </div>
        <Link
          href={`/horses/${horse.id}`}
          className="rounded-md border border-neutral-300 dark:border-neutral-700 px-4 py-2 text-sm font-medium hover:bg-neutral-50 hover:dark:bg-neutral-950"
        >
          Back to Profile
        </Link>
      </div>

      <section className="space-y-4 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 p-6">
        <div className="flex items-center justify-between">
          <h2 className="text-base font-semibold">Identification</h2>
          <Link href={`/horses/${horse.id}/edit`} className="text-sm text-neutral-700 dark:text-neutral-300 hover:underline">
            Edit on profile form
          </Link>
        </div>
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
          <div>
            <h3 className="mb-1 text-xs font-semibold uppercase text-neutral-600 dark:text-neutral-400">Microchip</h3>
            {horse.microchipNumber ? (
              <p className="text-sm text-neutral-800 dark:text-neutral-300">
                #{horse.microchipNumber}
                {horse.microchipIssuer ? ` · ${horse.microchipIssuer}` : ""}
                {horse.microchipDate ? ` · implanted ${fmt(horse.microchipDate)}` : ""}
              </p>
            ) : (
              <p className="text-sm text-neutral-700 dark:text-neutral-300">No microchip recorded.</p>
            )}
          </div>
          <div>
            <h3 className="mb-1 text-xs font-semibold uppercase text-neutral-600 dark:text-neutral-400">Brand</h3>
            {horse.brandLocation || horse.brandImageUrl || horse.brandDescription ? (
              <div className="space-y-2">
                {horse.brandLocation && <p className="text-sm text-neutral-800 dark:text-neutral-300">Location: {horse.brandLocation}</p>}
                {horse.brandImageUrl && (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={horse.brandImageUrl}
                    alt={`${name} brand`}
                    className="max-h-[200px] w-auto rounded-md border border-neutral-200 dark:border-neutral-700 object-contain"
                  />
                )}
                {horse.brandDescription && (
                  <p className="whitespace-pre-wrap text-sm text-neutral-800 dark:text-neutral-300">{horse.brandDescription}</p>
                )}
              </div>
            ) : (
              <p className="text-sm text-neutral-700 dark:text-neutral-300">No brand recorded.</p>
            )}
          </div>
        </div>
      </section>

      <section className="space-y-4 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 p-6">
        <h2 className="text-base font-semibold">Vaccinations</h2>
        {canEdit && (
          <form action={addVaccination.bind(null, horse.id)} className="grid grid-cols-2 gap-2 sm:grid-cols-6">
            <Field label="Product Name" required compact>
              <input name="productName" required className={inputCls} />
            </Field>
            <Field label="Lot #" compact>
              <input name="lotNumber" className={inputCls} />
            </Field>
            <Field label="Date Given" required compact>
              <input type="date" name="dateGiven" required className={inputCls} />
            </Field>
            <Field label="Next Due Date" compact>
              <input type="date" name="nextDueDate" className={inputCls} />
            </Field>
            <Field label="Administered By" compact>
              <input name="administeredBy" className={inputCls} />
            </Field>
            <Field label="Notes" compact>
              <input name="notes" className={inputCls} />
            </Field>
            <button type="submit" className="self-end rounded-md bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 dark:hover:bg-neutral-200">
              Add
            </button>
          </form>
        )}
        {horse.vaccinations.length === 0 ? (
          <p className="text-sm text-neutral-700 dark:text-neutral-300">No vaccinations recorded.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm">
            <thead className="text-neutral-700 dark:text-neutral-300">
              <tr>
                <th className="py-1 pr-3 font-medium">Product</th>
                <th className="py-1 pr-3 font-medium">Lot #</th>
                <th className="py-1 pr-3 font-medium">Given</th>
                <th className="py-1 pr-3 font-medium">Next Due</th>
                <th className="py-1 pr-3 font-medium">Status</th>
                <th className="py-1 pr-3 font-medium">By</th>
                <th className="py-1 font-medium"></th>
              </tr>
            </thead>
            <tbody>
              {horse.vaccinations.map((v) =>
                canEdit && editVaccinationId === v.id ? (
                  <tr key={v.id} className="border-t border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-950">
                    <td colSpan={7} className="py-2">
                      <form action={updateVaccination.bind(null, horse.id, v.id)} className="grid grid-cols-2 gap-2 sm:grid-cols-6">
                        <input type="hidden" name="_redirectTo" value={basePath} />
                        <Field label="Product Name" required compact>
                          <input name="productName" required defaultValue={v.productName} className={inputCls} />
                        </Field>
                        <Field label="Lot #" compact>
                          <input name="lotNumber" defaultValue={v.lotNumber ?? ""} className={inputCls} />
                        </Field>
                        <Field label="Date Given" required compact>
                          <input type="date" name="dateGiven" required defaultValue={toDateInputValue(v.dateGiven)} className={inputCls} />
                        </Field>
                        <Field label="Next Due Date" compact>
                          <input type="date" name="nextDueDate" defaultValue={toDateInputValue(v.nextDueDate)} className={inputCls} />
                        </Field>
                        <Field label="Administered By" compact>
                          <input name="administeredBy" defaultValue={v.administeredBy ?? ""} className={inputCls} />
                        </Field>
                        <Field label="Notes" compact>
                          <input name="notes" defaultValue={v.notes ?? ""} className={inputCls} />
                        </Field>
                        <div className="flex items-end gap-3">
                          <button type="submit" className="rounded-md bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 dark:hover:bg-neutral-200">
                            Save
                          </button>
                          <Link href={basePath} className="text-sm text-neutral-700 dark:text-neutral-300 hover:underline">Cancel</Link>
                        </div>
                      </form>
                    </td>
                  </tr>
                ) : (
                  <tr key={v.id} className="border-t border-neutral-100 dark:border-neutral-800">
                    <td className="py-1.5 pr-3">{v.productName}</td>
                    <td className="py-1.5 pr-3">{v.lotNumber ?? "—"}</td>
                    <td className="py-1.5 pr-3">{fmt(v.dateGiven)}</td>
                    <td className="py-1.5 pr-3">{fmt(v.nextDueDate)}</td>
                    <td className="py-1.5 pr-3">
                      {(() => {
                        const status = dueStatus(v.nextDueDate);
                        const c = DUE_STATUS_COLORS[status];
                        return (
                          <span className={`rounded-full border px-2 py-0.5 text-xs font-medium ${c.bg} ${c.border} ${c.text}`}>
                            {DUE_STATUS_LABELS[status]}
                          </span>
                        );
                      })()}
                    </td>
                    <td className="py-1.5 pr-3">{v.administeredBy ?? "—"}</td>
                    <td className="py-1.5 text-right">
                      {canEdit && (
                        <div className="flex justify-end gap-3">
                          <Link href={`${basePath}?editVax=${v.id}`} className="text-xs text-neutral-700 dark:text-neutral-300 hover:underline">Edit</Link>
                          <form action={deleteVaccination.bind(null, horse.id, v.id)}>
                            <button type="submit" className="text-xs text-red-700 dark:text-red-300 hover:underline">Delete</button>
                          </form>
                        </div>
                      )}
                    </td>
                  </tr>
                )
              )}
            </tbody>
            </table>
          </div>
        )}
      </section>

      <section className="space-y-4 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 p-6">
        <h2 className="text-base font-semibold">Deworming</h2>
        {canEdit && (
          <form action={addDeworming.bind(null, horse.id)} className="grid grid-cols-2 gap-2 sm:grid-cols-5">
            <Field label="Product" required compact>
              <input name="product" required className={inputCls} />
            </Field>
            <Field label="Date Given" required compact>
              <input type="date" name="dateGiven" required className={inputCls} />
            </Field>
            <Field label="Next Due Date" compact>
              <input type="date" name="nextDueDate" className={inputCls} />
            </Field>
            <Field label="Notes" compact>
              <input name="notes" className={inputCls} />
            </Field>
            <button type="submit" className="self-end rounded-md bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 dark:hover:bg-neutral-200">
              Add
            </button>
          </form>
        )}
        {horse.dewormings.length === 0 ? (
          <p className="text-sm text-neutral-700 dark:text-neutral-300">No deworming records.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm">
            <thead className="text-neutral-700 dark:text-neutral-300">
              <tr>
                <th className="py-1 pr-3 font-medium">Product</th>
                <th className="py-1 pr-3 font-medium">Given</th>
                <th className="py-1 pr-3 font-medium">Next Due</th>
                <th className="py-1 pr-3 font-medium">Status</th>
                <th className="py-1 font-medium"></th>
              </tr>
            </thead>
            <tbody>
              {horse.dewormings.map((d) =>
                canEdit && editDewormingId === d.id ? (
                  <tr key={d.id} className="border-t border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-950">
                    <td colSpan={5} className="py-2">
                      <form action={updateDeworming.bind(null, horse.id, d.id)} className="grid grid-cols-2 gap-2 sm:grid-cols-5">
                        <input type="hidden" name="_redirectTo" value={basePath} />
                        <Field label="Product" required compact>
                          <input name="product" required defaultValue={d.product} className={inputCls} />
                        </Field>
                        <Field label="Date Given" required compact>
                          <input type="date" name="dateGiven" required defaultValue={toDateInputValue(d.dateGiven)} className={inputCls} />
                        </Field>
                        <Field label="Next Due Date" compact>
                          <input type="date" name="nextDueDate" defaultValue={toDateInputValue(d.nextDueDate)} className={inputCls} />
                        </Field>
                        <Field label="Notes" compact>
                          <input name="notes" defaultValue={d.notes ?? ""} className={inputCls} />
                        </Field>
                        <div className="flex items-end gap-3">
                          <button type="submit" className="rounded-md bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 dark:hover:bg-neutral-200">
                            Save
                          </button>
                          <Link href={basePath} className="text-sm text-neutral-700 dark:text-neutral-300 hover:underline">Cancel</Link>
                        </div>
                      </form>
                    </td>
                  </tr>
                ) : (
                  <tr key={d.id} className="border-t border-neutral-100 dark:border-neutral-800">
                    <td className="py-1.5 pr-3">{d.product}</td>
                    <td className="py-1.5 pr-3">{fmt(d.dateGiven)}</td>
                    <td className="py-1.5 pr-3">{fmt(d.nextDueDate)}</td>
                    <td className="py-1.5 pr-3">
                      {(() => {
                        const status = dueStatus(d.nextDueDate);
                        const c = DUE_STATUS_COLORS[status];
                        return (
                          <span className={`rounded-full border px-2 py-0.5 text-xs font-medium ${c.bg} ${c.border} ${c.text}`}>
                            {DUE_STATUS_LABELS[status]}
                          </span>
                        );
                      })()}
                    </td>
                    <td className="py-1.5 text-right">
                      {canEdit && (
                        <div className="flex justify-end gap-3">
                          <Link href={`${basePath}?editDeworm=${d.id}`} className="text-xs text-neutral-700 dark:text-neutral-300 hover:underline">Edit</Link>
                          <form action={deleteDeworming.bind(null, horse.id, d.id)}>
                            <button type="submit" className="text-xs text-red-700 dark:text-red-300 hover:underline">Delete</button>
                          </form>
                        </div>
                      )}
                    </td>
                  </tr>
                )
              )}
            </tbody>
            </table>
          </div>
        )}
      </section>

      <section className="space-y-4 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 p-6">
        <h2 className="text-base font-semibold">Medications</h2>
        {canEdit && (
          <form action={addMedication.bind(null, horse.id)} className="grid grid-cols-2 gap-2 sm:grid-cols-6">
            <Field label="Medication" required compact>
              <input name="medicationName" required className={inputCls} />
            </Field>
            <Field label="Dosage" compact>
              <input name="dosage" className={inputCls} />
            </Field>
            <Field label="Route" compact>
              <input name="route" placeholder="oral, IM..." className={inputCls} />
            </Field>
            <Field label="Date Administered" required compact>
              <input type="date" name="dateAdministered" required className={inputCls} />
            </Field>
            <Field label="Administered By" compact>
              <input name="administeredBy" className={inputCls} />
            </Field>
            <Field label="Notes" compact>
              <input name="notes" className={inputCls} />
            </Field>
            <button type="submit" className="self-end rounded-md bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 dark:hover:bg-neutral-200">
              Add
            </button>
          </form>
        )}
        {horse.medications.length === 0 ? (
          <p className="text-sm text-neutral-700 dark:text-neutral-300">No medication logs.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm">
            <thead className="text-neutral-700 dark:text-neutral-300">
              <tr>
                <th className="py-1 pr-3 font-medium">Medication</th>
                <th className="py-1 pr-3 font-medium">Dosage</th>
                <th className="py-1 pr-3 font-medium">Route</th>
                <th className="py-1 pr-3 font-medium">Date</th>
                <th className="py-1 pr-3 font-medium">By</th>
                <th className="py-1 font-medium"></th>
              </tr>
            </thead>
            <tbody>
              {horse.medications.map((m) =>
                canEdit && editMedicationId === m.id ? (
                  <tr key={m.id} className="border-t border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-950">
                    <td colSpan={6} className="py-2">
                      <form action={updateMedication.bind(null, horse.id, m.id)} className="grid grid-cols-2 gap-2 sm:grid-cols-6">
                        <input type="hidden" name="_redirectTo" value={basePath} />
                        <Field label="Medication" required compact>
                          <input name="medicationName" required defaultValue={m.medicationName} className={inputCls} />
                        </Field>
                        <Field label="Dosage" compact>
                          <input name="dosage" defaultValue={m.dosage ?? ""} className={inputCls} />
                        </Field>
                        <Field label="Route" compact>
                          <input name="route" defaultValue={m.route ?? ""} className={inputCls} />
                        </Field>
                        <Field label="Date Administered" required compact>
                          <input type="date" name="dateAdministered" required defaultValue={toDateInputValue(m.dateAdministered)} className={inputCls} />
                        </Field>
                        <Field label="Administered By" compact>
                          <input name="administeredBy" defaultValue={m.administeredBy ?? ""} className={inputCls} />
                        </Field>
                        <Field label="Notes" compact>
                          <input name="notes" defaultValue={m.notes ?? ""} className={inputCls} />
                        </Field>
                        <div className="flex items-end gap-3">
                          <button type="submit" className="rounded-md bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 dark:hover:bg-neutral-200">
                            Save
                          </button>
                          <Link href={basePath} className="text-sm text-neutral-700 dark:text-neutral-300 hover:underline">Cancel</Link>
                        </div>
                      </form>
                    </td>
                  </tr>
                ) : (
                  <tr key={m.id} className="border-t border-neutral-100 dark:border-neutral-800">
                    <td className="py-1.5 pr-3">{m.medicationName}</td>
                    <td className="py-1.5 pr-3">{m.dosage ?? "—"}</td>
                    <td className="py-1.5 pr-3">{m.route ?? "—"}</td>
                    <td className="py-1.5 pr-3">{fmt(m.dateAdministered)}</td>
                    <td className="py-1.5 pr-3">{m.administeredBy ?? "—"}</td>
                    <td className="py-1.5 text-right">
                      {canEdit && (
                        <div className="flex justify-end gap-3">
                          <Link href={`${basePath}?editMed=${m.id}`} className="text-xs text-neutral-700 dark:text-neutral-300 hover:underline">Edit</Link>
                          <form action={deleteMedication.bind(null, horse.id, m.id)}>
                            <button type="submit" className="text-xs text-red-700 dark:text-red-300 hover:underline">Delete</button>
                          </form>
                        </div>
                      )}
                    </td>
                  </tr>
                )
              )}
            </tbody>
            </table>
          </div>
        )}
      </section>

      <section className="space-y-4 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 p-6">
        <h2 className="text-base font-semibold">Vet Visits</h2>
        {canEdit && (
          <form action={addVetVisit.bind(null, horse.id)} className="grid grid-cols-2 gap-2 sm:grid-cols-6">
            <Field label="Visit Date" required compact>
              <input type="date" name="visitDate" required className={inputCls} />
            </Field>
            <Field label="Vet Name" compact>
              <input name="vetName" className={inputCls} />
            </Field>
            <Field label="Reason" compact>
              <input name="reason" className={inputCls} />
            </Field>
            <Field label="Follow-up Date" compact>
              <input type="date" name="followUpDate" className={inputCls} />
            </Field>
            <Field label="Notes" compact>
              <input name="notes" className={inputCls} />
            </Field>
            <button type="submit" className="self-end rounded-md bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 dark:hover:bg-neutral-200">
              Add
            </button>
          </form>
        )}
        {horse.vetVisits.length === 0 ? (
          <p className="text-sm text-neutral-700 dark:text-neutral-300">No vet visits recorded.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm">
            <thead className="text-neutral-700 dark:text-neutral-300">
              <tr>
                <th className="py-1 pr-3 font-medium">Date</th>
                <th className="py-1 pr-3 font-medium">Vet</th>
                <th className="py-1 pr-3 font-medium">Reason</th>
                <th className="py-1 pr-3 font-medium">Follow-up</th>
                <th className="py-1 font-medium"></th>
              </tr>
            </thead>
            <tbody>
              {horse.vetVisits.map((v) =>
                canEdit && editVetVisitId === v.id ? (
                  <tr key={v.id} className="border-t border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-950">
                    <td colSpan={5} className="py-2">
                      <form action={updateVetVisit.bind(null, horse.id, v.id)} className="grid grid-cols-2 gap-2 sm:grid-cols-6">
                        <input type="hidden" name="_redirectTo" value={basePath} />
                        <Field label="Visit Date" required compact>
                          <input type="date" name="visitDate" required defaultValue={toDateInputValue(v.visitDate)} className={inputCls} />
                        </Field>
                        <Field label="Vet Name" compact>
                          <input name="vetName" defaultValue={v.vetName ?? ""} className={inputCls} />
                        </Field>
                        <Field label="Reason" compact>
                          <input name="reason" defaultValue={v.reason ?? ""} className={inputCls} />
                        </Field>
                        <Field label="Follow-up Date" compact>
                          <input type="date" name="followUpDate" defaultValue={toDateInputValue(v.followUpDate)} className={inputCls} />
                        </Field>
                        <Field label="Notes" compact>
                          <input name="notes" defaultValue={v.notes ?? ""} className={inputCls} />
                        </Field>
                        <div className="flex items-end gap-3">
                          <button type="submit" className="rounded-md bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 dark:hover:bg-neutral-200">
                            Save
                          </button>
                          <Link href={basePath} className="text-sm text-neutral-700 dark:text-neutral-300 hover:underline">Cancel</Link>
                        </div>
                      </form>
                    </td>
                  </tr>
                ) : (
                  <tr key={v.id} className="border-t border-neutral-100 dark:border-neutral-800">
                    <td className="py-1.5 pr-3">{fmt(v.visitDate)}</td>
                    <td className="py-1.5 pr-3">{v.vetName ?? "—"}</td>
                    <td className="py-1.5 pr-3">{v.reason ?? "—"}</td>
                    <td className="py-1.5 pr-3">{fmt(v.followUpDate)}</td>
                    <td className="py-1.5 text-right">
                      {canEdit && (
                        <div className="flex justify-end gap-3">
                          <Link href={`${basePath}?editVet=${v.id}`} className="text-xs text-neutral-700 dark:text-neutral-300 hover:underline">Edit</Link>
                          <form action={deleteVetVisit.bind(null, horse.id, v.id)}>
                            <button type="submit" className="text-xs text-red-700 dark:text-red-300 hover:underline">Delete</button>
                          </form>
                        </div>
                      )}
                    </td>
                  </tr>
                )
              )}
            </tbody>
            </table>
          </div>
        )}
      </section>

      <section className="space-y-4 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 p-6">
        <h2 className="text-base font-semibold">Documents</h2>
        {canEdit && (
          <form action={addHealthDocument.bind(null, horse.id)} className="grid grid-cols-2 gap-2 sm:grid-cols-6">
            <Field label="Title" required compact>
              <input name="title" required className={inputCls} />
            </Field>
            <Field label="Document URL" required compact>
              <input name="url" required className={inputCls} />
            </Field>
            <Field label="Category" compact>
              <input name="category" placeholder="Coggins, X-ray..." className={inputCls} />
            </Field>
            <Field label="Document Date" compact>
              <input type="date" name="documentDate" className={inputCls} />
            </Field>
            <button type="submit" className="self-end rounded-md bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 dark:hover:bg-neutral-200">
              Add
            </button>
          </form>
        )}
        {horse.healthDocuments.length === 0 ? (
          <p className="text-sm text-neutral-700 dark:text-neutral-300">No documents uploaded.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm">
            <thead className="text-neutral-700 dark:text-neutral-300">
              <tr>
                <th className="py-1 pr-3 font-medium">Title</th>
                <th className="py-1 pr-3 font-medium">Category</th>
                <th className="py-1 pr-3 font-medium">Date</th>
                <th className="py-1 pr-3 font-medium">Link</th>
                <th className="py-1 font-medium"></th>
              </tr>
            </thead>
            <tbody>
              {horse.healthDocuments.map((doc) =>
                canEdit && editHealthDocumentId === doc.id ? (
                  <tr key={doc.id} className="border-t border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-950">
                    <td colSpan={5} className="py-2">
                      <form action={updateHealthDocument.bind(null, horse.id, doc.id)} className="grid grid-cols-2 gap-2 sm:grid-cols-6">
                        <input type="hidden" name="_redirectTo" value={basePath} />
                        <Field label="Title" required compact>
                          <input name="title" required defaultValue={doc.title} className={inputCls} />
                        </Field>
                        <Field label="Document URL" required compact>
                          <input name="url" required defaultValue={doc.url} className={inputCls} />
                        </Field>
                        <Field label="Category" compact>
                          <input name="category" defaultValue={doc.category ?? ""} className={inputCls} />
                        </Field>
                        <Field label="Document Date" compact>
                          <input type="date" name="documentDate" defaultValue={toDateInputValue(doc.documentDate)} className={inputCls} />
                        </Field>
                        <div className="flex items-end gap-3">
                          <button type="submit" className="rounded-md bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 dark:hover:bg-neutral-200">
                            Save
                          </button>
                          <Link href={basePath} className="text-sm text-neutral-700 dark:text-neutral-300 hover:underline">Cancel</Link>
                        </div>
                      </form>
                    </td>
                  </tr>
                ) : (
                  <tr key={doc.id} className="border-t border-neutral-100 dark:border-neutral-800">
                    <td className="py-1.5 pr-3">{doc.title}</td>
                    <td className="py-1.5 pr-3">{doc.category ?? "—"}</td>
                    <td className="py-1.5 pr-3">{fmt(doc.documentDate)}</td>
                    <td className="py-1.5 pr-3">
                      <a href={doc.url} target="_blank" rel="noopener noreferrer" className="text-neutral-700 dark:text-neutral-300 hover:underline">
                        Open
                      </a>
                    </td>
                    <td className="py-1.5 text-right">
                      {canEdit && (
                        <div className="flex justify-end gap-3">
                          <Link href={`${basePath}?editDoc=${doc.id}`} className="text-xs text-neutral-700 dark:text-neutral-300 hover:underline">Edit</Link>
                          <form action={deleteHealthDocument.bind(null, horse.id, doc.id)}>
                            <button type="submit" className="text-xs text-red-700 dark:text-red-300 hover:underline">Delete</button>
                          </form>
                        </div>
                      )}
                    </td>
                  </tr>
                )
              )}
            </tbody>
            </table>
          </div>
        )}
      </section>

      <section className="space-y-4 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 p-6">
        <h2 className="text-base font-semibold">Aptitude Assessments</h2>
        {canEdit && (
          <form action={addAptitudeAssessment.bind(null, horse.id)} className="grid grid-cols-2 gap-2 sm:grid-cols-6">
            <Field label="Assessment Date" required compact>
              <input type="date" name="assessmentDate" required className={inputCls} />
            </Field>
            <Field label="Category" compact>
              <input name="category" placeholder="Temperament..." className={inputCls} />
            </Field>
            <Field label="Score (1-10)" compact>
              <input type="number" name="score" min="1" max="10" className={inputCls} />
            </Field>
            <Field label="Assessor" compact>
              <input name="assessor" className={inputCls} />
            </Field>
            <Field label="Notes" compact>
              <input name="notes" className={inputCls} />
            </Field>
            <button type="submit" className="self-end rounded-md bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 dark:hover:bg-neutral-200">
              Add
            </button>
          </form>
        )}
        {horse.aptitudeAssessments.length === 0 ? (
          <p className="text-sm text-neutral-700 dark:text-neutral-300">No aptitude assessments recorded.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm">
            <thead className="text-neutral-700 dark:text-neutral-300">
              <tr>
                <th className="py-1 pr-3 font-medium">Date</th>
                <th className="py-1 pr-3 font-medium">Category</th>
                <th className="py-1 pr-3 font-medium">Score</th>
                <th className="py-1 pr-3 font-medium">Assessor</th>
                <th className="py-1 pr-3 font-medium">Notes</th>
                <th className="py-1 font-medium"></th>
              </tr>
            </thead>
            <tbody>
              {horse.aptitudeAssessments.map((a) =>
                canEdit && editAptitudeId === a.id ? (
                  <tr key={a.id} className="border-t border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-950">
                    <td colSpan={6} className="py-2">
                      <form action={updateAptitudeAssessment.bind(null, horse.id, a.id)} className="grid grid-cols-2 gap-2 sm:grid-cols-6">
                        <input type="hidden" name="_redirectTo" value={basePath} />
                        <Field label="Assessment Date" required compact>
                          <input type="date" name="assessmentDate" required defaultValue={toDateInputValue(a.assessmentDate)} className={inputCls} />
                        </Field>
                        <Field label="Category" compact>
                          <input name="category" defaultValue={a.category ?? ""} className={inputCls} />
                        </Field>
                        <Field label="Score (1-10)" compact>
                          <input type="number" name="score" min="1" max="10" defaultValue={a.score ?? undefined} className={inputCls} />
                        </Field>
                        <Field label="Assessor" compact>
                          <input name="assessor" defaultValue={a.assessor ?? ""} className={inputCls} />
                        </Field>
                        <Field label="Notes" compact>
                          <input name="notes" defaultValue={a.notes ?? ""} className={inputCls} />
                        </Field>
                        <div className="flex items-end gap-3">
                          <button type="submit" className="rounded-md bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 dark:hover:bg-neutral-200">
                            Save
                          </button>
                          <Link href={basePath} className="text-sm text-neutral-700 dark:text-neutral-300 hover:underline">Cancel</Link>
                        </div>
                      </form>
                    </td>
                  </tr>
                ) : (
                  <tr key={a.id} className="border-t border-neutral-100 dark:border-neutral-800">
                    <td className="py-1.5 pr-3">{fmt(a.assessmentDate)}</td>
                    <td className="py-1.5 pr-3">{a.category ?? "—"}</td>
                    <td className="py-1.5 pr-3">{a.score ?? "—"}</td>
                    <td className="py-1.5 pr-3">{a.assessor ?? "—"}</td>
                    <td className="py-1.5 pr-3">{a.notes ?? "—"}</td>
                    <td className="py-1.5 text-right">
                      {canEdit && (
                        <div className="flex justify-end gap-3">
                          <Link href={`${basePath}?editApt=${a.id}`} className="text-xs text-neutral-700 dark:text-neutral-300 hover:underline">Edit</Link>
                          <form action={deleteAptitudeAssessment.bind(null, horse.id, a.id)}>
                            <button type="submit" className="text-xs text-red-700 dark:text-red-300 hover:underline">Delete</button>
                          </form>
                        </div>
                      )}
                    </td>
                  </tr>
                )
              )}
            </tbody>
            </table>
          </div>
        )}
      </section>
    </div>
  );
}