import { useState } from "react";
import { Link } from "react-router-dom";
import { MessageSquare } from "lucide-react";
import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "../../../components/ui/alert-dialog";
import { STATE_LABELS } from "../../../services";
import type { MemberActionType, TeamMembership } from "../../../services";
import type { OtherTeam } from "../../../utils/collaborationTeamSides";
import { relayServerFailure } from "../../../utils/fetchFailureMessage";
import { MemberIdentity } from "./MemberIdentity";
import { MemberAffiliation } from "./MemberAffiliation";
import { PersonBadge } from "../../../components/ui/person-badge.tsx";
import { TeamAppointmentsSection } from "../../../components/CollaborationTeam/TeamAppointmentsSection";

interface MemberTeamDetailProps {
  other: OtherTeam;
  unread?: number;
  memberAction: (teamId: string, memberRef: string, action: MemberActionType) => Promise<TeamMembership>;
  onLeft: () => Promise<void> | void;
  /** The reader's own name, for the initials on their row. */
  myName?: string;
}

// Somebody else's team: the same people and conversation, without invite, approve or deny, and always a way out.
export const MemberTeamDetail = ({ other, unread = 0, memberAction, onLeft, myName = "You" }: MemberTeamDetailProps) => {
  const { team, mine, ownerName } = other;
  const [confirming, setConfirming] = useState(false);
  const [leaving, setLeaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const waiting = team.members.filter((member) => member.state === "pending-patient-approval");
  const members = team.members.filter(
    (member) => member.state !== "pending-patient-approval" && member.memberRef !== mine.memberRef,
  );

  const leave = async () => {
    setLeaving(true);
    setError(null);
    try {
      await memberAction(team.teamId, mine.memberRef, "leave");
      setConfirming(false);
      await onLeft();
    } catch (err) {
      setError(relayServerFailure(err, "You could not leave the team. Please try again."));
    } finally {
      setLeaving(false);
    }
  };

  return (
    <div className="team-detail">
      <Link to={`/dashboard/messages?teamId=${team.teamId}`} className="ahr-link-panel team-conversation-link">
        <MessageSquare size={16} aria-hidden="true" /> Go to the conversation
        {unread > 0 && <span className="ahr-count-badge team-conversation-count">{unread}</span>}
      </Link>

      {/* The visits this member has been asked to join with this team, from their own invitations. */}
      <TeamAppointmentsSection teamId={team.teamId} source={{ kind: "invitee" }} />

      {/* Shown without buttons: it is happening, and it is not the member's to answer. */}
      {waiting.length > 0 && (
        <section className="team-section" aria-label={`Waiting for ${ownerName}`}>
          <p className="team-section-label ak-caption">Waiting for {ownerName}</p>
          {waiting.map((member) => (
            <div key={member.memberRef} className="team-member-row">
              <div className="team-member-who">
                <MemberIdentity memberRef={member.memberRef} memberClass={member.memberClass} displayName={member.displayName} />
                <MemberAffiliation
                  memberRef={member.memberRef}
                  memberClass={member.memberClass}
                  organizationDisplays={member.organizationDisplays}
                  specialtyDisplays={member.specialtyDisplays}
                />
              </div>
              <span className="team-member-state">{ownerName} decides</span>
            </div>
          ))}
        </section>
      )}

      <section className="team-section" aria-label="Members">
        <p className="team-section-label ak-caption">Members</p>
        <div className="team-member-row">
          <div className="team-member-who">
            <span className="team-member-identity">
              <PersonBadge name={ownerName} className="team-member-badge" />
              {ownerName}
            </span>
            <span className="team-member-sub">This is their team</span>
          </div>
          <span className="team-member-state">Owner</span>
        </div>
        {members.map((member) => (
          <div key={member.memberRef} className="team-member-row">
            <div className="team-member-who">
              <MemberIdentity memberRef={member.memberRef} memberClass={member.memberClass} displayName={member.displayName} />
              <MemberAffiliation
                memberRef={member.memberRef}
                memberClass={member.memberClass}
                organizationDisplays={member.organizationDisplays}
                specialtyDisplays={member.specialtyDisplays}
              />
            </div>
            <span className="team-member-state">{STATE_LABELS[member.state]}</span>
          </div>
        ))}
        <div className="team-member-row">
          <div className="team-member-who">
            <span className="team-member-identity">
              <PersonBadge name={myName} className="team-member-badge" />
              You
            </span>
          </div>
          <span className="team-member-state">{STATE_LABELS[mine.state]}</span>
        </div>
      </section>

      <section className="team-section" aria-label="Your place in it">
        <p className="team-section-label ak-caption">Your place in it</p>
        <p className="team-section-text">
          {ownerName} decides who else is in this team. You can leave it whenever you like.
        </p>
        <div className="team-section-actions">
          <button
            type="button"
            className="btn btn-red-ghost-sm"
            disabled={leaving}
            onClick={() => setConfirming(true)}
          >
            Leave this team
          </button>
        </div>
      </section>

      <AlertDialog
        open={confirming}
        onOpenChange={(open) => {
          if (!leaving) setConfirming(open);
        }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Leave &ldquo;{team.name}&rdquo;?</AlertDialogTitle>
            <AlertDialogDescription>
              You stop seeing the conversation. {ownerName} can invite you again.
            </AlertDialogDescription>
          </AlertDialogHeader>
          {error && <p role="alert" className="team-section-error">{error}</p>}
          <AlertDialogFooter>
            <AlertDialogCancel className="btn btn-amber" disabled={leaving}>Stay in the team</AlertDialogCancel>
            <button
              type="button"
              className={`btn btn-red ${leaving ? "btn-busy" : ""}`}
              disabled={leaving}
              onClick={() => void leave()}
            >
              {leaving ? "Leaving…" : "Leave this team"}
            </button>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

export default MemberTeamDetail;