import React, { useState } from "react";
import { Practitioner, PractitionerRole } from "fhir/r4";
import { FhirCodeableConceptDisplay } from "../../utils/fhirCodeableConcept";
import { FHIRAddressDisplay } from "../../utils/fhirAddress";
import { FHIRContactPointDisplay } from "../../utils/fhirContactPoint";
import { FhirIdentifierDisplay } from "../../utils/fhirIdentifier";
import { FhirReferenceDisplay } from "../../utils/fhirReference";
import { FhirPeriodDisplay } from "../../utils/fhirPeriod";
import { FhirOperationalHoursDisplay } from "../../utils/fhirOperationalHours";
import { formatDate } from "../../utils/dateUtils";
import { ProfilePhoto } from "../index.ts";
import { useAuthServiceContext } from "../../services";
import { FhirPractitionerRoleDisplay } from "../../components";
import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
import {
  CalendarCheck2,
  Clock4,
  Hospital,
  MessageSquareText,
  Stethoscope,
  UserRoundPlus,
} from "lucide-react";
import {
  CardTitle,
  CardDescription,
  Card,
  CardContent,
  CardHeader,
} from "../ui/card.tsx";
import { Button } from "../ui/button.tsx";
import { Link } from "react-router-dom";

import { isPatientFacingPractitionerRole } from "../../utils/staffRoleCatalog.ts";
import { formatFhirHumanName } from "../../utils/fhirHumanName.tsx";
import {
  FieldHistoryProvider,
  FieldHistoryScope,
} from "../FieldHistory/FieldHistoryProvider";
import { ShowFieldHistoryToggle } from "../FieldHistory/ShowFieldHistoryToggle";
import { RecordEditedMarker } from "../FieldHistory/RecordEditedMarker";
import { Field } from "../FieldHistory/Field";
import { FieldGroup, Section } from "../FieldHistory/FieldLayout";

interface FhirPractitionerDisplayProps {
  practitioner: Practitioner;
  roles?: PractitionerRole[];
  isOpen?: boolean;
  onClose?: () => void;
  title?: string;
  asModal?: boolean;
  showRoles?: boolean;
  // Chat and Book Appointment open the READER's own patient portal; a staff reader is not booking a colleague.
  showPatientActions?: boolean;
}

const renderYesNo = (value: boolean | undefined): string | undefined => {
  if (value === undefined) return undefined;
  return value ? "Yes" : "No";
};

export const FhirPractitionerDisplay: React.FC<
  FhirPractitionerDisplayProps
