import React, { useState, useEffect } from "react";
import { ConditionCheck } from "../types";
import { getSignedImageUrl } from "../services/uploadService";

interface ConditionCheckViewerModalProps {
  show: boolean;
  onHide: () => void;
  conditionCheck: ConditionCheck | null;
}

const checkTypeLabels: Record<string, string> = {
  pre_rental_owner: "Pre-Rental Condition",
  rental_start_renter: "Rental Start Condition",
  rental_end_renter: "Rental End Condition",
  post_rental_owner: "Post-Rental Condition",
};

const ConditionCheckViewerModal: React.FC<ConditionCheckViewerModalProps> = ({
  show,
  onHide,
  conditionCheck,
}) => {
  const [imageUrls, setImageUrls] = useState<Map<string, string>>(new Map());
  const [selectedImage, setSelectedImage] = useState(0);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") onHide();
    };
    if (show) {
      document.addEventListener("keydown", handleKeyDown);
    }
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [show, onHide]);

  useEffect(() => {
    const fetchImageUrls = async () => {
      if (!conditionCheck?.imageFilenames?.length) return;

      // Filter to only valid string keys
      const validKeys = conditionCheck.imageFilenames.filter(
        (key): key is string => typeof key === "string" && key.length > 0
      );

      if (validKeys.length === 0) return;

      setLoading(true);
      const newUrls = new Map<string, string>();

      try {
        await Promise.all(
          validKeys.map(async (key) => {
            const url = await getSignedImageUrl(key, "medium");
            newUrls.set(key, url);
          })
        );
        setImageUrls(newUrls);
      } catch (error) {
        console.error("Failed to fetch image URLs:", error);
      } finally {
        setLoading(false);
      }
    };

    if (show && conditionCheck) {
      setSelectedImage(0);
      fetchImageUrls();
    }
  }, [show, conditionCheck]);

  if (!show || !conditionCheck) return null;

  const submitterName = conditionCheck.submittedByUser
    ? `${conditionCheck.submittedByUser.firstName} ${conditionCheck.submittedByUser.lastName}`
    : "Unknown";

  const submittedDate = new Date(conditionCheck.submittedAt).toLocaleString(
    undefined,
    {
      dateStyle: "short",
      timeStyle: "short",
    }
  );

  // Filter to only valid string keys for display
  const validImageKeys = (conditionCheck.imageFilenames || []).filter(
    (key): key is string => typeof key === "string" && key.length > 0
  );

  const currentImageKey = validImageKeys[selectedImage];
  const currentImageUrl = currentImageKey
    ? imageUrls.get(currentImageKey)
    : undefined;

  return (
    <div
      className="modal d-block"
      tabIndex={-1}
      style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
      onClick={(e) => {
        if (e.target === e.currentTarget) onHide();
      }}
    >
      <div className="modal-dialog modal-lg modal-dialog-centered">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">
              <i className="bi bi-camera me-2" />
              {checkTypeLabels[conditionCheck.checkType] || "Condition Check"}
            </h5>
            <button
              type="button"
              className="btn-close"
              onClick={onHide}
              aria-label="Close"
            />
          </div>

          <div className="modal-body">
            {loading ? (
              <div className="text-center py-5">
                <div className="spinner-border" role="status">
                  <span className="visually-hidden">Loading...</span>
                </div>
                <p className="mt-2 text-muted">Loading images...</p>
              </div>
            ) : (
              <>
                {/* Main Image */}
                <div
                  className="text-center mb-3"
                  style={{
                    backgroundColor: "#f8f9fa",
                    borderRadius: "8px",
                    padding: "1rem",
                  }}
                >
                  {currentImageUrl ? (
                    <img
                      src={currentImageUrl}
                      alt={`Condition check photo ${selectedImage + 1}`}
                      style={{
                        maxWidth: "100%",
                        maxHeight: "400px",
                        objectFit: "contain",
                      }}
                      className="rounded"
                    />
                  ) : (
                    <div className="text-muted py-5">
                      <i className="bi bi-image fs-1" />
                      <p>Image not available</p>
                    </div>
                  )}
                </div>

                {/* Thumbnail Strip */}
                {validImageKeys.length > 1 && (
                  <div className="d-flex gap-2 overflow-auto justify-content-center mb-3">
                    {validImageKeys.map((key, index) => {
                      const thumbUrl = imageUrls.get(key);
                      return (
                        <div
                          key={key}
                          onClick={() => setSelectedImage(index)}
                          style={{
                            cursor: "pointer",
                            border:
                              selectedImage === index
                                ? "2px solid #0d6efd"
                                : "2px solid transparent",
                            borderRadius: "4px",
                            padding: "2px",
                          }}
                        >
                          {thumbUrl ? (
                            <img
                              src={thumbUrl}
                              alt={`Thumbnail ${index + 1}`}
                              style={{
                                width: "60px",
                                height: "60px",
                                objectFit: "cover",
                                borderRadius: "4px",
                              }}
                            />
                          ) : (
                            <div
                              className="bg-secondary d-flex align-items-center justify-content-center"
                              style={{
                                width: "60px",
                                height: "60px",
                                borderRadius: "4px",
                              }}
                            >
                              <i className="bi bi-image text-white" />
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                )}

                {/* Image Counter */}
                <p className="text-center text-muted small mb-3">
                  Photo {selectedImage + 1} of {validImageKeys.length}
                </p>

                {/* Notes */}
                {conditionCheck.notes && (
                  <div className="mb-3">
                    <h6>
                      <i className="bi bi-chat-left-text me-2" />
                      Notes
                    </h6>
                    <p className="mb-0 text-muted">{conditionCheck.notes}</p>
                  </div>
                )}

                {/* Metadata */}
                <div className="border-top pt-3">
                  <small className="text-muted">
                    <i className="bi bi-person me-1" />
                    Submitted by <strong>{submitterName}</strong>
                    <span className="mx-2">|</span>
                    <i className="bi bi-calendar me-1" />
                    {submittedDate}
                  </small>
                </div>
              </>
            )}
          </div>

          <div className="modal-footer">
            <button
              type="button"
              className="btn btn-secondary"
              onClick={onHide}
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ConditionCheckViewerModal;
