import { useMemo, useState } from "react";
import { Modal } from '../../../components/ui/wp-modal-shim';
import { HealthcareService, Location } from "fhir/r4";
import { ChevronRight, MapPin, Stethoscope, Users } from "lucide-react";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "../../../components/ui/tabs";
import {
  getLocationStaffByCategory,
  getServicesAtLocation,
  type LocationStaffMember,
  type PractitionerWithRoles,
} from "../../../utils/locationAssignments";
import { formatFhirHumanName } from "../../../utils/fhirHumanName.tsx";
import { formatFhirCodeableConcept } from "../../../utils/fhirCodeableConcept.tsx";

interface LocationDetailsModalProps {
  location: Location;
  practitionersList: PractitionerWithRoles[];
  healthcareServicesList: HealthcareService[];
  onClose: () => void;
  onOpenStaff: (member: LocationStaffMember) => void;
}

const getServiceSubtitle = (service: HealthcareService): string => {
  const parts = [
    ...(service.type ?? []).map((type) => formatFhirCodeableConcept(type)),
    ...(service.specialty ?? []).map((specialty) =>
      formatFhirCodeableConcept(specialty),
    ),
  ].filter(Boolean);
  return [...new Set(parts)].join(" · ");
};

const LocationDetailsModal = ({
  location,
  practitionersList,
  healthcareServicesList,
  onClose,
  onOpenStaff,
}: LocationDetailsModalProps) => {
  const [expandedRoles, setExpandedRoles] = useState<Record<string, boolean>>({});

  const { categories, staffCount } = useMemo(
    () => getLocationStaffByCategory(practitionersList, location.id),
    [practitionersList, location.id],
  );
  const services = useMemo(
    () => getServicesAtLocation(healthcareServicesList, location.id),
    [healthcareServicesList, location.id],
  );

  const hasOrgWideStaff = useMemo(
    () =>
      categories.some((category) =>
        category.roles.some((role) =>
          role.staff.some((member) => member.orgWide),
        ),
      ),
    [categories],
  );

  const hasOrgWideServices = useMemo(
    () => services.some((assignment) => assignment.orgWide),
    [services],
  );

  const toggleRole = (code: string) =>
    setExpandedRoles((current) => ({ ...current, [code]: !current[code] }));

  return (
    <Modal
      title={location.name || "Location"}
      onRequestClose={onClose}
      className="akashic-location-details-modal"
    >
      <Tabs defaultValue="services" className="w-full">
        <TabsList>
          <TabsTrigger value="services">
            <Stethoscope className="mr-1 h-4 w-4" />
            Services ({services.length})
          </TabsTrigger>
          <TabsTrigger value="staff">
            <Users className="mr-1 h-4 w-4" />
            Staff ({staffCount})
          </TabsTrigger>
        </TabsList>

        <TabsContent value="services" className="pt-4">
          {services.length === 0 ? (
            <p className="py-6 text-center text-sm text-muted-foreground">
              No services assigned yet.
            </p>
          ) : (
            <div className="space-y-2">
              {hasOrgWideServices && (
                <p className="text-xs text-muted-foreground">
                  Services marked{" "}
                  <span className="italic">all locations</span> are offered at
                  every location, not only this one.
                </p>
              )}
              {services.map(({ service, orgWide }) => {
                const subtitle = getServiceSubtitle(service);
                return (
                  <div
                    key={service.id}
                    className="rounded border border-gray-200 px-3 py-2"
                  >
                    <p className="flex items-center justify-between gap-2 text-sm font-medium">
                      <span>{service.name || "Unnamed service"}</span>
                      {orgWide && (
                        <span className="shrink-0 text-xs font-normal italic text-muted-foreground">
                          all locations
                        </span>
                      )}
                    </p>
                    {subtitle && (
                      <p className="text-xs text-muted-foreground">{subtitle}</p>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </TabsContent>

        <TabsContent value="staff" className="pt-4">
          {categories.length === 0 ? (
            <p className="py-6 text-center text-sm text-muted-foreground">
              No staff assigned yet.
            </p>
          ) : (
            <div className="space-y-4">
              {hasOrgWideStaff && (
                <p className="text-xs text-muted-foreground">
                  Staff marked{" "}
                  <span className="italic">all locations</span> work across every
                  location, not only this one.
                </p>
              )}
              {categories.map((category) => (
                <div key={category.label}>
                  <div className="mb-1 flex items-center justify-between">
                    <span className="text-xs font-semibold uppercase tracking-wide text-gray-700">
                      {category.label}
                    </span>
                    <span className="text-xs text-muted-foreground">
                      {category.staffCount}
                    </span>
                  </div>
                  <div className="space-y-1">
                    {category.roles.map((role) => {
                      const expanded = Boolean(expandedRoles[role.code]);
                      return (
                        <div
                          key={role.code}
                          className="rounded border border-gray-200"
                        >
                          <button
                            type="button"
                            onClick={() => toggleRole(role.code)}
                            aria-expanded={expanded}
                            className="flex w-full items-center justify-between gap-2 px-3 py-2 text-left hover:bg-muted"
                          >
                            <span className="flex items-center gap-2 text-sm">
                              <ChevronRight
                                className={`h-4 w-4 shrink-0 text-muted-foreground transition-transform ${
                                  expanded ? "rotate-90" : ""
                                }`}
                              />
                              {role.display}
                            </span>
                            <span className="text-xs text-muted-foreground">
                              {role.staff.length}
                            </span>
                          </button>
                          {expanded && (
                            <div className="border-t">
                              {role.staff.map((member) => (
                                <button
                                  type="button"
                                  key={member.practitioner.id}
                                  onClick={() => onOpenStaff(member)}
                                  className="flex w-full items-center justify-between gap-2 px-3 py-2 pl-9 text-left text-sm hover:bg-muted"
                                >
                                  <span className="truncate">
                                    {formatFhirHumanName(member.practitioner.name)}
                                  </span>
                                  {member.orgWide && (
                                    <span className="flex shrink-0 items-center gap-1 text-xs italic text-muted-foreground">
                                      <MapPin className="h-3 w-3" />
                                      all locations
                                    </span>
                                  )}
                                </button>
                              ))}
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>
          )}
        </TabsContent>
      </Tabs>
    </Modal>
  );
};

export default LocationDetailsModal;