import { scannedPhotoSrc } from "../../utils/fhirPhoto";
import React, { useState } from "react";
import { RelatedPerson } from "fhir/r4";
import { SquarePen, UserRound } from "lucide-react";
import Contacts from "./Contacts.tsx";
import { useRelatedPersonServiceContext } from "../../services/RelatedPersonService.tsx";
import { useRelatedPersonIdentity } from "../../hooks/useRelatedPersonIdentity.tsx";
import { toast } from "sonner";
import { Button } from "../ui/button.tsx";
import { formatFhirHumanName } from "../../utils/fhirHumanName.tsx";

interface FhirRelatedPersonDisplayProps {
  relatedPerson?: RelatedPerson;
  selectedRelatedPerson?: RelatedPerson;
  setShowDisplaySheet?: (value: boolean) => void;
  handleEditClick?: (
      index: React.MouseEvent<HTMLButtonElement, MouseEvent>,
      value: RelatedPerson,
  ) => void;
  isOpen?: boolean;
  onClose?: () => void;
}

export const FhirRelatedPersonDisplay: React.FC<
    FhirRelatedPersonDisplayProps
> = ({
       relatedPerson,
       setShowDisplaySheet,
       selectedRelatedPerson,
       handleEditClick,
       isOpen = true,
     }) => {
  const { updateRelatedPerson } = useRelatedPersonServiceContext();

  const [submitting, setSubmitting] = useState<boolean>(false);
  const [currentRelatedPerson, setCurrentRelatedPerson] =
      useState<RelatedPerson | undefined>(relatedPerson);

  // RelatedPerson is now a thin link (Slice A, Phase 1) - no name/gender/birthDate/address on the
  // resource itself. Name + contact are resolved from the scoped server-side identity projection;
  // relationship stays sourced from the RP resource (still on the thin link).
  const { name: projectedName, contact: projectedContact } = useRelatedPersonIdentity(
    currentRelatedPerson?.id,
  );

  const handleUpdateRelatedPerson = async (
    updatedRelatedPerson: RelatedPerson,
  ) => {
    setSubmitting(true);

    try {
      const result = await updateRelatedPerson(updatedRelatedPerson);
      setCurrentRelatedPerson(result);
      return result;
    } catch (error: unknown) {
      console.error("Failed to update related person:", error);

      // Type-safe error message extraction
      let errorMessage = "An unknown error occurred";
      if (error instanceof Error) {
        errorMessage = error.message;
      } else if (typeof error === "string") {
        errorMessage = error;
      } else if (error && typeof error === "object" && "message" in error) {
        errorMessage = String(error.message);
      }

      toast.error(`Failed to update contact: ${errorMessage}`, {
        position: "top-right",
      });
    } finally {
      setSubmitting(false);
    }
  };

  const renderContent = () => {
    const photo = currentRelatedPerson?.photo?.[0];

    const photoSrc =
      scannedPhotoSrc(photo) ?? "";

    const relationshipLabel = currentRelatedPerson?.relationship?.[0]?.text
      ? currentRelatedPerson.relationship[0].text.charAt(0).toUpperCase() +
        currentRelatedPerson.relationship[0].text.slice(1)
      : "";

    // Name comes from the scoped identity projection now (the RelatedPerson resource itself is a
    // thin link with no name on it). Graceful fallback chain when the projection is empty/failed
    // (e.g. a legacy RelatedPerson with no home-patient link): relationship label, then a plain
    // "Name unavailable" - never blank or NaN.
    const displayName =
      formatFhirHumanName(projectedName, { emptyText: "" }) ||
      relationshipLabel ||
      "Name unavailable";

    return (
      <>
        <div className="gap-2 space-y-3 items-center w-full">
          <div className="flex gap-2 items-center">
            <div>
              {photoSrc ? (
                <img
                  src={photoSrc}
                  className="w-20 h-20 rounded object-cover"
                  alt="Profile"
                />
              ) : (
                <UserRound
                  strokeWidth={1}
                  className="w-20 h-20 bg-accent rounded p-4"
                />
              )}
            </div>
            <div className="flex w-full justify-between">
              <div className="space-y-1">
                <p className="flex gap-2 items-center text-sm mb-0 font-bold">
                  {displayName}
                  {currentRelatedPerson?.active === true && (
                    <span className="bg-green-700 text-white rounded text-xs px-2 py-1">
                      Active
                    </span>
                  )}
                </p>
                <p className="text-secondary text-sm">
                  {relationshipLabel}
                </p>
                <div className="flex gap-2 text-xs">
                  {currentRelatedPerson?.communication?.map((comm, index) => (
                    <span
                      key={comm.id || index}
                      className="bg-[var(--cat-task-soft)] text-[var(--cat-task)] rounded px-2 py-1"
                    >
                      {comm.language?.text ||
                        comm.language?.coding?.[0]?.display ||
                        comm.language?.coding?.[0]?.code ||
                        "Unknown"}
                    </span>
                  ))}
                </div>
              </div>
              <div className="items-center">
                {setShowDisplaySheet && handleEditClick && selectedRelatedPerson && (
                    <Button
                        className="bg-surface border px-4 py-1 bg-muted rounded"
                        onClick={(e) => {
                          setShowDisplaySheet(false);
                          handleEditClick(e, selectedRelatedPerson);
                        }}
                    >
                      <SquarePen className="cursor-pointer w-full" size={25} /> Edit
                    </Button>
                )}
              </div>
            </div>
          </div>

          <Contacts
            data={projectedContact || []}
            setSubmitting={setSubmitting}
            updateRelatedPerson={handleUpdateRelatedPerson}
            relatedPerson={currentRelatedPerson}
            submitting={submitting}
            // The contact shown here is a projection of the helper's own home-Patient
            // telecom (thin-link RelatedPerson) - editing it from this view can't persist
            // (there's no write path back to the projection), so it's read-only.
            readOnly
          />
        </div>
      </>
    );
  };

  if (!isOpen || !currentRelatedPerson) return null;

  return <div>{renderContent()}</div>;
};

export default FhirRelatedPersonDisplay;