import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import { Button } from "@/components/Button";
import { AdminHeading, StatusBadge, MarkdownEditor } from "@/components/admin";
import { getStudyForAdmin } from "@/lib/research/queries";
import {
  updateStudy,
  setStudyStatus,
  deleteStudy,
  addSite,
  deleteSite,
  addInvestigator,
  deleteInvestigator,
  addDocument,
  deleteDocument,
  addPublication,
  deletePublication,
  addUpdate,
  deleteUpdate,
} from "../actions";

export const dynamic = "force-dynamic";

const phaseOptions = ["Planned", "Recruiting", "Active", "Completed"] as const;
const statusOptions = ["draft", "published", "archived"] as const;

export default async function AdminResearchStudyEditor({
  params,
}: {
  params: Promise<{ studyId: string }>;
}) {
  const { studyId } = await params;
  const data = await getStudyForAdmin(studyId);
  if (!data) notFound();
  const { study, sites, investigators, documents, publications, updates } = data;

  return (
    <>
      <div className="mb-4">
        <Link
          href="/admin/research"
          className="inline-flex items-center gap-1 text-[13px] font-semibold text-[var(--color-slate)] hover:text-[var(--color-blue)]"
        >
          <ArrowLeft className="h-3.5 w-3.5" aria-hidden />
          All studies
        </Link>
      </div>

      <AdminHeading
        eyebrow={`Study · ${study.slug}`}
        title={study.title}
        lede={`${sites.length} sites · ${investigators.length} investigators · ${documents.length} documents · ${publications.length} publications · ${updates.length} updates`}
        actions={
          <div className="flex items-center gap-2">
            <StatusBadge label={study.phase} />
            <StatusBadge label={study.status} dot />
          </div>
        }
      />

      <div className="mb-6 flex flex-wrap items-center gap-2">
        <span className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
          Publication
        </span>
        {statusOptions.map((s) => (
          <form key={s} action={setStudyStatus}>
            <input type="hidden" name="id" value={study.id} />
            <input type="hidden" name="status" value={s} />
            <button
              type="submit"
              disabled={study.status === s}
              className={
                study.status === s
                  ? "rounded-full bg-[var(--color-blue)] px-3 py-1 text-[12px] font-semibold text-white"
                  : "rounded-full bg-[var(--color-line)]/50 px-3 py-1 text-[12px] font-semibold text-[var(--color-ink)] hover:bg-[var(--color-mist)] hover:text-[var(--color-blue)]"
              }
            >
              {study.status === s ? `Current · ${s}` : `Set ${s}`}
            </button>
          </form>
        ))}
      </div>

      <div className="space-y-8">

          <section className="rounded-2xl border border-[var(--color-line)] bg-white p-6">
            <h2 className="font-display text-[22px] font-extrabold tracking-[-0.01em] text-[var(--color-ink)]">
              Study details
            </h2>
            <form action={updateStudy} className="mt-6 grid gap-5 md:grid-cols-2">
              <input type="hidden" name="id" value={study.id} />
              <Field label="Title" name="title" defaultValue={study.title} required span="md:col-span-2" />
              <label className="block text-sm">
                <span className="mb-1 block font-semibold text-[var(--color-ink)]">Phase</span>
                <select
                  name="phase"
                  defaultValue={study.phase}
                  className="w-full rounded-md border border-[var(--color-line)] px-3 py-2"
                >
                  {phaseOptions.map((p) => (
                    <option key={p} value={p}>
                      {p}
                    </option>
                  ))}
                </select>
              </label>
              <Field label="NCT / ISRCTN ID" name="nctId" defaultValue={study.nctId ?? ""} />
              <Field label="Sponsor" name="sponsor" defaultValue={study.sponsor} span="md:col-span-2" />
              <Field
                label="Principal investigator"
                name="principalInvestigator"
                defaultValue={study.principalInvestigator}
              />
              <Field
                label="Condition keyword"
                name="conditionKeyword"
                defaultValue={study.conditionKeyword}
              />
              <Field
                label="Target enrolment"
                name="targetEnrolment"
                type="number"
                defaultValue={String(study.targetEnrolment)}
              />
              <Field
                label="Current enrolment"
                name="currentEnrolment"
                type="number"
                defaultValue={String(study.currentEnrolment)}
              />
              <TextareaField
                label="Countries (one per line)"
                name="countries"
                defaultValue={(study.countries ?? []).join("\n")}
                rows={4}
                maxLength={2000}
                span="md:col-span-2"
              />
              <div className="md:col-span-2">
                <MarkdownEditor
                  name="background"
                  label="Background"
                  defaultValue={study.background}
                  rows={10}
                  maxLength={8000}
                  folder="research"
                  hint="Use headings and lists to describe the clinical problem and prior evidence"
                />
              </div>
              <TextareaField
                label="Design"
                name="design"
                defaultValue={study.design}
                rows={4}
                maxLength={4000}
              />
              <TextareaField
                label="Intervention"
                name="intervention"
                defaultValue={study.intervention}
                rows={4}
                maxLength={4000}
              />
              <TextareaField
                label="Control / comparator"
                name="control"
                defaultValue={study.control}
                rows={4}
                maxLength={4000}
                span="md:col-span-2"
              />
              <TextareaField
                label="Inclusion criteria (one per line)"
                name="inclusion"
                defaultValue={(study.inclusion ?? []).join("\n")}
                rows={5}
                maxLength={4000}
              />
              <TextareaField
                label="Exclusion criteria (one per line)"
                name="exclusion"
                defaultValue={(study.exclusion ?? []).join("\n")}
                rows={5}
                maxLength={4000}
              />
              <TextareaField
                label="Primary outcomes (one per line)"
                name="primaryOutcomes"
                defaultValue={(study.primaryOutcomes ?? []).join("\n")}
                rows={5}
                maxLength={4000}
              />
              <TextareaField
                label="Secondary outcomes (one per line)"
                name="secondaryOutcomes"
                defaultValue={(study.secondaryOutcomes ?? []).join("\n")}
                rows={5}
                maxLength={4000}
              />
              <div className="md:col-span-2 mt-4 rounded-xl border border-[var(--color-line)] bg-[var(--color-mist)]/40 p-5">
                <h3 className="font-display text-[16px] font-extrabold tracking-tight text-[var(--color-ink)]">
                  Collaboration &amp; authorship
                </h3>
                <p className="mt-1 text-[12px] text-[var(--color-slate)]">
                  Advertise open roles, co-author opportunities, and paid engagements. Surfaced on the public study page when &quot;Actively recruiting collaborators&quot; is on.
                </p>
                <label className="mt-4 flex items-center gap-2.5 text-[13px]">
                  <input
                    type="checkbox"
                    name="isRecruitingCollaborators"
                    defaultChecked={study.isRecruitingCollaborators}
                    className="h-4 w-4 rounded border-[var(--color-line)] text-[var(--color-blue)]"
                  />
                  <span className="font-semibold text-[var(--color-ink)]">
                    Actively recruiting collaborators
                  </span>
                </label>
                <div className="mt-4 grid gap-3 md:grid-cols-2">
                  <label className="block text-sm">
                    <span className="mb-1 block font-semibold text-[var(--color-ink)]">Collaboration contact email</span>
                    <input
                      name="collaborationEmail"
                      type="email"
                      defaultValue={study.collaborationEmail ?? ""}
                      maxLength={200}
                      placeholder="research@orthoglobe.org"
                      className="w-full rounded-md border border-[var(--color-line)] px-3 py-2 text-sm"
                    />
                  </label>
                </div>
                <label className="mt-3 block text-sm">
                  <span className="mb-1 block font-semibold text-[var(--color-ink)]">Authorship opportunities</span>
                  <textarea
                    name="authorshipOpportunities"
                    defaultValue={study.authorshipOpportunities ?? ""}
                    rows={4}
                    maxLength={4000}
                    placeholder="e.g. First-author opportunities for site PIs recruiting 30+ patients; co-authorship offered to all site investigators meeting ICMJE criteria."
                    className="w-full rounded-md border border-[var(--color-line)] px-3 py-2 text-sm"
                  />
                </label>
                <label className="mt-3 block text-sm">
                  <span className="mb-1 block font-semibold text-[var(--color-ink)]">Open roles (JSON array)</span>
                  <textarea
                    name="openRoles"
                    defaultValue={JSON.stringify(study.openRoles ?? [], null, 2)}
                    rows={6}
                    className="w-full rounded-md border border-[var(--color-line)] px-3 py-2 font-mono text-[12px]"
                  />
                  <span className="mt-1 block text-[11px] text-[var(--color-slate)]">
                    Each role: <code>{`{"title":"", "description":"", "commitment":"", "compensation":""}`}</code>. Leave <code>[]</code> if none.
                  </span>
                </label>
              </div>

              <div className="md:col-span-2 mt-4 rounded-xl border border-[var(--color-line)] bg-white p-5">
                <h3 className="font-display text-[16px] font-extrabold tracking-tight text-[var(--color-ink)]">
                  Portfolio &amp; discovery
                </h3>
                <p className="mt-1 text-[12px] text-[var(--color-slate)]">
                  Controls where this study appears on the Research Portal landing page and how it&rsquo;s filtered.
                </p>
                <label className="mt-4 flex items-center gap-2.5 text-[13px]">
                  <input
                    type="checkbox"
                    name="featured"
                    defaultChecked={study.featured}
                    className="h-4 w-4 rounded border-[var(--color-line)] text-[var(--color-blue)]"
                  />
                  <span className="font-semibold text-[var(--color-ink)]">
                    Feature on /products/research
                  </span>
                </label>
                <div className="mt-4 grid gap-3 md:grid-cols-2">
                  <Field
                    label="Specialty"
                    name="specialty"
                    defaultValue={study.specialty}
                  />
                  <Field
                    label="Themes (comma-separated)"
                    name="themes"
                    defaultValue={(study.themes ?? []).join(", ")}
                  />
                </div>
              </div>

              <div className="md:col-span-2 mt-4 rounded-xl border border-[var(--color-line)] bg-white p-5">
                <h3 className="font-display text-[16px] font-extrabold tracking-tight text-[var(--color-ink)]">
                  Timeline &amp; protocol
                </h3>
                <p className="mt-1 text-[12px] text-[var(--color-slate)]">
                  Key protocol references and the milestone timeline rendered on the public study page.
                </p>
                <div className="mt-4 grid gap-3 md:grid-cols-2">
                  <Field
                    label="Ethics / IRB reference"
                    name="ethicsRef"
                    defaultValue={study.ethicsRef}
                  />
                  <Field
                    label="Protocol version"
                    name="protocolVersion"
                    defaultValue={study.protocolVersion}
                  />
                </div>
                <label className="mt-3 block text-sm">
                  <span className="mb-1 block font-semibold text-[var(--color-ink)]">
                    Timeline milestones (JSON array)
                  </span>
                  <textarea
                    name="timelineMilestones"
                    defaultValue={JSON.stringify(
                      study.timelineMilestones ?? [],
                      null,
                      2,
                    )}
                    rows={8}
                    className="w-full rounded-md border border-[var(--color-line)] px-3 py-2 font-mono text-[12px]"
                  />
                  <span className="mt-1 block text-[11px] text-[var(--color-slate)]">
                    Each milestone:{" "}
                    <code>{`{"title":"", "date":"2026-06-01", "description":"", "status":"done|active|upcoming"}`}</code>
                  </span>
                </label>
              </div>

              <div className="md:col-span-2">
                <Button type="submit">Save study</Button>
              </div>
            </form>
          </section>

          <section>
            <h2 className="font-display text-[22px] font-extrabold tracking-[-0.01em] text-[var(--color-ink)]">
              Sites
            </h2>
            <form
              action={addSite}
              className="mt-4 grid gap-3 rounded-xl border border-[var(--color-line)] bg-white p-4 md:grid-cols-5"
            >
              <input type="hidden" name="studyId" value={study.id} />
              <input
                name="city"
                type="text"
                required
                maxLength={200}
                placeholder="City"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm"
              />
              <input
                name="country"
                type="text"
                required
                maxLength={200}
                placeholder="Country"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm"
              />
              <input
                name="piName"
                type="text"
                required
                maxLength={200}
                placeholder="Site PI"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm md:col-span-2"
              />
              <input
                name="enrolment"
                type="number"
                min={0}
                max={100000}
                defaultValue={0}
                placeholder="Enrolment"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm"
              />
              <div className="md:col-span-5">
                <Button type="submit" variant="secondary">
                  Add site
                </Button>
              </div>
            </form>
            <ul className="mt-4 space-y-2">
              {sites.map((s) => (
                <li
                  key={s.id}
                  className="flex flex-wrap items-center gap-3 rounded-lg border border-[var(--color-line)] bg-white p-3 text-sm"
                >
                  <span className="flex-1 text-[var(--color-ink)]">
                    <strong>{s.city}, {s.country}</strong> · {s.piName} · {s.enrolment} enrolled
                  </span>
                  <form action={deleteSite}>
                    <input type="hidden" name="id" value={s.id} />
                    <input type="hidden" name="studyId" value={study.id} />
                    <Button type="submit" variant="ghost">
                      Remove
                    </Button>
                  </form>
                </li>
              ))}
            </ul>
          </section>

          <section>
            <h2 className="font-display text-[22px] font-extrabold tracking-[-0.01em] text-[var(--color-ink)]">
              Investigators
            </h2>
            <form
              action={addInvestigator}
              className="mt-4 grid gap-3 rounded-xl border border-[var(--color-line)] bg-white p-4 md:grid-cols-4"
            >
              <input type="hidden" name="studyId" value={study.id} />
              <input
                name="name"
                type="text"
                required
                maxLength={200}
                placeholder="Name"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm"
              />
              <input
                name="institution"
                type="text"
                required
                maxLength={300}
                placeholder="Institution"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm md:col-span-2"
              />
              <input
                name="role"
                type="text"
                required
                maxLength={100}
                placeholder="Role"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm"
              />
              <div className="md:col-span-4">
                <Button type="submit" variant="secondary">
                  Add investigator
                </Button>
              </div>
            </form>
            <ul className="mt-4 space-y-2">
              {investigators.map((i) => (
                <li
                  key={i.id}
                  className="flex flex-wrap items-center gap-3 rounded-lg border border-[var(--color-line)] bg-white p-3 text-sm"
                >
                  <span className="flex-1 text-[var(--color-ink)]">
                    <strong>{i.name}</strong> — {i.institution} · {i.role}
                  </span>
                  <form action={deleteInvestigator}>
                    <input type="hidden" name="id" value={i.id} />
                    <input type="hidden" name="studyId" value={study.id} />
                    <Button type="submit" variant="ghost">
                      Remove
                    </Button>
                  </form>
                </li>
              ))}
            </ul>
          </section>

          <section>
            <h2 className="font-display text-[22px] font-extrabold tracking-[-0.01em] text-[var(--color-ink)]">
              Documents
            </h2>
            <form
              action={addDocument}
              className="mt-4 grid gap-3 rounded-xl border border-[var(--color-line)] bg-white p-4 md:grid-cols-3"
            >
              <input type="hidden" name="studyId" value={study.id} />
              <input
                name="name"
                type="text"
                required
                maxLength={300}
                placeholder="Document name"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm md:col-span-2"
              />
              <input
                name="type"
                type="text"
                required
                maxLength={100}
                placeholder="Type (e.g. Protocol, PIS, CRF)"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm"
              />
              <input
                name="url"
                type="text"
                maxLength={500}
                placeholder="Download URL (optional) — /uploads/... or https://..."
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm md:col-span-3"
              />
              <div className="md:col-span-3">
                <Button type="submit" variant="secondary">
                  Add document
                </Button>
              </div>
            </form>
            <ul className="mt-4 space-y-2">
              {documents.map((d) => (
                <li
                  key={d.id}
                  className="flex flex-wrap items-center gap-3 rounded-lg border border-[var(--color-line)] bg-white p-3 text-sm"
                >
                  <span className="flex-1 text-[var(--color-ink)]">
                    <strong>{d.name}</strong> — {d.type}
                    {d.url ? (
                      <>
                        {" "}
                        ·{" "}
                        <a
                          href={d.url}
                          target="_blank"
                          rel="noreferrer"
                          className="font-semibold text-[var(--color-blue)] underline"
                        >
                          download
                        </a>
                      </>
                    ) : null}
                  </span>
                  <form action={deleteDocument}>
                    <input type="hidden" name="id" value={d.id} />
                    <input type="hidden" name="studyId" value={study.id} />
                    <Button type="submit" variant="ghost">
                      Remove
                    </Button>
                  </form>
                </li>
              ))}
            </ul>
          </section>

          <section>
            <h2 className="font-display text-[22px] font-extrabold tracking-[-0.01em] text-[var(--color-ink)]">
              Publications
            </h2>
            <p className="mt-1 text-[13px] text-[var(--color-slate)]">
              Journal articles, preprints, posters, datasets, and reports tied to this study. Surfaced on the study detail and cross-study outputs page.
            </p>
            <form
              action={addPublication}
              className="mt-4 grid gap-3 rounded-xl border border-[var(--color-line)] bg-white p-4 md:grid-cols-2"
            >
              <input type="hidden" name="studyId" value={study.id} />
              <input
                name="title"
                required
                maxLength={500}
                placeholder="Title"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm md:col-span-2"
              />
              <input
                name="authors"
                maxLength={2000}
                placeholder="Authors (comma-separated)"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm md:col-span-2"
              />
              <input
                name="journal"
                maxLength={300}
                placeholder="Journal / venue"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm"
              />
              <input
                name="year"
                type="number"
                min={1950}
                max={2100}
                placeholder="Year"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm"
              />
              <input
                name="doi"
                maxLength={200}
                placeholder="DOI (e.g. 10.1234/foo)"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm"
              />
              <input
                name="pmid"
                maxLength={50}
                placeholder="PMID"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm"
              />
              <input
                name="url"
                type="url"
                maxLength={500}
                placeholder="URL"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm md:col-span-2"
              />
              <select
                name="type"
                defaultValue="journal"
                className="rounded-md border border-[var(--color-line)] bg-white px-3 py-2 text-sm"
              >
                <option value="journal">Journal</option>
                <option value="preprint">Preprint</option>
                <option value="conference">Conference</option>
                <option value="poster">Poster</option>
                <option value="dataset">Dataset</option>
                <option value="report">Report</option>
              </select>
              <textarea
                name="abstract"
                maxLength={5000}
                rows={3}
                placeholder="Abstract (optional)"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm md:col-span-2"
              />
              <div className="md:col-span-2">
                <Button type="submit" variant="secondary">
                  Add publication
                </Button>
              </div>
            </form>
            <ul className="mt-4 space-y-2">
              {publications.map((p) => (
                <li
                  key={p.id}
                  className="flex flex-wrap items-start gap-3 rounded-lg border border-[var(--color-line)] bg-white p-3 text-sm"
                >
                  <div className="min-w-0 flex-1">
                    <div className="font-semibold text-[var(--color-ink)]">
                      {p.title}
                    </div>
                    <div className="mt-0.5 text-[12px] text-[var(--color-slate)]">
                      {(p.authors ?? []).join(", ")}
                      {p.journal ? ` · ${p.journal}` : ""}
                      {p.year ? ` · ${p.year}` : ""}
                      {" · "}
                      <span className="inline-flex rounded-full bg-[var(--color-mist)] px-2 py-0.5 text-[11px] font-semibold text-[var(--color-blue)]">
                        {p.type}
                      </span>
                      {p.doi && (
                        <>
                          {" · "}
                          <a
                            href={`https://doi.org/${p.doi}`}
                            target="_blank"
                            rel="noreferrer"
                            className="font-semibold text-[var(--color-blue)] underline"
                          >
                            DOI
                          </a>
                        </>
                      )}
                      {p.pmid && (
                        <>
                          {" · "}
                          <a
                            href={`https://pubmed.ncbi.nlm.nih.gov/${p.pmid}`}
                            target="_blank"
                            rel="noreferrer"
                            className="font-semibold text-[var(--color-blue)] underline"
                          >
                            PubMed
                          </a>
                        </>
                      )}
                    </div>
                  </div>
                  <form action={deletePublication}>
                    <input type="hidden" name="id" value={p.id} />
                    <input type="hidden" name="studyId" value={study.id} />
                    <Button type="submit" variant="ghost">
                      Remove
                    </Button>
                  </form>
                </li>
              ))}
            </ul>
          </section>

          <section>
            <h2 className="font-display text-[22px] font-extrabold tracking-[-0.01em] text-[var(--color-ink)]">
              Study updates
            </h2>
            <p className="mt-1 text-[13px] text-[var(--color-slate)]">
              Short dated posts — recruitment milestones, protocol amendments, interim results. Shown on the public study page in reverse chronological order.
            </p>
            <form
              action={addUpdate}
              className="mt-4 grid gap-3 rounded-xl border border-[var(--color-line)] bg-white p-4 md:grid-cols-2"
            >
              <input type="hidden" name="studyId" value={study.id} />
              <input
                name="title"
                required
                maxLength={300}
                placeholder="Update title"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm md:col-span-2"
              />
              <input
                name="postedAt"
                type="date"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm"
              />
              <input
                name="postedByName"
                maxLength={200}
                placeholder="Posted by (optional)"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm"
              />
              <textarea
                name="body"
                rows={4}
                maxLength={8000}
                placeholder="Body (plain text or light markdown)"
                className="rounded-md border border-[var(--color-line)] px-3 py-2 text-sm md:col-span-2"
              />
              <div className="md:col-span-2">
                <Button type="submit" variant="secondary">
                  Publish update
                </Button>
              </div>
            </form>
            <ul className="mt-4 space-y-2">
              {updates.map((u) => (
                <li
                  key={u.id}
                  className="flex flex-wrap items-start gap-3 rounded-lg border border-[var(--color-line)] bg-white p-3 text-sm"
                >
                  <div className="min-w-0 flex-1">
                    <div className="font-semibold text-[var(--color-ink)]">
                      {u.title}
                    </div>
                    <div className="mt-0.5 text-[11px] text-[var(--color-slate)]">
                      {new Date(u.postedAt).toLocaleDateString("en-GB", {
                        day: "2-digit",
                        month: "short",
                        year: "numeric",
                      })}
                      {u.postedByName ? ` · ${u.postedByName}` : ""}
                    </div>
                    {u.body && (
                      <p className="mt-1 whitespace-pre-wrap text-[13px] text-[var(--color-ink)]/80">
                        {u.body.slice(0, 300)}
                        {u.body.length > 300 ? "…" : ""}
                      </p>
                    )}
                  </div>
                  <form action={deleteUpdate}>
                    <input type="hidden" name="id" value={u.id} />
                    <input type="hidden" name="studyId" value={study.id} />
                    <Button type="submit" variant="ghost">
                      Remove
                    </Button>
                  </form>
                </li>
              ))}
            </ul>
          </section>

          <section className="rounded-2xl border border-[var(--color-line)] bg-[var(--color-mist)]/40 p-6">
            <h2 className="font-display text-[20px] font-extrabold tracking-[-0.01em] text-[var(--color-ink)]">
              Danger zone
            </h2>
            <form action={deleteStudy} className="mt-4">
              <input type="hidden" name="id" value={study.id} />
              <Button type="submit" variant="ghost">
                Delete study
              </Button>
            </form>
          </section>
      </div>
    </>
  );
}

function Field({
  label,
  name,
  defaultValue,
  required,
  type = "text",
  span,
}: {
  label: string;
  name: string;
  defaultValue?: string;
  required?: boolean;
  type?: string;
  span?: string;
}) {
  return (
    <label className={`block text-sm ${span ?? ""}`}>
      <span className="mb-1 block font-semibold text-[var(--color-ink)]">{label}</span>
      <input
        name={name}
        type={type}
        defaultValue={defaultValue}
        required={required}
        className="w-full rounded-md border border-[var(--color-line)] px-3 py-2"
      />
    </label>
  );
}

function TextareaField({
  label,
  name,
  defaultValue,
  rows,
  maxLength,
  span,
}: {
  label: string;
  name: string;
  defaultValue?: string;
  rows: number;
  maxLength?: number;
  span?: string;
}) {
  return (
    <label className={`block text-sm ${span ?? ""}`}>
      <span className="mb-1 block font-semibold text-[var(--color-ink)]">{label}</span>
      <textarea
        name={name}
        rows={rows}
        maxLength={maxLength}
        defaultValue={defaultValue}
        className="w-full rounded-md border border-[var(--color-line)] px-3 py-2 font-mono text-[13px]"
      />
    </label>
  );
}
