import type { Organization } from "fhir/r4";
import { OrgInfoSection } from "./sections/OrgInfoSection.tsx";
import { OrgStaffSection } from "./sections/OrgStaffSection.tsx";
import { OrgAppointmentsSection } from "./sections/OrgAppointmentsSection.tsx";
import { ProviderAccessBlock } from "./sections/ProviderAccessBlock.tsx";
import { OrgCollabTeamsSection } from "./sections/OrgCollabTeamsSection.tsx";
import { useOrgCollabTeams } from "./useOrgCollabTeams.ts";

/**
 * What a practice shows when it is opened - and it opens INSIDE its own card.
 *
 * This used to be a page of its own at `/dashboard/providers/{id}`, reached by making the whole row a
 * link. The deck records that shape being tried and written out: "A practice is a card in a list:
 * opening one must not spill out of it, and there is no page to go to." The reason is not tidiness. A
 * patient opens a practice to ask what is coming, who is here, who else can see this, and what this
 * practice may do with their record - and every one of those is a question about THIS practice among
 * the others. A page that replaces the list removes the comparison the list exists to offer, and on a
 * phone it costs a navigation each way to check the practice above it.
 *
 * So this renders no heading of its own and no way back. The list's heading never left, and the row
 * closes rather than returning.
 */
export const OrgDetailBody = ({
  organization,
  orgId,
}: {
  organization: Organization;
  orgId: string;
}) => {
  const collab = useOrgCollabTeams(orgId, organization.name);
  return (
  /*
   * ONE CARD, DIVIDED - see `OrgSection`. Each of these four used to draw its own bordered card, so an
   * opened practice read as four things that happened to be adjacent rather than as four facets of one
   * participant in the patient's record.
   *
   * `divide-y` puts the hairlines on the PARENT, which is what lets `OrgInfoSection` return null for a
   * practice with no locations without leaving a rule across the card above nothing.
   *
   * `divide-line` IS NOT DECORATION - `divide-y` ALONE DRAWS A FOREIGN GREY. `divide-y` sets only a
   * border WIDTH; the colour falls through to Tailwind preflight's `*, ::before, ::after`, which is
   * `#e5e7eb` - a cool grey with no relation to this palette. The card's own ring is `--line` `#e5e0d8`,
   * so the card drew a warm outline around cool grey rules. That is the same fault, word for word, that
   * the 2026-09-08 pass fixed on `.wp-card__header` in `index.css`: *"the ring moved to the settled warm
   * hairline in this pass and this divider stayed on WordPress's neutral ... so a card drew a warm
   * outline around a cool grey rule."* `divide-y` was not in that sweep.
   *
   * Measured on the mount, patient My practices -> Great River Health Center, 1400x950:
   *
   *     card ring        rgb(229, 224, 216)   --line
   *     band separator   rgb(229, 231, 235)   <- preflight, not ours
   *
   * The separators between LOCATIONS / ACCESS / PROVIDERS are the card's OWN structure, so they take
   * `--line`, the ring's colour - not `--line-soft`, which this card reserves for rows INSIDE a band.
   */
  /* The deck no longer boxes these: they are sections of the practice's own card, each under a soft
     rule, and on a laptop they sit in two columns (locations left; visits and team right). The
     wrappers name each section's place so an absent one (no locations) leaves no rule behind. */
  <div className="ahr-practice-secs">
    <div className="ahr-practice-sec" data-sec="locations"><OrgInfoSection organization={organization} /></div>
    {/* The deck's order: what is coming, who is here, who else can see, then access last - it holds
        the one action that pressing again does not undo, so it sits under everything it affects. */}
    <div className="ahr-practice-sec" data-sec="visits"><OrgAppointmentsSection orgId={orgId} organizationName={organization.name} /></div>
    <div className="ahr-practice-sec" data-sec="team"><OrgStaffSection orgId={orgId} organizationName={organization.name} /></div>
    <div className="ahr-practice-sec" data-sec="teams"><OrgCollabTeamsSection collab={collab} organizationName={organization.name} /></div>
    <div className="ahr-practice-sec" data-sec="access"><ProviderAccessBlock orgId={orgId} organizationName={organization.name} collabTeams={collab.teams} /></div>
  </div>
  );
};

export default OrgDetailBody;