import React, { useRef, useState } from "react";
import { Spinner } from "../ui/spinner";
import { Elevation } from '../ui/elevation';
import { Modal } from '../ui/wp-modal-shim';
import { Organization, Attachment, Extension, Location } from "fhir/r4";
import { Card } from "../ui/card";
import { usePhotoUrl } from "../../hooks/usePhotoUrl";
import { usePhotoUploadService } from "../../services/PhotoUploadService";
import { Building2, Camera, Mail, MapPin, Pencil, Phone } from "lucide-react";
import { formatSingleAddress } from "../../utils/fhirAddress";
import { formatFhirContactPoint } from "../../utils/fhirContactPoint";
import { PRACTICE_TYPE_SYSTEM } from "../../utils/staffRoleCatalog";
import { ORG_LOGO_EXTENSION_URL } from "../../config/organizationExtensions";

const getOrgPhoto = (
  organization: Organization | null,
): Attachment | undefined => {
  const ext = organization?.extension?.find(
    (e: Extension) => e.url === ORG_LOGO_EXTENSION_URL,
  );
  return ext?.valueAttachment as Attachment | undefined;
};

interface FhirOrganizationDisplayProps {
  organization: Organization | null;
  isOpen?: boolean;
  onClose?: () => void;
  title?: string;
  asModal?: boolean;
  onPhotoChange?: (photo: Attachment) => Promise<void> | void;
  onMainInfoClick?: () => void;
  primaryLocation?: Location | null;
  primaryLocationDisplay?: string;
  onPrimaryLocationClick?: () => void;
  onPracticeTypeClick?: () => void;
}

export const FhirOrganizationDisplay: React.FC<
  FhirOrganizationDisplayProps
