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

import { useAuth } from "../../auth/AuthProvider";
import { api, ApiError } from "../../lib/api";
import { CrmAttachmentsPanel } from "./CrmAttachmentsPanel";
import { CrmContactsPanel } from "./CrmContactsPanel";
import { CrmContactEntryForm } from "./CrmContactEntryForm";
import { CrmLifecycleBadge } from "./CrmLifecycleBadge";
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 [relatedPurchaseOrders, setRelatedPurchaseOrders] = useState<PurchaseOrderSummaryDto[]>([]);
  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.");
        if (entity === "vendor") {
          return api.getPurchaseOrders(token, { vendorId: nextRecord.id });
        }

        return [];
      })
      .then((purchaseOrders) => setRelatedPurchaseOrders(purchaseOrders))
      .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-4 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()
              ),
              rollups: {
                lastContactAt: nextEntry.contactAt,
                contactHistoryCount: (current.rollups?.contactHistoryCount ?? current.contactHistory.length) + 1,
                contactCount: current.rollups?.contactCount ?? current.contacts?.length ?? 0,
                attachmentCount: current.rollups?.attachmentCount ?? 0,
                childCustomerCount: current.rollups?.childCustomerCount,
              },
            }
          : 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-4 shadow-panel 2xl:p-5">
        <div className="flex flex-col gap-3 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-2 text-2xl font-bold text-text">{record.name}</h3>
            <div className="mt-4">
              <div className="flex flex-wrap gap-3">
                <CrmStatusBadge status={record.status} />
                {record.lifecycleStage ? <CrmLifecycleBadge stage={record.lifecycleStage} /> : null}
              </div>
            </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-2 py-2 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-2 py-2 text-sm font-semibold text-white"
              >
                Edit {config.singularLabel.toLowerCase()}
              </Link>
            ) : null}
          </div>
        </div>
      </div>
      <div className="grid gap-3 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-4 shadow-panel 2xl:p-5">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Contact</p>
          <dl className="mt-5 grid gap-3 xl:grid-cols-2">
            <div>
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Email</dt>
              <dd className="mt-1 text-sm text-text">{record.email}</dd>
            </div>
            <div>
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Phone</dt>
              <dd className="mt-1 text-sm 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-1 whitespace-pre-line text-sm text-text">
                {[record.addressLine1, record.addressLine2, `${record.city}, ${record.state} ${record.postalCode}`, record.country]
                  .filter(Boolean)
                  .join("\n")}
              </dd>
            </div>
            <div className="md:col-span-2">
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Commercial terms</dt>
              <dd className="mt-2 grid gap-3 text-sm text-text md:grid-cols-2">
                <div>Payment terms: {record.paymentTerms ?? "Not set"}</div>
                <div>Currency: {record.currencyCode ?? "USD"}</div>
                <div>Tax exempt: {record.taxExempt ? "Yes" : "No"}</div>
                <div>Credit hold: {record.creditHold ? "Yes" : "No"}</div>
              </dd>
            </div>
          </dl>
        </article>
        <article className="min-w-0 rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Internal Notes</p>
          <p className="mt-3 whitespace-pre-line text-sm leading-6 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-2 py-2 text-sm text-muted">
            Created {new Date(record.createdAt).toLocaleDateString()}
          </div>
          <div className="mt-4 rounded-2xl border border-line/70 bg-page/70 px-2 py-2">
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Operational Flags</p>
            <div className="mt-3 flex flex-wrap gap-2 text-xs font-semibold uppercase tracking-[0.12em]">
              {record.preferredAccount ? <span className="rounded-full border border-line/70 px-3 py-1 text-text">Preferred</span> : null}
              {record.strategicAccount ? <span className="rounded-full border border-line/70 px-3 py-1 text-text">Strategic</span> : null}
              {record.requiresApproval ? <span className="rounded-full border border-amber-400/40 px-3 py-1 text-amber-700 dark:text-amber-300">Requires Approval</span> : null}
              {record.blockedAccount ? <span className="rounded-full border border-rose-400/40 px-3 py-1 text-rose-700 dark:text-rose-300">Blocked</span> : null}
              {!record.preferredAccount && !record.strategicAccount && !record.requiresApproval && !record.blockedAccount ? (
                <span className="rounded-full border border-line/70 px-3 py-1 text-muted">Standard</span>
              ) : null}
            </div>
          </div>
          {entity === "customer" ? (
            <div className="mt-4 rounded-2xl border border-line/70 bg-page/70 px-2 py-2">
              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Reseller Profile</p>
              <div className="mt-3 grid gap-3 text-sm text-text">
                <div>
                  <span className="font-semibold">Account type:</span>{" "}
                  {record.isReseller ? "Reseller" : record.parentCustomerName ? "End customer" : "Direct customer"}
                </div>
                <div>
                  <span className="font-semibold">Discount:</span> {(record.resellerDiscountPercent ?? 0).toFixed(2)}%
                </div>
                <div>
                  <span className="font-semibold">Parent reseller:</span> {record.parentCustomerName ?? "None"}
                </div>
                <div>
                  <span className="font-semibold">Child accounts:</span> {record.childCustomers?.length ?? 0}
                </div>
              </div>
            </div>
          ) : null}
        </article>
      </div>
      <section className="grid gap-3 xl:grid-cols-4">
        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Last Contact</p>
          <div className="mt-2 text-base font-bold text-text">
            {record.rollups?.lastContactAt ? new Date(record.rollups.lastContactAt).toLocaleDateString() : "None"}
          </div>
        </article>
        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Timeline Entries</p>
          <div className="mt-2 text-base font-bold text-text">{record.rollups?.contactHistoryCount ?? record.contactHistory.length}</div>
        </article>
        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Account Contacts</p>
          <div className="mt-2 text-base font-bold text-text">{record.rollups?.contactCount ?? record.contacts?.length ?? 0}</div>
        </article>
        <article className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Attachments</p>
          <div className="mt-2 text-base font-bold text-text">{record.rollups?.attachmentCount ?? 0}</div>
        </article>
      </section>
      {entity === "customer" && (record.childCustomers?.length ?? 0) > 0 ? (
        <section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Hierarchy</p>
          <h4 className="mt-2 text-lg font-bold text-text">End customers under this reseller</h4>
          <div className="mt-5 grid gap-3 xl:grid-cols-2 2xl:grid-cols-3">
            {record.childCustomers?.map((child) => (
              <Link
                key={child.id}
                to={`/crm/customers/${child.id}`}
                className="rounded-3xl border border-line/70 bg-page/60 px-2 py-2 transition hover:border-brand/50 hover:bg-page/80"
              >
                <div className="text-sm font-semibold text-text">{child.name}</div>
                <div className="mt-2">
                  <CrmStatusBadge status={child.status} />
                </div>
              </Link>
            ))}
          </div>
        </section>
      ) : null}
      {entity === "vendor" ? (
        <section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
          <div className="flex items-center justify-between gap-3">
            <div>
              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Purchasing Activity</p>
              <h4 className="mt-2 text-lg font-bold text-text">Recent purchase orders</h4>
            </div>
            <div className="flex flex-wrap gap-2">
              {canManage ? (
                <Link to={`/purchasing/orders/new?vendorId=${record.id}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
                  New purchase order
                </Link>
              ) : null}
              <Link to="/purchasing/orders" className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
                Open purchasing
              </Link>
            </div>
          </div>
          {relatedPurchaseOrders.length === 0 ? (
            <div className="mt-6 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">No purchase orders exist for this vendor yet.</div>
          ) : (
            <div className="mt-6 space-y-3">
              {relatedPurchaseOrders.slice(0, 8).map((order) => (
                <Link key={order.id} to={`/purchasing/orders/${order.id}`} className="block rounded-3xl border border-line/70 bg-page/60 p-3 transition hover:bg-page/80">
                  <div className="flex flex-wrap items-center justify-between gap-3">
                    <div>
                      <div className="font-semibold text-text">{order.documentNumber}</div>
                      <div className="mt-1 text-xs text-muted">{new Date(order.issueDate).toLocaleDateString()} · {order.lineCount} lines</div>
                    </div>
                    <div className="text-sm font-semibold text-text">${order.total.toFixed(2)}</div>
                  </div>
                </Link>
              ))}
            </div>
          )}
        </section>
      ) : null}
      <CrmContactsPanel
        entity={entity}
        ownerId={record.id}
        contacts={record.contacts ?? []}
        onContactsChange={(contacts: CrmContactDto[]) =>
          setRecord((current) =>
            current
              ? {
                  ...current,
                  contacts,
                  rollups: {
                    lastContactAt: current.rollups?.lastContactAt ?? null,
                    contactHistoryCount: current.rollups?.contactHistoryCount ?? current.contactHistory.length,
                    contactCount: contacts.length,
                    attachmentCount: current.rollups?.attachmentCount ?? 0,
                    childCustomerCount: current.rollups?.childCustomerCount,
                  },
                }
              : current
          )
        }
      />
      <section className="grid gap-3 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-4 shadow-panel 2xl:p-5">
            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Contact History</p>
            <h4 className="mt-2 text-lg 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-4 shadow-panel 2xl:p-5">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Timeline</p>
          <h4 className="mt-2 text-lg 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-4 py-8 text-center text-sm text-muted">
              No contact history has been recorded for this account yet.
            </div>
          ) : (
            <div className="mt-6 space-y-3">
              {record.contactHistory.map((entry) => (
                <article key={entry.id} className="rounded-3xl border border-line/70 bg-page/60 p-3">
                  <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-sm font-semibold text-text">{entry.summary}</h5>
                      </div>
                      <p className="mt-2 whitespace-pre-line text-sm leading-6 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>
      <CrmAttachmentsPanel
        ownerType={config.fileOwnerType}
        ownerId={record.id}
        onAttachmentCountChange={(attachmentCount) =>
          setRecord((current) =>
            current
              ? {
                  ...current,
                  rollups: {
                    lastContactAt: current.rollups?.lastContactAt ?? null,
                    contactHistoryCount: current.rollups?.contactHistoryCount ?? current.contactHistory.length,
                    contactCount: current.rollups?.contactCount ?? current.contacts?.length ?? 0,
                    attachmentCount,
                    childCustomerCount: current.rollups?.childCustomerCount,
                  },
                }
              : current
          )
        }
      />
    </section>
  );
}