import { redirect, notFound } from "next/navigation";
import Link from "next/link";
import { isAdminSession, hasPermission, getAllPermissions } from "@/lib/adminAuth";
import { getSessionClientId } from "@/lib/auth";
import { connectDB } from "@/lib/db";
import { Order } from "@/models/Order";
import { Client } from "@/models/Client";
import { Todo } from "@/models/Todo";
import { AdminNavLinks } from "@/components/admin/AdminNavLinks";
import { StatCard } from "@/components/admin/StatCard";
import { OrderTagSelect } from "@/components/admin/OrderTagSelect";
import { PriceProposalAdmin } from "@/components/admin/PriceProposalAdmin";
import { AdminContractPanel } from "@/components/admin/AdminContractPanel";
import { AdminPhotoPanel } from "@/components/admin/AdminPhotoPanel";
import { RejectOrderPanel } from "@/components/admin/RejectOrderPanel";
import { ArchiveOrderButton } from "@/components/admin/ArchiveOrderButton";
import { MarkOrderCompletedButton } from "@/components/admin/MarkOrderCompletedButton";
import { OrderTitleEditor } from "@/components/admin/OrderTitleEditor";
import { OrderAssigneeBadge } from "@/components/admin/OrderAssigneeBadge";
import { PaymentStatusPanel } from "@/components/admin/PaymentStatusPanel";
import { CompensationTypeToggle } from "@/components/admin/CompensationTypeToggle";
import { AdminInvoicePanel } from "@/components/admin/AdminInvoicePanel";
import { AdminReminderPanel } from "@/components/admin/AdminReminderPanel";
import { AdminDiscountPanel } from "@/components/admin/AdminDiscountPanel";
import { AdminManualDiscountPanel } from "@/components/admin/AdminManualDiscountPanel";
import { ShootDatePanel } from "@/components/admin/ShootDatePanel";
import { InternalNotesPanel } from "@/components/admin/InternalNotesPanel";
import { OrderChecklistPanel } from "@/components/admin/OrderChecklistPanel";
import { LinkedTodosPanel } from "@/components/admin/LinkedTodosPanel";
import { UsageRightsSelect } from "@/components/admin/UsageRightsSelect";
import { OrderChat } from "@/components/orders/OrderChat";
import { getPriceState } from "@/lib/priceProposal";
import { getOrderChatMessagesByOrderId } from "@/lib/orderMessages";
import { Contract } from "@/models/Contract";
import { ClientPhotoFolder } from "@/models/ClientPhotoFolder";
import { RejectionReason } from "@/models/RejectionReason";
import { OrderActivity } from "@/models/OrderActivity";
import { Invoice } from "@/models/Invoice";
import { Reminder } from "@/models/Reminder";
import { PriceTemplate } from "@/models/PriceTemplate";
import { getSettings } from "@/lib/settings";
import { ORDER_TAG_LABELS, ORDER_TAG_COLORS, formatPaymentReference, formatEUR, formatDatePeriod, type OrderTag, formatDateTimeDE } from "@/lib/orderConstants";

export const dynamic = "force-dynamic";