> = ({
  practitioner,
  roles,
  isOpen = true,
  onClose,
  title = "Practitioner Details",
  asModal = true,
  showRoles = false,
  showPatientActions = true,
}) => {
  const { getCognitoGroup } = useAuthServiceContext();
  const [segment, setSegment] = useState<"practitioner" | "roles">(
    "practitioner",
  );

  const getPrimaryRole = () => {
    if (!roles || roles.length === 0) return null;
    return roles[0];
  };

  const renderLanguagesValue = () => {
    if (
      !practitioner?.communication ||
      practitioner.communication.length === 0
    ) {
      return undefined;
    }
    return (
      <FhirCodeableConceptDisplay
        code={practitioner.communication}
        multiple={true}
      />
    );
  };

  const renderQualifications = (): React.ReactNode => {
    if (
      !practitioner.qualification ||
      practitioner.qualification.length === 0
    ) {
      return (
        <p className="text-sm italic text-muted-foreground">
          No qualifications recorded
        </p>
      );
    }

    return (
      <div className="flex flex-col gap-4">
        {practitioner.qualification.map((qualification, index) => (
          <Card key={qualification.identifier?.[0]?.value ?? index}>
            <CardHeader>
              <CardTitle>Qualification {index + 1}</CardTitle>
            </CardHeader>
            <CardContent>
              <FieldGroup>
                <Field
                  label="Code"
                  value={
                    <FhirCodeableConceptDisplay code={qualification.code} />
                  }
                />
                <Field
                  label="Period"
                  value={<FhirPeriodDisplay period={qualification.period} />}
                />
                <Field
                  label="Issuer"
                  value={
                    <FhirReferenceDisplay references={qualification.issuer} />
                  }
                />
                <Field
                  label="Identifiers"
                  value={
                    <FhirIdentifierDisplay
                      identifier={qualification.identifier}
                    />
                  }
                />
              </FieldGroup>
            </CardContent>
          </Card>
        ))}
      </div>
    );
  };

  const renderContent = () => {
    const primaryRole = getPrimaryRole();
    const fullName = formatFhirHumanName(practitioner?.name, {
      emptyText: "Unknown Practitioner",
    });
    const roleName = primaryRole?.code?.[0]?.text || "Practitioner";
    const orgName = primaryRole?.organization?.display || "Organization";
    return (
      <FieldHistoryProvider>
        <FieldHistoryScope resourceType="Practitioner" id={practitioner.id}>
          <div className="flex items-center justify-between gap-4">
            <div className="flex items-center gap-2">
              <h2 className="text-lg font-semibold m-0">
                {title}
              </h2>
              <RecordEditedMarker resource={practitioner} />
            </div>
            <ShowFieldHistoryToggle />
          </div>

          <div className="p-4">
            <div className="items-center justify-center text-center w-full">
              <ProfilePhoto
                photo={practitioner?.photo?.[0]}
                className="w-30 h-30 mb-3 rounded m-auto"
              />
              <p className="mb-2">{fullName}</p>
              <span className="flex gap-2 mb-3 items-center max-w-[300px] mx-auto text-sm text-center justify-center text-[var(--primary)] bg-[var(--blue-soft)] p-2 rounded">
                <Stethoscope size={15} /> {roleName}
              </span>
              <div className="flex gap-4 font-normal text-sm justify-center text-start">
                <span className="flex gap-2 items-center">
                  <Hospital size={18} />
                  {orgName}
                </span>
                <span className="flex gap-2 items-center">
                  <UserRoundPlus size={18} />
                  {practitioner?.gender} Practitioner
                </span>
              </div>
            </div>
          </div>

          <div className="overflow-y-auto thin-scrollbar max-h-[calc(100vh-388px)] md:max-h-[calc(100vh-180px)] lg:max-h-[calc(100vh-100px)]">
            <div className="space-y-4">
              <FieldGroup>
                <Field
                  label="Active"
                  value={renderYesNo(practitioner.active)}
                  path="active"
                />
                <Field
                  label="Gender"
                  value={practitioner.gender}
                  path="gender"
                />
                <Field
                  label="Date of Birth"
                  value={
                    practitioner.birthDate
                      ? formatDate(practitioner.birthDate)
                      : undefined
                  }
                  path="birthDate"
                />
                <Field
                  label="Contact"
                  value={
                    <FHIRContactPointDisplay contact={practitioner?.telecom} />
                  }
                />
                <Field
                  label="Address"
                  value={
                    <FHIRAddressDisplay address={practitioner?.address} />
                  }
                />
                <Field
                  label="Identifiers"
                  value={
                    <FhirIdentifierDisplay
                      identifier={practitioner?.identifier}
                    />
                  }
                />
                <Field label="Languages" value={renderLanguagesValue()} />
              </FieldGroup>

              <Section title="Qualifications">
                {renderQualifications()}
              </Section>

              <Card className="p-3">
                <CardTitle className="flex gap-2 items-center">
                  <Clock4 size={20} /> Availability
                </CardTitle>
                <CardDescription>
                  <FhirOperationalHoursDisplay
                    hours={primaryRole?.availableTime}
                  />
                </CardDescription>
              </Card>
            </div>
          </div>

          {showPatientActions && <div className="flex justify-between gap-2 w-full mt-4">
            <Link to={"/dashboard/messages"} className="w-full">
              <Button className="flex flex-1 gap-2 bg-accent border-gray-200 items-center rounded h-11 cursor-pointer hover:bg-muted w-full">
                <MessageSquareText /> Chat
              </Button>
            </Link>
            <Link to={"/dashboard/my-appointments"} className="w-full">
              <Button className="flex flex-1 gap-2 items-center rounded h-11 cursor-pointer bg-primary w-full">
                <CalendarCheck2 /> Book Appointment
              </Button>
            </Link>
          </div>}
        </FieldHistoryScope>
      </FieldHistoryProvider>
    );
  };

  const renderContentWithRoles = () => {
    return (
      <>
        <div className="inline-flex rounded-md border border-gray-200 p-1 gap-1">
          <Button
            type="button"
            variant={segment === "practitioner" ? "default" : "ghost"}
            size="sm"
            onClick={() => setSegment("practitioner")}
          >
            Practitioner
          </Button>
          <Button
            type="button"
            variant={segment === "roles" ? "default" : "ghost"}
            size="sm"
            onClick={() => setSegment("roles")}
          >
            Roles
          </Button>
        </div>

        <div className="mt-4">
          {segment === "practitioner" && renderContent()}

          {segment === "roles" && (
            <div className="space-y-2">
              {roles
                ?.filter((practitionerRole: PractitionerRole) =>
                  isPatientFacingPractitionerRole(
                    practitionerRole,
                    getCognitoGroup(practitionerRole),
                  ),
                )
                .map((practitionerRole: PractitionerRole, index: number) => (
                  <div
                    key={practitionerRole.id ?? index}
                    className="pb-2"
                  >
                    <Card>
                      <CardHeader>
                        <CardTitle>
                          <FhirCodeableConceptDisplay
                            code={practitionerRole.code}
                            multiple={true}
                          />
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <FhirPractitionerRoleDisplay
                          practitionerRole={practitionerRole}
                          asModal={false}
                        />
                      </CardContent>
                    </Card>
                  </div>
                ))}
            </div>
          )}
        </div>
      </>
    );
  };

  if (!asModal) {
    return (
      <div className="bg-gradient-to-b from-[var(--blue-soft)] via-[var(--surface)] to-[var(--surface)]">
        {showRoles ? renderContentWithRoles() : renderContent()}
      </div>
    );
  }

  if (!isOpen) return null;

  return (
    <Dialog
      open={isOpen}
      onOpenChange={(next) => {
        if (!next) onClose?.();
      }}
    >
      <DialogContent className="max-h-[90vh] w-full max-w-3xl overflow-y-auto">
        <DialogTitle className="sr-only">{title}</DialogTitle>
        {showRoles ? renderContentWithRoles() : renderContent()}
      </DialogContent>
    </Dialog>
  );
};

export default FhirPractitionerDisplay;