import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent } from "react";
import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
import { ChevronRight, UsersRound } from "lucide-react";
import clsx from "clsx";
import { AppSpinner } from "../../../components";
import { Button } from "../../../components/ui/button";
import { EmptyState } from "../../../components/ui/empty-state";
import { Input } from "../../../components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "../../../components/ui/tabs";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../../../components/ui/dialog";
import {
  useCollaborationTeamServiceContext,
  usePatientServiceContext,
  useAuthServiceContext,
  STATE_LABELS,
} from "../../../services";
import { useMyProxies } from "../../../hooks/useMyProxies.tsx";
import { DORMANT_AFTER_DAYS, teamQuietReason, teamDisplayStatus, teamStatusLabel } from "../../../utils/collaborationTeamDormancy";
import { describeRoster } from "../../../utils/collaborationTeamRoster";
import { splitTeamsByOwner, type TeamWithMembers } from "../../../utils/collaborationTeamSides";
import { useCollabTeamSummaries } from "../../../hooks/useCollabTeamSummaries";
import { formatRelativeTime } from "../../../utils/formatRelativeTime";
import { formatFhirHumanName } from "../../../utils/fhirHumanName.tsx";
import { CareTeamDetail } from "./CareTeamDetailPage";
import { ConnectedShareAccessDialog } from "./ShareAccessDialog";
import { MemberTeamDetail } from "./MemberTeamDetail";
import { publishOpenTeam } from "./openTeamCrumb";
import { useIsPhoneWidth } from "../../../hooks/useIsPhoneWidth";
import { usePatientInbox } from "../../../components/PatientInbox/patientInboxContext";
import { ROSTER_REREADS, ROSTER_REREAD_MS, TEAM_MEMBERSHIP_UPDATED } from "../../../components/PatientInbox/PatientInboxProvider";
import { useOptionalWebSocketServiceContext } from "../../../services/WebSocketService";
import { relayServerFailure } from "../../../utils/fetchFailureMessage";
import { SANDBOX_TEAMS_UNAVAILABLE, useCollaborationAvailability } from "../../../utils/collaborationAvailability";
import "./CareTeamsPage.css";

type Side = "mine" | "others";
const LIST_PATH = "/dashboard/collaboration-teams";