export default async function AdminOrderDetailPage({ params }: { params: Promise<{ orderId: string }> }) {
  if (!(await isAdminSession())) redirect("/de/login?next=%2Fde%2Fadmin%2Forders");
  if (!(await hasPermission("orders_view"))) redirect("/de/account");
  const permissions = await getAllPermissions();
  const canPricing = permissions.pricing;
  const canPayments = permissions.payments;
  const canInvoicing = permissions.invoicing;
  const canDiscounts = permissions.discounts_edit;
  const canEdit = permissions.orders_edit;
  const { orderId } = await params;
  const viewerId = (await getSessionClientId()) || "";

  await connectDB();
  const settings = await getSettings();
  const order = await Order.findById(orderId).lean();
  if (!order) notFound();

  const [client, priceData, contract, photoFolders, clientOrders, activeReasons, activities, messagesByOrderId, invoice, totalClientOrders, orderRank, assignedStaff, priceTemplates, createdByStaff] =
    await Promise.all([
      Client.findById(order.clientId).lean(),
      getPriceState(orderId),
      Contract.findOne({ orderId }).lean(),
      ClientPhotoFolder.find({ orderId: order._id }).sort({ sortOrder: 1 }).lean(),
      // Für den "Zugeordneter Auftrag"-Dropdown beim Bearbeiten eines Foto-
      // Ordners — deckt auch den Fall ab, dass ein anderer Auftrag desselben
      // Kunden gewählt werden soll, nicht nur der gerade angezeigte.
      Order.find({ clientId: order.clientId }).select("characterOrConcept createdAt").sort({ createdAt: -1 }).lean(),
      RejectionReason.find({ active: true }).sort({ sortOrder: 1 }).lean(),
      OrderActivity.find({ orderId }).sort({ createdAt: -1 }).lean(),
      getOrderChatMessagesByOrderId([orderId]),
      Invoice.findOne({ orderId }).lean(),
      Order.countDocuments({ clientId: order.clientId }),
      Order.countDocuments({ clientId: order.clientId, createdAt: { $lte: order.createdAt } }),
      order.assignedStaffId ? Client.findById(order.assignedStaffId).select("name").lean() : null,
      permissions.price_templates_view ? PriceTemplate.find({}).sort({ sortOrder: 1 }).lean() : [],
      order.createdByStaffId ? Client.findById(order.createdByStaffId).select("name").lean() : null,
    ]);
  const reasonOptions = activeReasons.map((r) => ({ id: String(r._id), label: r.label }));
  const orderMessages = messagesByOrderId.get(orderId) ?? [];
  const reminders = invoice ? await Reminder.find({ invoiceId: invoice._id }).sort({ createdAt: 1 }).lean() : [];

  const linkedTodos = await Todo.find({ orderId }).sort({ status: 1, dueDate: 1 }).lean();
  const todoAssigneeIds = [...new Set(linkedTodos.map((t) => String(t.assignedToId)))];
  const todoAssignees = todoAssigneeIds.length
    ? await Client.find({ _id: { $in: todoAssigneeIds } }).select("name").lean()
    : [];
  const todoAssigneeById = new Map(todoAssignees.map((c) => [String(c._id), c.name]));

  const latestAmount = priceData.history.length ? priceData.history[priceData.history.length - 1].amount : 0;
  const daysOpen = Math.floor((Date.now() - new Date(order.createdAt).getTime()) / 86_400_000);

  return (
    <>
      <main className="px-6 pt-4 pb-24 max-w-5xl mx-auto">
        <AdminNavLinks permissions={permissions} />
        <Link href="/de/admin/orders" className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] transition-colors">
          ← Alle Aufträge
        </Link>

        <div
          className="mt-4 bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6"
          style={{ borderLeft: `3px solid ${ORDER_TAG_COLORS[order.tag as OrderTag]}` }}
        >
          <div className="mb-4">
            <div className="flex items-center gap-3 min-w-0">
              {client?.avatarPath && (
                // eslint-disable-next-line @next/next/no-img-element
                <img
                  src={`/api/avatars/${client._id}/${client.avatarPath}`}
                  alt=""
                  className="w-12 h-12 rounded-full object-cover border border-white/15 shrink-0"
                />
              )}
              <div className="min-w-0">
                <div className="flex items-center gap-2 flex-wrap">
                  <OrderTitleEditor orderId={String(order._id)} title={order.characterOrConcept} canEdit={canEdit} />
                  <span
                    className="text-[0.65rem] font-mono text-[var(--rk-ink-muted)]"
                    title="Auftrags-ID — identisch mit dem Verwendungszweck für Überweisungen zu diesem Auftrag."
                  >
                    {formatPaymentReference(String(order._id))}
                  </span>
                </div>
                {client && (
                  <div className="flex items-center gap-2 flex-wrap mt-1">
                    <Link
                      href={`/de/admin/clients/${client._id}`}
                      className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] transition-colors"
                    >
                      {client.name} · {client.email}
                    </Link>
                    {totalClientOrders > 1 && (
                      <span className="text-[0.65rem] uppercase tracking-[0.08em] border border-[var(--rk-accent)]/40 text-[var(--rk-accent)] rounded-full px-2 py-0.5">
                        Stammkunde · {orderRank}. Auftrag von {totalClientOrders}
                      </span>
                    )}
                    {createdByStaff && (
                      <span
                        className="text-[0.65rem] uppercase tracking-[0.08em] border border-white/15 text-[var(--rk-ink-muted)] rounded-full px-2 py-0.5"
                        title="Nicht vom Kunden selbst angefragt, sondern vom Team im Auftrag des Kunden angelegt."
                      >
                        Vom Team erstellt · {createdByStaff.name}
                      </span>
                    )}
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Feste Position (Nutzer-Wunsch, 26.09.2026): vorher stand dieser
              Block als zweites Flex-Kind neben dem Titel und ist je nach
              Titellänge/Kunden-Badges/Viewport mal daneben, mal darunter
              gelandet (flex-wrap) — jetzt immer als eigene Zeile zwischen
              Titel-Bereich und "wer hat übernommen", nie mehr abhängig vom
              Umbruch. Der Phase-Dropdown (OrderTagSelect) saß bisher oben in
              der linken Spalte, direkt über dem Termin-Bereich, wodurch
              Termin und Chat (rechte Spalte) nicht auf gleicher Höhe
              begannen — jetzt hier direkt neben der Status-Pille, und der
              Termin-Bereich ist jetzt das erste Element der linken Spalte. */}
          <div className="flex items-center gap-2 flex-wrap mb-4">
            <span
              className="text-[0.65rem] uppercase tracking-[0.1em] border rounded-full px-2.5 py-1"
              style={{
                borderColor: `${ORDER_TAG_COLORS[order.tag as OrderTag]}66`,
                color: ORDER_TAG_COLORS[order.tag as OrderTag],
              }}
            >
              {ORDER_TAG_LABELS[order.tag as OrderTag]}
            </span>
            {canEdit && <OrderTagSelect orderId={String(order._id)} tag={order.tag} />}
            {canEdit && <MarkOrderCompletedButton orderId={String(order._id)} tag={order.tag} />}
            <ArchiveOrderButton orderId={String(order._id)} archived={order.archived} />
          </div>

          <div className="mb-6">
            <OrderAssigneeBadge
              orderId={String(order._id)}
              assignedStaffName={assignedStaff?.name ?? null}
              isViewer={Boolean(order.assignedStaffId) && String(order.assignedStaffId) === viewerId}
              canEdit={canEdit}
            />
          </div>

          {(canPricing || canPayments) && (
            <div className="flex items-center justify-between gap-3 mb-2">
              <span className="text-[0.65rem] uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">
                Vergütungsart: {order.compensationType === "tfp" ? "TFP" : "Kostenpflichtig"}
              </span>
              <CompensationTypeToggle
                orderId={String(order._id)}
                compensationType={order.compensationType}
                contract={contract ? { id: String(contract._id), status: contract.status } : null}
                canEdit={canPricing && canEdit}
              />
            </div>
          )}

          {(canPricing || canPayments) && (
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6">
              {canPricing && order.compensationType === "paid" && (
                <StatCard
                  label={priceData.state.phase === "agreed" ? "Vereinbarter Preis" : latestAmount ? "Letzter Vorschlag" : "Preis"}
                  value={latestAmount ? formatEUR(latestAmount) : "—"}
                  accent={priceData.state.phase === "agreed" ? "emerald" : undefined}
                />
              )}
              {canPayments && (
                <StatCard
                  label="Zahlung"
                  value={order.compensationType === "tfp" ? "TFP" : order.paid ? "Bezahlt" : "Offen"}
                  accent={order.compensationType === "tfp" ? undefined : order.paid ? "emerald" : "red"}
                />
              )}
              <StatCard label="Offen seit" value={`${daysOpen} Tag${daysOpen === 1 ? "" : "e"}`} />
            </div>
          )}

          <div className="grid grid-cols-1 lg:grid-cols-[1fr_22rem] gap-6 items-start">
            <div className="flex flex-col gap-4">
              <ShootDatePanel
                orderId={String(order._id)}
                shootDate={order.shootDate ? new Date(order.shootDate).toISOString() : null}
                shootEndDate={order.shootEndDate ? new Date(order.shootEndDate).toISOString() : null}
                eventStreet={order.eventStreet || ""}
                eventPostCode={order.eventPostCode || ""}
                eventCity={order.eventCity || ""}
                eventCountryCode={order.eventCountryCode || "DE"}
                eventAddressNote={order.eventAddressNote || ""}
                earlyDateRequested={order.earlyDateRequested}
                earlyDateReason={order.earlyDateReason}
              />

              <InternalNotesPanel orderId={String(order._id)} notes={order.internalNotes || ""} />

              <LinkedTodosPanel
                todos={linkedTodos.map((t) => ({
                  id: String(t._id),
                  title: t.title,
                  status: t.status,
                  assignee: todoAssigneeById.get(String(t.assignedToId)) || "?",
                  dueLabel: t.dueDate ? new Date(t.dueDate).toLocaleDateString("de-DE") : "",
                }))}
              />

              <OrderChecklistPanel
                orderId={String(order._id)}
                items={(order.checklist || []).map((c) => ({ id: String(c._id), text: c.text, done: c.done }))}
                canEdit={canEdit}
              />

              {order.bookedServiceTitle && (
                <div className="border border-[var(--rk-accent)]/30 rounded-xl p-4 bg-[var(--rk-accent)]/5">
                  <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-accent)] mb-1">Über Angebot gebucht</p>
                  <p className="text-sm">
                    {order.bookedServiceTitle} — {order.bookedTierName} ({formatEUR(order.bookedTierPrice)})
                  </p>
                  <p className="text-[0.65rem] text-[var(--rk-ink-muted)] mt-1">
                    Nur zur Orientierung — der tatsächliche Preis wird weiterhin unten verhandelt.
                  </p>
                </div>
              )}

              {order.bookedBundleTitle && (
                <div className="border border-[var(--rk-accent)]/30 rounded-xl p-4 bg-[var(--rk-accent)]/5">
                  <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-accent)] mb-1">Über Paket gebucht</p>
                  <p className="text-sm">
                    {order.bookedBundleTitle} ({formatEUR(order.bookedBundlePrice)})
                  </p>
                  <p className="text-[0.65rem] text-[var(--rk-ink-muted)] mt-1">
                    Nur zur Orientierung — der tatsächliche Preis wird weiterhin unten verhandelt.
                  </p>
                </div>
              )}

              <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 text-xs">
                <Row label="Art des Shootings" value={order.shootingType} />
                <Row label="Auftragsart" value={order.compensationType === "tfp" ? "TFP" : "Kostenpflichtig"} />
                <Row label="Ort / Event" value={order.eventLocation} />
                <Row label="Wunschtermin" value={order.datePeriod ? formatDatePeriod(order.datePeriod) : ""} />
                <Row label="Instagram" value={order.instagramHandle} />
                <Row label="Discord" value={order.discordHandle} />
              </dl>

              {order.ideaMood && (
                <div>
                  <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Idee & Stimmung</p>
                  <p className="mt-1 text-sm whitespace-pre-line">{order.ideaMood}</p>
                </div>
              )}
              {order.additionalNotes && (
                <div>
                  <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Anmerkungen</p>
                  <p className="mt-1 text-sm whitespace-pre-line">{order.additionalNotes}</p>
                </div>
              )}

              {order.attachments.length > 0 && (
                <div className="flex flex-wrap gap-2">
                  {order.attachments.map((att) => (
                    <a
                      key={att.storedName}
                      href={`/api/files/${order._id}/${att.storedName}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex items-center gap-1.5 text-xs border border-white/15 rounded-full px-3 py-1 hover:border-white/50 transition-colors"
                    >
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" className="opacity-70 shrink-0">
                        <path
                          d="M21.44 11.05l-9.19 9.19a5 5 0 0 1-7.07-7.07l9.19-9.19a3.5 3.5 0 0 1 4.95 4.95L10.5 17.66a2 2 0 0 1-2.83-2.83l8.49-8.49"
                          stroke="currentColor"
                          strokeWidth="1.6"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                      {att.filename}
                    </a>
                  ))}
                </div>
              )}

              <p className="text-[0.65rem] text-[var(--rk-ink-muted)]">
                Eingegangen: {formatDateTimeDE(new Date(order.createdAt))}
              </p>

              {order.compensationType === "paid" && (canPricing || canDiscounts || canPayments || canInvoicing) && (
                <SectionDivider label="Preis & Zahlung" />
              )}

              {order.compensationType === "paid" && canPricing && (
                <PriceProposalAdmin
                  orderId={String(order._id)}
                  phase={priceData.state.phase}
                  history={priceData.history}
                  templates={priceTemplates.map((t) => ({ id: String(t._id), name: t.name, defaultAmount: t.defaultAmount, note: t.note }))}
                />
              )}

              {order.compensationType === "paid" && canDiscounts && (
                <AdminDiscountPanel
                  orderId={String(order._id)}
                  discountCode={order.discountCode}
                  discountAmount={order.discountAmount}
                  manualDiscountAmount={order.manualDiscountAmount}
                  latestAmount={priceData.history.length ? priceData.history[priceData.history.length - 1].amount : 0}
                  showPayable={priceData.state.phase === "agreed"}
                />
              )}

              {order.compensationType === "paid" && canPricing && (
                <AdminManualDiscountPanel
                  orderId={String(order._id)}
                  manualDiscountAmount={order.manualDiscountAmount}
                  manualDiscountNote={order.manualDiscountNote}
                  discountAmount={order.discountAmount}
                  latestAmount={priceData.history.length ? priceData.history[priceData.history.length - 1].amount : 0}
                  showPayable={priceData.state.phase === "agreed"}
                />
              )}

              {order.compensationType === "paid" && canPayments && (
                <PaymentStatusPanel
                  orderId={String(order._id)}
                  paid={order.paid}
                  paidAt={order.paidAt ? new Date(order.paidAt).toISOString() : null}
                  paymentMethod={order.paymentMethod}
                  paymentReference={formatPaymentReference(String(order._id))}
                  reminderFeeTotal={order.reminderFeeTotal || 0}
                  depositAmount={order.depositAmount || 0}
                  depositPaid={order.depositPaid}
                  depositPaidAt={order.depositPaidAt ? new Date(order.depositPaidAt).toISOString() : null}
                  refundedAmount={order.refundedAmount || 0}
                  refundedAt={order.refundedAt ? new Date(order.refundedAt).toISOString() : null}
                  refundNote={order.refundNote || ""}
                />
              )}

              {order.compensationType === "paid" && canInvoicing && (
                <AdminInvoicePanel
                  orderId={String(order._id)}
                  priceAgreed={priceData.state.phase === "agreed"}
                  invoice={
                    invoice
                      ? {
                          id: String(invoice._id),
                          number: invoice.number,
                          issueDate: new Date(invoice.issueDate).toISOString(),
                          totalAmount: invoice.totalAmount,
                        }
                      : null
                  }
                />
              )}

              {order.compensationType === "paid" && canInvoicing && (
                <AdminReminderPanel
                  orderId={String(order._id)}
                  paid={order.paid}
                  hasInvoice={Boolean(invoice)}
                  reminders={reminders.map((r) => ({
                    id: String(r._id),
                    level: r.level,
                    fee: r.fee || 0,
                    amountDue: r.amountDue,
                    automatic: r.automatic || false,
                    createdAt: new Date(r.createdAt).toISOString(),
                    dueDate: new Date(r.dueDate).toISOString(),
                  }))}
                  nextFee={
                    settings.reminderEscalationSettings.levelFees[
                      Math.min(reminders.length, settings.reminderEscalationSettings.levelFees.length - 1)
                    ] || 0
                  }
                />
              )}

              <SectionDivider label="Vertrag & Fotos" />

              <AdminContractPanel
                orderId={String(order._id)}
                compensationType={order.compensationType}
                priceAgreed={priceData.state.phase === "agreed"}
                contract={
                  contract
                    ? {
                        id: String(contract._id),
                        type: contract.type,
                        status: contract.status,
                        // .lean() wendet Mongoose-Defaults nicht an - bei
                        // Verträgen von vor der reminders[]-Einführung
                        // (22.09.2026) fehlt das Feld im rohen Dokument
                        // komplett statt [] zu sein (Fund vom Nutzer,
                        // 24.09.2026: Seite crashte beim Öffnen).
                        lastReminderAt:
                          (contract.reminders || []).length > 0
                            ? new Date(contract.reminders[contract.reminders.length - 1].sentAt).toISOString()
                            : contract.sentAt
                              ? new Date(contract.sentAt).toISOString()
                              : null,
                      }
                    : null
                }
              />

              {order.compensationType === "paid" && (
                <UsageRightsSelect orderId={String(order._id)} usageRights={order.usageRights || ""} canEdit={canEdit} />
              )}

              <AdminPhotoPanel
                clientId={String(order.clientId)}
                orderId={orderId}
                orders={clientOrders.map((o) => ({ id: String(o._id), label: o.characterOrConcept }))}
                folders={photoFolders.map((f) => ({
                  id: String(f._id),
                  label: f.label,
                  nextcloudPath: f.nextcloudPath,
                  assignedAt: new Date(f.assignedAt).toISOString(),
                  released: Boolean(f.released),
                  orderId: f.orderId ? String(f.orderId) : null,
                }))}
              />

              {canEdit && photoFolders.length > 0 && (
                <p className="mt-2">
                  <a
                    href={`/api/orders/${orderId}/story-recap`}
                    className="inline-flex items-center gap-1.5 text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white transition-colors"
                  >
                    📸 Instagram-Story-Recap herunterladen
                  </a>
                </p>
              )}

              <SectionDivider label="Verwaltung" />

              <RejectOrderPanel
                orderId={String(order._id)}
                rejected={order.rejected}
                rejectionReason={order.rejectionReason}
                rejectionNote={order.rejectionNote}
                rejectedAt={order.rejectedAt ? new Date(order.rejectedAt).toISOString() : null}
                reasons={reasonOptions}
              />

              {activities.length > 0 && (
                <details className="border-t border-white/10 pt-4">
                  <summary className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] cursor-pointer">
                    Verlauf ({activities.length})
                  </summary>
                  <ul className="mt-2 flex flex-col gap-1">
                    {activities.map((a) => (
                      <li key={String(a._id)} className="text-xs text-[var(--rk-ink-muted)]">
                        <span className="text-[var(--rk-ink)]">{formatDateTimeDE(new Date(a.createdAt))}</span> —{" "}
                        {a.message} <span className="opacity-60">({a.actor === "admin" ? "Du" : "Kunde"})</span>
                      </li>
                    ))}
                  </ul>
                </details>
              )}
            </div>

            <div className="border border-white/10 rounded-xl p-5 lg:sticky lg:top-32 bg-[var(--rk-bg)]">
              <OrderChat
                entityId={String(order._id)}
                messages={orderMessages}
                viewerId={viewerId}
                readOnly
                maxHeightRem={32}
                labels={{
                  title: "Nachrichten (Archiv) — Kommunikation läuft jetzt per E-Mail",
                  placeholder: "Nachricht schreiben…",
                  send: "Senden",
                  empty: "Keine Nachrichten vorhanden.",
                }}
              />
            </div>
          </div>
        </div>
      </main>
    </>
  );
}

function SectionDivider({ label }: { label: string }) {
  return (
    <div className="flex items-center gap-2 mt-2">
      <h2 className="text-xs uppercase tracking-[0.15em] text-[var(--rk-ink-muted)] whitespace-nowrap">{label}</h2>
      <div className="h-px flex-1 bg-white/10" />
    </div>
  );
}

function Row({ label, value }: { label: string; value?: string }) {
  if (!value) return null;
  return (
    <div>
      <dt className="text-[var(--rk-ink-muted)] uppercase tracking-[0.08em] text-[0.65rem]">{label}</dt>
      <dd className="mt-0.5 whitespace-pre-line">{value}</dd>
    </div>
  );
}