import { Link } from "react-router-dom";
import { OrgSection } from "./OrgSection.tsx";
import { usePatientServiceContext } from "../../../../services/PatientService.tsx";
import { useAuthServiceContext } from "../../../../services/AuthService.tsx";
import { SectionReadNotice } from "./SectionReadNotice.tsx";
import { AppSpinner } from "../../../../components";
import { EmptyState } from "../../../../components/ui/empty-state.tsx";
import { joinNames } from "../../../../utils/orgCollabTeams";
import type { OrgCollabTeamsState } from "../useOrgCollabTeams.ts";

/** The patient's collaboration teams this practice has people in, and who those people are. */
export const OrgCollabTeamsSection = ({
  collab,
  organizationName,
}: {
  collab: OrgCollabTeamsState;
  organizationName?: string;
}) => {
  const practice = organizationName || "This practice";
  const { patientState } = usePatientServiceContext();
  const { actingAs, currentUser } = useAuthServiceContext();
  // The age gate refuses teams when the record has no date of birth. Only on the signed-in patient's own
  // record, once it has been read, is that theirs to fix; a helper shown the patient they help, and a
  // known adolescent, keep the ordinary refusal.
  const ownRecord = currentUser?.fhir?.resourceType === "Patient" && currentUser.fhir.id === patientState?.id;
  const needsBirthDate =
    collab.failure === "denied" && !actingAs && ownRecord && !!patientState && !patientState.birthDate;
  return (
    <OrgSection label="Collaboration teams they are in">
      {needsBirthDate ? (
        <div className="space-y-2">
          <p className="text-sm">
            Add your date of birth in your profile so we can determine which features are available to you.
          </p>
          <Link to="/dashboard/profile" className="btn btn-blue">Add your date of birth</Link>
        </div>
      ) : collab.failure ? (
        <SectionReadNotice
          failure={collab.failure}
          subject="your collaboration teams"
          practice={practice}
          whatTheyCanTell="which of your teams they are in"
          onRetry={collab.reload}
        />
      ) : collab.teams === null ? (
        <div className="flex justify-center py-6"><AppSpinner /></div>
      ) : collab.teams.length === 0 ? (
        <EmptyState
          size="compact"
          title="Not in your teams"
          description={`Nobody from ${practice} is in any of your collaboration teams.`}
        />
      ) : (
        <ul className="space-y-2">
          {collab.teams.map((team) => (
            <li key={team.teamId} className="rounded border border-line px-3 py-2">
              <p className="text-sm font-medium text-ink-strong">{team.name}</p>
              <p className="text-xs text-secondary">
                {joinNames(team.fromHere)} from here &middot; {team.memberCount}{" "}
                {team.memberCount === 1 ? "member" : "members"} in all
              </p>
            </li>
          ))}
        </ul>
      )}
    </OrgSection>
  );
};

export default OrgCollabTeamsSection;