"use client";

import React, { useState } from "react";
import { MdReportProblem } from "react-icons/md";
import { FiX } from "react-icons/fi";
import FileUpload from "./FileUpload";
import { useFileUpload } from "@/hooks/useFileUpload";
import {
  getGoogleDriveConfig,
  validateGoogleDriveConfig,
} from "@/config/googleDrive";

interface MarkDamageModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (description: string, images: string[]) => void;
  productName: string;
  barcodeNumber: string;
  isSubmitting?: boolean;
  isEditMode?: boolean;
  isReadOnly?: boolean;
  initialDescription?: string;
  initialImages?: string[];
}

export default function MarkDamageModal({
  isOpen,
  onClose,
  onSubmit,
  productName,
  barcodeNumber,
  isSubmitting = false,
  isEditMode = false,
  isReadOnly = false,
  initialDescription = "",
  initialImages = [],
}: MarkDamageModalProps) {
  const [description, setDescription] = useState(initialDescription);

  const config = getGoogleDriveConfig();
  const isConfigValid = validateGoogleDriveConfig(config);

  const {
    uploadedFiles,
    uploadProgress,
    isUploading,
    handleFileSelect,
    removeFile,
    cancelUpload,
    setUploadedFilesFromDocuments,
    clearAllFiles,
  } = useFileUpload({ config });

  const handleSubmit = () => {
    const imageUrls = uploadedFiles
      .map((file) => file.webViewLink || file.webContentLink)
      .filter((url): url is string => url !== undefined);

    onSubmit(description, imageUrls);
  };

  const handleCancel = () => {
    setDescription(initialDescription);
    // Clear uploaded files when canceling
    clearAllFiles();
    onClose();
  };

  // Update description when initialDescription changes
  React.useEffect(() => {
    setDescription(initialDescription);
  }, [initialDescription]);

  // Handle initial images when modal opens or data changes
  React.useEffect(() => {
    if (isOpen && initialImages && initialImages.length > 0) {
      // Convert image URLs to the format expected by useFileUpload
      const imageDocuments = initialImages.map((imageUrl, index) => {
        // Extract file ID from Google Drive URL if it's a Drive URL
        let driveFileId = imageUrl;
        if (imageUrl.includes("drive.google.com")) {
          const match = imageUrl.match(/\/file\/d\/([a-zA-Z0-9-_]+)/);
          driveFileId = match ? match[1] : `image_${index}`;
        }

        return {
          driveFileId: driveFileId,
          filename: `image_${index + 1}.jpg`,
          createdAt: new Date().toISOString(),
        };
      });

      setUploadedFilesFromDocuments(imageDocuments);
    } else if (isOpen) {
      // Clear files when opening for new damage report
      clearAllFiles();
    }
  }, [isOpen, initialImages, setUploadedFilesFromDocuments, clearAllFiles]);

  if (!isOpen) return null;

  const title = isReadOnly
    ? "Damage Report"
    : isEditMode
    ? "Edit Damage Report"
    : "Mark As Damaged";

  const submitLabel = isSubmitting
    ? isEditMode
      ? "Updating..."
      : "Marking..."
    : isEditMode
    ? "Update Report"
    : "Mark As Damaged";

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto">
      <div className="flex min-h-screen items-center justify-center p-4">
        <div
          className="fixed inset-0 bg-black bg-opacity-30 transition-opacity"
          onClick={isSubmitting ? undefined : onClose}
        />

        {/* Modal — header/body/footer layout. Body scrolls; footer (buttons)
            is always visible so the user never has to scroll to confirm. */}
        <div className="relative w-full max-w-2xl transform rounded-lg bg-white text-left shadow-xl transition-all flex flex-col max-h-[90vh]">
          {/* Header */}
          <div className="px-6 py-4 border-b border-gray-200 flex items-center gap-3 flex-shrink-0">
            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100 flex-shrink-0">
              <MdReportProblem size={22} color="#B45309" />
            </div>
            <div className="flex-1 min-w-0">
              <h3 className="text-lg font-bold text-[#0F2851] leading-tight">
                {title}
              </h3>
              <p className="text-sm text-gray-500 truncate">
                <span className="text-[#3997E0] font-medium">{productName}</span>
                {barcodeNumber && (
                  <>
                    {" · "}
                    <span className="font-mono text-xs">{barcodeNumber}</span>
                  </>
                )}
              </p>
            </div>
            <button
              type="button"
              onClick={onClose}
              disabled={isSubmitting}
              className="text-gray-400 hover:text-gray-600 transition-colors flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
              title="Close"
            >
              <FiX size={24} />
            </button>
          </div>

          {/* Body (scrollable) */}
          <div className="px-6 py-4 overflow-y-auto flex-1">
            <div className="space-y-5">
              {/* Description */}
              <div>
                <label className="block text-sm font-semibold text-[#0F2851] mb-2">
                  Description
                </label>
                {isReadOnly ? (
                  <div className="w-full min-h-[80px] px-3 py-2 border border-gray-300 rounded-md bg-gray-50">
                    <p className="text-gray-800 whitespace-pre-wrap text-sm">
                      {description || "No description provided"}
                    </p>
                  </div>
                ) : (
                  <textarea
                    placeholder="Describe what's damaged..."
                    className="w-full min-h-[80px] px-3 py-2 border border-gray-300 rounded-md resize-y focus:outline-none focus:ring-2 focus:ring-[#3997E0] focus:border-transparent text-black text-sm"
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                    rows={3}
                  />
                )}
              </div>

              {/* Photos */}
              <div>
                <label className="block text-sm font-semibold text-[#0F2851] mb-2">
                  Photos
                </label>
                {!isReadOnly && !isConfigValid && (
                  <div className="mb-3 p-3 bg-yellow-100 border border-yellow-400 rounded text-sm text-yellow-700">
                    Google Drive configuration is incomplete. Please check your
                    settings.
                  </div>
                )}
                <FileUpload
                  onFileSelect={isReadOnly ? () => {} : handleFileSelect}
                  uploadedFiles={uploadedFiles}
                  uploadProgress={uploadProgress}
                  isUploading={isUploading}
                  onRemoveFile={isReadOnly ? async () => {} : removeFile}
                  onCancelUpload={isReadOnly ? () => {} : cancelUpload}
                  accept="image/*"
                  multiple={true}
                  maxSize={50000000}
                  className="min-h-[140px]"
                  isReadOnly={isReadOnly}
                />
              </div>
            </div>
          </div>

          {/* Footer — always visible */}
          <div className="px-6 py-4 border-t border-gray-200 flex-shrink-0">
            {isReadOnly ? (
              <div className="flex justify-end">
                <button
                  type="button"
                  onClick={onClose}
                  className="rounded-xl bg-[#3997E0] px-6 py-2 text-base font-medium text-white hover:bg-blue-600 focus:outline-none"
                >
                  Close
                </button>
              </div>
            ) : (
              <div className="flex justify-end gap-3">
                <button
                  type="button"
                  onClick={handleCancel}
                  disabled={isSubmitting}
                  className="rounded-xl border border-[#3997E0] bg-white px-6 py-2 text-base font-medium text-[#3997E0] hover:bg-gray-50 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Cancel
                </button>
                <button
                  type="button"
                  onClick={handleSubmit}
                  disabled={isSubmitting || isUploading}
                  className="rounded-xl bg-[#3997E0] px-6 py-2 text-base font-medium text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {submitLabel}
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}