mrp/client/src/modules/crm/CrmDetailPage.tsx

import { permissions } from "@mrp/shared";
import type { CrmContactEntryInput, CrmRecordDetailDto } from "@mrp/shared/dist/crm/types.js";
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";

import { useAuth } from "../../auth/AuthProvider";
import { api, ApiError } from "../../lib/api";
import { CrmContactEntryForm } from "./CrmContactEntryForm";
import { CrmContactTypeBadge } from "./CrmContactTypeBadge";
import { CrmStatusBadge } from "./CrmStatusBadge";
import { type CrmEntity, crmConfigs, emptyCrmContactEntryInput } from "./config";

interface CrmDetailPageProps {
  entity: CrmEntity;
}

export function CrmDetailPage({ entity }: CrmDetailPageProps) {
  const { token, user } = useAuth();
  const { customerId, vendorId } = useParams();
  const recordId = entity === "customer" ? customerId : vendorId;
  const config = crmConfigs[entity];
  const [record, setRecord] = useState<CrmRecordDetailDto | null>(null);
  const [status, setStatus] = useState(`Loading ${config.singularLabel.toLowerCase()}...`);
  const [contactEntryForm, setContactEntryForm] = useState<CrmContactEntryInput>(emptyCrmContactEntryInput);
  const [contactEntryStatus, setContactEntryStatus] = useState("Add a timeline entry for this account.");
  const [isSavingContactEntry, setIsSavingContactEntry] = useState(false);

  const canManage = user?.permissions.includes(permissions.crmWrite) ?? false;

  useEffect(() => {
    if (!token || !recordId) {
      return;
    }

    const loadRecord = entity === "customer" ? api.getCustomer(token, recordId) : api.getVendor(token, recordId);

    loadRecord
      .then((nextRecord) => {
        setRecord(nextRecord);
        setStatus(`${config.singularLabel} record loaded.`);
        setContactEntryStatus("Add a timeline entry for this account.");
      })
      .catch((error: unknown) => {
        const message = error instanceof ApiError ? error.message : `Unable to load ${config.singularLabel.toLowerCase()}.`;
        setStatus(message);
      });
  }, [config.singularLabel, entity, recordId, token]);

  if (!record) {
    return <div className="rounded-[28px] border border-line/70 bg-surface/90 p-8 text-sm text-muted shadow-panel">{status}</div>;
  }

  function updateContactEntryField<Key extends keyof CrmContactEntryInput>(key: Key, value: CrmContactEntryInput[Key]) {
    setContactEntryForm((current) => ({ ...current, [key]: value }));
  }

  async function handleContactEntrySubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!token || !recordId) {
      return;
    }

    setIsSavingContactEntry(true);
    setContactEntryStatus("Saving timeline entry...");

    try {
      const nextEntry =
        entity === "customer"
          ? await api.createCustomerContactEntry(token, recordId, contactEntryForm)
          : await api.createVendorContactEntry(token, recordId, contactEntryForm);

      setRecord((current) =>
        current
          ? {
              ...current,
              contactHistory: [nextEntry, ...current.contactHistory].sort(
                (left, right) => new Date(right.contactAt).getTime() - new Date(left.contactAt).getTime()
              ),
            }
          : current
      );
      setContactEntryForm({
        ...emptyCrmContactEntryInput,
        contactAt: new Date().toISOString(),
      });
      setContactEntryStatus("Timeline entry added.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to save timeline entry.";
      setContactEntryStatus(message);
    } finally {
      setIsSavingContactEntry(false);
    }
  }

  return (
    <section className="space-y-4">
      <div className="rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">CRM Detail</p>
            <h3 className="mt-3 text-3xl font-bold text-text">{record.name}</h3>
            <div className="mt-4">
              <CrmStatusBadge status={record.status} />
            </div>
            <p className="mt-2 text-sm text-muted">
              {config.singularLabel} record last updated {new Date(record.updatedAt).toLocaleString()}.
            </p>
          </div>
          <div className="flex flex-wrap gap-3">
            <Link
              to={config.routeBase}
              className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-4 py-3 text-sm font-semibold text-text"
            >
              Back to {config.collectionLabel.toLowerCase()}
            </Link>
            {canManage ? (
              <Link
                to={`${config.routeBase}/${record.id}/edit`}
                className="inline-flex items-center justify-center rounded-2xl bg-brand px-5 py-3 text-sm font-semibold text-white"
              >
                Edit {config.singularLabel.toLowerCase()}
              </Link>
            ) : null}
          </div>
        </div>
      </div>
      <div className="grid gap-4 2xl:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)]">
        <article className="min-w-0 rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Contact</p>
          <dl className="mt-5 grid gap-4 xl:grid-cols-2">
            <div>
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Email</dt>
              <dd className="mt-2 text-base text-text">{record.email}</dd>
            </div>
            <div>
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Phone</dt>
              <dd className="mt-2 text-base text-text">{record.phone}</dd>
            </div>
            <div className="md:col-span-2">
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Address</dt>
              <dd className="mt-2 whitespace-pre-line text-base text-text">
                {[record.addressLine1, record.addressLine2, `${record.city}, ${record.state} ${record.postalCode}`, record.country]
                  .filter(Boolean)
                  .join("\n")}
              </dd>
            </div>
          </dl>
        </article>
        <article className="min-w-0 rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Internal Notes</p>
          <p className="mt-4 whitespace-pre-line text-sm leading-7 text-text">
            {record.notes || "No internal notes recorded for this account yet."}
          </p>
          <div className="mt-8 rounded-2xl border border-line/70 bg-page/70 px-4 py-4 text-sm text-muted">
            Created {new Date(record.createdAt).toLocaleDateString()}
          </div>
        </article>
      </div>
      <section className="grid gap-4 2xl:grid-cols-[minmax(360px,0.88fr)_minmax(0,1.12fr)]">
        {canManage ? (
          <article className="min-w-0 rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Contact History</p>
            <h4 className="mt-3 text-xl font-bold text-text">Add timeline entry</h4>
            <p className="mt-2 text-sm text-muted">
              Record calls, emails, meetings, and follow-up notes directly against this account.
            </p>
            <div className="mt-6">
              <CrmContactEntryForm
                form={contactEntryForm}
                isSaving={isSavingContactEntry}
                status={contactEntryStatus}
                onChange={updateContactEntryField}
                onSubmit={handleContactEntrySubmit}
              />
            </div>
          </article>
        ) : null}
        <article className="min-w-0 rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Timeline</p>
          <h4 className="mt-3 text-xl font-bold text-text">Recent interactions</h4>
          {record.contactHistory.length === 0 ? (
            <div className="mt-6 rounded-3xl border border-dashed border-line/70 bg-page/60 px-6 py-12 text-center text-sm text-muted">
              No contact history has been recorded for this account yet.
            </div>
          ) : (
            <div className="mt-6 space-y-4">
              {record.contactHistory.map((entry) => (
                <article key={entry.id} className="rounded-3xl border border-line/70 bg-page/60 p-5">
                  <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
                    <div>
                      <div className="flex flex-wrap items-center gap-3">
                        <CrmContactTypeBadge type={entry.type} />
                        <h5 className="text-base font-semibold text-text">{entry.summary}</h5>
                      </div>
                      <p className="mt-3 whitespace-pre-line text-sm leading-7 text-text">{entry.body}</p>
                    </div>
                    <div className="text-sm text-muted lg:text-right">
                      <div>{new Date(entry.contactAt).toLocaleString()}</div>
                      <div className="mt-1">{entry.createdBy.name}</div>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          )}
        </article>
      </section>
    </section>
  );
}