// Collaboration teams: My teams and Other teams, each grouped Active / Dormant / Closed.
// A team opens as an overlay over the list at every width; its URL is the list's plus the team id.
export const CareTeamsPage = () => {
  const { teamId } = useParams<{ teamId?: string }>();
  const navigate = useNavigate();
  // A practitioner to invite, carried from a referral onto the team the patient invites them to.
  const invite = useSearchParams()[0].get("invite") ?? undefined;
  const inviteQuery = invite ? `?invite=${encodeURIComponent(invite)}` : "";
  const { listTeams, createTeam, memberAction } = useCollaborationTeamServiceContext();
  const { noteTeam } = usePatientInbox();
  // Guarded on patientState so a false error never flashes before the patient context loads.
  const { patientState } = usePatientServiceContext();
  const { proxies } = useMyProxies();
  // Switched in, the caller is a guardian, and only a patient or practitioner may start a team.
  const { actingAs } = useAuthServiceContext();
  const mayCreate = !actingAs;
  // Only the patient shares by code; a proxy tier is not authority to release the record.
  const mayShare = !actingAs;
  // In the sandbox the server lists no teams and refuses every team write, so nothing is read or offered.
  const availability = useCollaborationAvailability();
  const unavailable = availability === "unavailable";
  const [showShare, setShowShare] = useState<boolean>(false);

  const [teams, setTeams] = useState<TeamWithMembers[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  // Until the tenant is known, no teams is not yet "no teams": it may be the sandbox's empty answer.
  const awaitingTenant = availability === "checking" && !teams.length;
  const [side, setSide] = useState<Side>("mine");

  const [showCreateDialog, setShowCreateDialog] = useState<boolean>(false);
  const [teamName, setTeamName] = useState<string>("");
  const [creating, setCreating] = useState<boolean>(false);
  const [createError, setCreateError] = useState<string | null>(null);

  // Every read takes a number when it starts; only the newest answers, so an older success never restores a list a
  // newer read replaced or failed on. Decisions are offered only on a list the newest read answered.
  const readSeq = useRef(0);
  const [rosterCurrent, setRosterCurrent] = useState<boolean>(true);

  const load = useCallback(async () => {
    const mine = ++readSeq.current;
    if (!patientState) return;
    if (unavailable) {
      setTeams([]);
      setLoading(false);
      return;
    }

    setLoading(true);
    setError(null);
    try {
      const listed = await listTeams();
      if (mine !== readSeq.current) return;
      setTeams(listed);
      setRosterCurrent(true);
    } catch {
      if (mine !== readSeq.current) return;
      setError("Failed to load your collaboration teams");
      setRosterCurrent(false);
    } finally {
      if (mine === readSeq.current) setLoading(false);
    }
  }, [patientState, listTeams, unavailable]);

  // After a change inside the overlay: re-read without replacing the page with a spinner. Answers with what it
  // listed, or nothing when a newer read replaced it or it failed.
  const readAgain = useCallback(async (): Promise<TeamWithMembers[] | undefined> => {
    const mine = ++readSeq.current;
    setRosterCurrent(false);
    try {
      const listed = await listTeams();
      if (mine !== readSeq.current) return undefined;
      setTeams(listed);
      setError(null);
      setRosterCurrent(true);
      return listed;
    } catch {
      if (mine !== readSeq.current) return undefined;
      setError("Failed to load your collaboration teams");
      return undefined;
    }
  }, [listTeams]);
  const refresh = useCallback(async () => { await readAgain(); }, [readAgain]);

  // A roster changed elsewhere (another tab, another member): the server's notice names only the team, so the list is
  // read again and an open team shows what it now holds. A list that trails the notice is read a couple more times.
  const sockets = useOptionalWebSocketServiceContext();
  const subscribe = sockets?.subscribe;
  const unsubscribe = sockets?.unsubscribe;
  const teamsRef = useRef(teams);
  teamsRef.current = teams;
  useEffect(() => {
    if (!subscribe || !unsubscribe) return;
    let stopped = false;
    const timers: ReturnType<typeof setTimeout>[] = [];
    const rosterOf = (list: TeamWithMembers[] | undefined, id: string) =>
      `${list?.find((team) => team.teamId === id)?.status ?? ""}#` + (list?.find((team) => team.teamId === id)?.members ?? [])
        .map((member) => `${member.memberRef}:${member.state}:${member.invitationGeneration ?? ""}`).sort().join("|");
    const onRoster = (data: { teamId?: string } | undefined) => {
      const teamId = data?.teamId;
      if (!teamId || !teamsRef.current.some((team) => team.teamId === teamId)) return;
      const before = rosterOf(teamsRef.current, teamId);
      const read = async (left: number) => {
        const listed = await readAgain();
        if (stopped || !listed || left === 0 || rosterOf(listed, teamId) !== before) return;
        timers.push(setTimeout(() => void read(left - 1), ROSTER_REREAD_MS));
      };
      void read(ROSTER_REREADS);
    };
    subscribe(TEAM_MEMBERSHIP_UPDATED, onRoster);
    return () => {
      stopped = true;
      timers.forEach(clearTimeout);
      unsubscribe(TEAM_MEMBERSHIP_UPDATED, onRoster);
    };
  }, [subscribe, unsubscribe, readAgain]);

  useEffect(() => {
    load();
  }, [load]);

  const sides = useMemo(
    () => splitTeamsByOwner(teams, patientState?.id, proxies),
    [teams, patientState?.id, proxies],
  );

  // Opening a team from the list reads the teams again, so it shows a change made since the list was read.
  const lastOpened = useRef(teamId);
  useEffect(() => {
    if (teamId && teamId !== lastOpened.current) void refresh();
    lastOpened.current = teamId;
  }, [teamId, refresh]);

  const openOwn = teamId ? sides.mine.find((team) => team.teamId === teamId) : undefined;
  const openOther = teamId ? sides.others.find((other) => other.team.teamId === teamId) : undefined;

  // An id that is neither the patient's team nor one they belong to goes back to the list.
  useEffect(() => {
    if (!loading && !awaitingTenant && !error && teamId && !openOwn && !openOther) {
      navigate(LIST_PATH, { replace: true });
    }
  }, [loading, awaitingTenant, error, teamId, openOwn, openOther, navigate]);

  const invitableTeams = useMemo(() => sides.mine.filter((team) => team.status !== "dissolved"), [sides]);

  // With one team to invite them to, it opens straight onto the invite.
  useEffect(() => {
    if (!loading && !error && !teamId && invite && invitableTeams.length === 1) {
      navigate(`${LIST_PATH}/${invitableTeams[0].teamId}${inviteQuery}`, { replace: true });
    }
  }, [loading, error, teamId, invite, inviteQuery, invitableTeams, navigate]);

  // Opening another person's team from a link lands on the tab it belongs to.
  useEffect(() => {
    if (openOther) setSide("others");
  }, [openOther]);

  const openCreateDialog = () => {
    setTeamName("");
    setCreateError(null);
    setShowCreateDialog(true);
  };

  const handleCreate = async (event: FormEvent) => {
    event.preventDefault();
    const trimmed = teamName.trim();
    if (!trimmed || !mayCreate) return;

    setCreating(true);
    setCreateError(null);
    try {
      // Messages can open the new team before the list read carries it.
      noteTeam(await createTeam(trimmed));
      setShowCreateDialog(false);
      await load();
    } catch (failure) {
      // The server's own reason (a sandbox refusal included), never an invitation to retry what cannot work.
      setCreateError(relayServerFailure(failure, "Failed to create the collaboration team. Please try again."));
    } finally {
      setCreating(false);
    }
  };

  const now = Date.now();
  const openTeams = useMemo(
    () => [...sides.mine, ...sides.others.map((other) => other.team)].filter((team) => team.status !== "dissolved"),
    [sides],
  );
  // Public thread only; the practitioners' aside is never fetched for a patient.
  const summaries = useCollabTeamSummaries(openTeams, { includeAside: false });

  const ownerOf = (team: TeamWithMembers) =>
    sides.others.find((other) => other.team.teamId === team.teamId)?.ownerName;

  // A heading says what the group means; a row says why that team is in it.
  const renderTeamRow = (team: TeamWithMembers, { reason }: { reason?: string } = {}) => {
    const pendingCount = team.members.filter((member) => member.state === "pending-patient-approval").length;
    const owner = ownerOf(team);
    // A quiet team keeps its card, sunken: it still opens, and dormancy restricts nothing.
    const quiet = teamDisplayStatus(team, now) !== "active";
    const summary = summaries.get(team.teamId);
    const hasMessage = !!summary && summary.timestamp > 0;

    return (
      <Link
        to={`${LIST_PATH}/${team.teamId}${invitableTeams.includes(team) ? inviteQuery : ""}`}
        className={clsx("ahr-list-card ahr-link-panel collab-team-row", quiet && "collab-team-row--quiet ahr-list-card--ended")}
        key={team.teamId}
      >
        <span className="collab-team-text">
          {/* On Other teams, whose team it is tells one row from another. */}
          {owner && <span className="collab-row-owner">{owner}</span>}
          <span className="collab-team-head">
            <span className="collab-team-name">{team.name}</span>
            <span className="collab-team-count">
              · {team.members.length} member{team.members.length === 1 ? "" : "s"}
            </span>
            {!!summary?.unread && <span className="ahr-count-badge">{summary.unread}</span>}
            {pendingCount > 0 && (
              <span className="collab-team-pending" title={STATE_LABELS["pending-patient-approval"]}>
                {pendingCount} pending
              </span>
            )}
          </span>
          {/* A thread that could not be read is not a team where nobody wrote. */}
          {summary?.unreadable && (
            <span className="collab-team-line text-destructive">Messages could not be loaded</span>
          )}
          {reason ? (
            <span className="collab-team-line">{reason}</span>
          ) : hasMessage ? (
            <span className="collab-team-line">
              {summary.preview} — {formatRelativeTime(summary.timestamp, now)}
            </span>
          ) : null}
        </span>
        <ChevronRight className="collab-team-go" aria-hidden="true" />
      </Link>
    );
  };

  // The same three groups on both tabs: the states belong to the team, not to who is reading.
  const renderGroups = (list: TeamWithMembers[], whose: Side) => {
    const open = list.filter((team) => team.status !== "dissolved");
    const active = open.filter((team) => teamQuietReason(team, now) === "live");
    const dormant = open.filter((team) => teamQuietReason(team, now) !== "live");
    const closed = list.filter((team) => team.status === "dissolved");

    const dormantReason = (team: TeamWithMembers) => {
      if (teamQuietReason(team, now) !== "withdrawn") return `Nothing for ${DORMANT_AFTER_DAYS} days`;
      const owner = ownerOf(team);
      return owner ? `${owner} stepped back from this team` : "You stepped back from this team";
    };

    return (
      <div className="collab-groups" data-side={whose}>
        {active.length > 0 && (
          <section className="collab-group" aria-label="Active">
            <h3 className="collab-group-label ak-caption">Active</h3>
            {active.map((team) => renderTeamRow(team))}
          </section>
        )}
        {dormant.length > 0 && (
          <section className="collab-group" aria-label="Dormant">
            <h3 className="collab-group-label ak-caption">
              Dormant<span className="collab-group-note">rejoinable</span>
            </h3>
            {dormant.map((team) => renderTeamRow(team, { reason: dormantReason(team) }))}
          </section>
        )}
        {closed.length > 0 && (
          <section className="collab-group" aria-label="Closed">
            <h3 className="collab-group-label ak-caption">Closed</h3>
            {closed.map((team) => renderTeamRow(team))}
          </section>
        )}
      </div>
    );
  };

  const newTeamButton = mayCreate && (
    <button type="button" className="btn btn-blue" onClick={openCreateDialog}>
      + New collaboration team
    </button>
  );

  const shareButton = mayShare && (
    <button type="button" className="btn btn-blue" onClick={() => setShowShare(true)} data-testid="share-access-open">
      Share access by code
    </button>
  );

  const renderMine = () => {
    if (sides.mine.length === 0) {
      return (
        <EmptyState
          icon={UsersRound}
          title="No collaboration teams yet"
          description="A collaboration team is how you bring a practitioner from another practice into your care — they see only what you share with them."
          action={newTeamButton}
          data-testid="care-teams-empty"
        />
      );
    }
    const allClosed = sides.mine.every((team) => team.status === "dissolved");
    return (
      <>
        {allClosed && (
          <EmptyState
            icon={UsersRound}
            title="No open collaboration teams"
            description="Every team you have is closed. Start a new one to bring another practice into your care."
            action={newTeamButton}
            data-testid="care-teams-tab-empty"
          />
        )}
        {renderGroups(sides.mine, "mine")}
      </>
    );
  };

  const renderOthers = () =>
    sides.others.length === 0 ? (
      <EmptyState
        icon={UsersRound}
        title="You are not on anyone else's team"
        description="When someone in your family adds you to a team of theirs, it appears here. You can leave it whenever you like."
        data-testid="other-teams-empty"
      />
    ) : (
      renderGroups(sides.others.map((other) => other.team), "others")
    );

  const openTeam = openOwn ?? openOther?.team;
  // A PHONE OPENS THE TEAM AS ITS OWN PAGE (deck: patient-portal #s-collaboration-teams, the 390 team board,
  // crumbed "Dashboard › Collaboration teams › <team>"). From a tablet up it opens over the list, as drawn.
  const isPhone = useIsPhoneWidth();
  const pageTeam = isPhone ? openTeam : undefined;
  const overlayTeam = isPhone ? undefined : openTeam;

  const pageTeamId = pageTeam?.teamId;
  const pageTeamName = pageTeam?.name;
  useEffect(() => {
    publishOpenTeam(pageTeamId && pageTeamName !== undefined ? { teamId: pageTeamId, name: pageTeamName } : undefined);
  }, [pageTeamId, pageTeamName]);
  useEffect(() => () => publishOpenTeam(undefined), []);

  // Whose it is and who is in it; a state is words in the line, never a pill.
  const teamLine = (shown: TeamWithMembers) => openOther
    ? `${openOther.ownerName}'s · you are a member · ${shown.members.length} member${shown.members.length === 1 ? "" : "s"}`
    : ["Yours", teamDisplayStatus(shown, now) === "active" ? "" : teamStatusLabel(shown, now), describeRoster(shown.members)].filter(Boolean).join(" · ");

  const teamDetail = openOwn ? (
    <CareTeamDetail key={openOwn.teamId} team={openOwn} unread={summaries.get(openOwn.teamId)?.unread} onChanged={refresh} decisionsOpen={rosterCurrent && !loading} />
  ) : openOther ? (
    <MemberTeamDetail
      key={openOther.team.teamId}
      other={openOther}
      unread={summaries.get(openOther.team.teamId)?.unread}
      memberAction={memberAction}
      myName={formatFhirHumanName(patientState?.name, { emptyText: "" }) || "You"}
      onLeft={async () => {
        await refresh();
        navigate(LIST_PATH);
      }}
    />
  ) : null;

  if (pageTeam) {
    return (
      <div className="collab-page collab-team-page">
        <div className="collab-head">
          <h1 className="ak-page-title ahr-view-title collab-title">{pageTeam.name}</h1>
          <p className="ak-page-title__sub">{teamLine(pageTeam)}</p>
        </div>
        <div className="ak-page-body team-view">{teamDetail}</div>
      </div>
    );
  }

  return (
    /* A centred column, as the deck draws it from a tablet up, so a name and its chevron stay close. */
    <div className="collab-page">
      <div className="collab-head">
        <h1 className="ak-page-title ahr-view-title collab-title">Collaboration teams</h1>
        <p className="ak-page-title__sub">
          {side === "mine"
            ? "Groups you collaborate in, across every practice in your care."
            : "Teams your family have started, that you are a member of."}
        </p>
        {invite && !teamId && side === "mine" && (
          <p className="ak-page-title__sub" data-testid="collab-invite-hint">
            {invitableTeams.length === 0
              ? "Start a team to invite the practitioner you were referred to."
              : "Choose the team to invite the practitioner you were referred to."}
          </p>
        )}
      </div>
      <div className="ak-page-body">
      {/* No create on Other teams: a team you start is yours, so it would arrive on the other tab. */}
      {!loading && !awaitingTenant && !unavailable && (mayCreate || mayShare) && side === "mine" && (
        <div className="collab-create">
          {shareButton}
          {sides.mine.length > 0 && newTeamButton}
        </div>
      )}

      {unavailable ? (
        <EmptyState
          icon={UsersRound}
          title="Not available in the sandbox"
          description={SANDBOX_TEAMS_UNAVAILABLE}
          data-testid="collab-sandbox-unavailable"
        />
      ) : loading || awaitingTenant ? (
        <div className="flex justify-center items-center py-20">
          <AppSpinner />
        </div>
      ) : error ? (
        <p className="text-sm text-destructive">{error}</p>
      ) : (
        <>
          <Tabs value={side} onValueChange={(value) => setSide(value as Side)} className="collab-tabs-wrap">
            <TabsList variant="line" className="collab-tabs">
              <TabsTrigger value="mine">My teams</TabsTrigger>
              <TabsTrigger value="others">Other teams</TabsTrigger>
            </TabsList>
          </Tabs>
          <div className="collab-body">{side === "mine" ? renderMine() : renderOthers()}</div>
        </>
      )}
      </div>

      <Dialog
        open={Boolean(overlayTeam)}
        onOpenChange={(open) => {
          if (!open) navigate(LIST_PATH);
        }}
      >
        <DialogContent className="team-overlay team-view">
          {overlayTeam && (
            <>
              <DialogHeader className="text-start">
                <DialogTitle className="team-overlay-title">{overlayTeam.name}</DialogTitle>
                <DialogDescription className="team-overlay-sub">{teamLine(overlayTeam)}</DialogDescription>
              </DialogHeader>
              {teamDetail}
            </>
          )}
        </DialogContent>
      </Dialog>

      {showShare && <ConnectedShareAccessDialog
        open
        onOpenChange={setShowShare}
        onOpenTeam={async (sharedTeamId) => {
          setShowShare(false);
          await refresh();
          navigate(`${LIST_PATH}/${sharedTeamId}`);
        }}
      />}

      <Dialog open={showCreateDialog && mayCreate && !unavailable} onOpenChange={setShowCreateDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>New collaboration team</DialogTitle>
            <DialogDescription>
              Give your collaboration team a name. Once it's created, you can invite family members, caregivers
              and practitioners.
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={handleCreate} className="space-y-4">
            <Input
              autoFocus
              placeholder="Team name"
              value={teamName}
              onChange={(event) => setTeamName(event.target.value)}
              disabled={creating}
            />
            {createError && <p className="text-sm text-destructive">{createError}</p>}
            <DialogFooter>
              <Button
                type="button"
                variant="outline"
                onClick={() => setShowCreateDialog(false)}
                disabled={creating}
              >
                Cancel
              </Button>
              <Button type="submit" disabled={creating || teamName.trim().length === 0}>
                {creating ? "Creating..." : "Create"}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default CareTeamsPage;