> = ({
  organization,
  isOpen = true,
  onClose,
  title = "Organization Details",
  asModal = true,
  onPhotoChange,
  onMainInfoClick,
  primaryLocation,
  primaryLocationDisplay,
  onPrimaryLocationClick,
  onPracticeTypeClick,
}) => {
  const { url: orgImageUrl } = usePhotoUrl(
    getOrgPhoto(organization),
    "organization",
  );
  const { uploadPhoto } = usePhotoUploadService();
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [uploading, setUploading] = useState(false);

  const mainPhone = formatFhirContactPoint(
    organization?.telecom,
    "phone",
    ", ",
    "Missing phone",
  );
  // NOT "Missing email", AND THE DIFFERENCE IS WHETHER ANYBODY HAS TO ACT. A practice's phone IS
  // required - the setup checklist will not complete without one - so naming its absence is a true
  // instruction. An email address is deliberately not required: Spencer ruled on 2026-08-12 that the
  // phone is the channel and widening the requirement to "phone AND email" would stall practices on
  // something nobody asked for. So an empty one is simply empty, and the word "Missing" beside it sent
  // an administrator looking for a checklist item that does not exist, on a screen whose own counter
  // already read 13 of 13.
  const mainEmail = formatFhirContactPoint(
    organization?.telecom,
    "email",
    ", ",
    "—",
  );
  const practiceTypeDisplay = (organization?.type ?? [])
    .flatMap((t) => t.coding ?? [])
    .filter((c) => c.system === PRACTICE_TYPE_SYSTEM)
    .map((c) => c.display || c.code || '')
    .filter(Boolean)
    .join(', ');

  const hasPrimaryLocation = !!primaryLocation || !!primaryLocationDisplay;
  const primaryLocationText =
    primaryLocationDisplay ||
    (primaryLocation?.address
      ? formatSingleAddress(primaryLocation.address)
      : "Missing location");

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file || !onPhotoChange) return;

    setUploading(true);
    try {
      const { key, contentType, size } = await uploadPhoto(
        file,
        "org-asset",
      );
      const newPhoto: Attachment = {
        // Named by key only: the server fills the bytes once this exact upload scans clean.
        contentType,
        url: key,
        title: file.name,
        size,
        creation: new Date().toISOString(),
      };
      await onPhotoChange(newPhoto);
    } finally {
      setUploading(false);
      if (e.target) e.target.value = "";
    }
  };

  const renderContent = () => (
    <>
      <Card className="p-3">
        <div className="grid lg:grid-cols-12 md:grid-cols-12 grid-cols-7 gap-2">
          <div className="lg:col-span-1 md:col-span-1 col-span-2">
            <div className="relative inline-block">
              <img
                className="w-25 h-22 rounded"
                src={orgImageUrl}
                alt="Hospital"
              />
              {onPhotoChange && (
                <>
                  <input
                    ref={fileInputRef}
                    type="file"
                    accept="image/*"
                    className="hidden"
                    onChange={handleFileChange}
                  />
                  <button
                    onClick={() => fileInputRef.current?.click()}
                    disabled={uploading}
                    className="absolute bottom-0 right-0 bg-surface rounded-full p-1 shadow cursor-pointer border border-gray-200 hover:bg-gray-50 disabled:opacity-50"
                    title="Change logo"
                  >
                    {uploading ? <Spinner /> : <Camera size={14} />}
                  </button>
                </>
              )}
            </div>
          </div>

          <div className="lg:col-span-6 md:col-span-6 col-span-5 space-y-1 text-start">
            <div className="flex items-center gap-1">
              <p className="text-xl font-bold">
                {organization?.name || "Unnamed Organization"}
              </p>
              {onMainInfoClick && (
                <button
                  type="button"
                  onClick={onMainInfoClick}
                  className="p-1 rounded hover:bg-muted text-secondary cursor-pointer"
                  title="Edit organization name"
                >
                  <Pencil size={14} />
                </button>
              )}
            </div>

            <div className="flex items-center gap-1">
              {practiceTypeDisplay ? (
                <span className="text-sm text-secondary">{practiceTypeDisplay}</span>
              ) : (
                <span className="text-sm text-muted-foreground italic">No practice type set</span>
              )}
              {onPracticeTypeClick && (
                <button
                  type="button"
                  onClick={onPracticeTypeClick}
                  className="p-1 rounded hover:bg-muted text-secondary cursor-pointer"
                  title="Edit practice type"
                >
                  <Pencil size={14} />
                </button>
              )}
            </div>

            <div className="mt-3 grid grid-cols-1 md:grid-cols-2 gap-2 items-start">
              <button
                type="button"
                onClick={onMainInfoClick}
                disabled={!onMainInfoClick}
                className={`text-left rounded p-2 -ml-2 ${onMainInfoClick ? "cursor-pointer hover:bg-muted" : "cursor-default"}`}
                title={
                  onMainInfoClick
                    ? "Edit primary organization contact information"
                    : undefined
                }
              >
                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm font-semibold">
                    <span>Primary Organization Contact Information</span>
                    {onMainInfoClick && (
                      <Pencil size={14} className="text-secondary" />
                    )}
                  </div>
                  <div className="space-y-1 text-sm text-secondary font-normal">
                    <div className="flex items-center gap-2">
                      <Building2 size={14} />
                      <span>{organization?.name || "Missing organization name"}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Phone size={14} />
                      <span>{mainPhone}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Mail size={14} />
                      <span>{mainEmail}</span>
                    </div>
                  </div>
                </div>
              </button>

              <button
                type="button"
                onClick={onPrimaryLocationClick}
                disabled={!onPrimaryLocationClick}
                className={`text-left rounded p-2 -ml-2 ${onPrimaryLocationClick ? "cursor-pointer hover:bg-muted" : "cursor-default"}`}
                title={
                  onPrimaryLocationClick
                    ? "Edit primary organization location"
                    : undefined
                }
              >
                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm font-semibold">
                    <span>Primary Organization Location</span>
                    {onPrimaryLocationClick && (
                      <Pencil size={14} className="text-secondary" />
                    )}
                  </div>
                  <div className="space-y-1 text-sm text-secondary font-normal">
                    {hasPrimaryLocation ? (
                      <>
                        <div className="flex items-center gap-2">
                          <Building2 size={14} />
                          <span>{primaryLocation?.name || "Primary location"}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <MapPin size={14} />
                          <span>{primaryLocationText}</span>
                        </div>
                      </>
                    ) : (
                      <div className="flex items-center gap-2 text-primary font-semibold">
                        <MapPin size={14} />
                        <span>ADD PRIMARY LOCATION</span>
                      </div>
                    )}
                  </div>
                </div>
              </button>
            </div>
          </div>
        </div>
      </Card>
    </>
  );

  if (!asModal) {
    return (
      <div>
        <Elevation value={5} />
        {renderContent()}
      </div>
    );
  }

  if (!isOpen) return null;

  return (
    <Modal
      title={title}
      onRequestClose={onClose}
      size="large"
      style={{ paddingBottom: 16 }}
    >
      {renderContent()}
    </Modal>
  );
};

export default FhirOrganizationDisplay;