"use client";

import React, { useState, useEffect } from "react";
import { uploadQuotations, getQuotations, deleteQuotation } from "@/src/services/web/services";
import DeleteConfirmationModal from "../sharing/components/DeleteConfirmationModal";
// import DeleteConfirmationModal from "@/src/components/ui/DeleteConfirmationModal";

const MIN_QUOTES = 3;
const MAX_QUOTES = 10;

interface Document {
  id: number;
  file_name: string;
  original_name: string;
  file_size: number;
  status?: string;
}

interface UploadQuotationProps {
  applicationId: string;
}

export default function UploadQuotation({ applicationId }: UploadQuotationProps) {
  const [documents, setDocuments] = useState<Document[]>([]);
  const [loading, setLoading] = useState(true);
  const [uploading, setUploading] = useState(false);
  const [deletingDocId, setDeletingDocId] = useState<number | null>(null);
  const [errorMsg, setErrorMsg] = useState("");

  useEffect(() => {
    fetchQuotations();
  }, [applicationId]);

  const fetchQuotations = async () => {
    try {
      const response = await getQuotations(applicationId);
      if (response.data.success) {
        setDocuments(response.data.data);
      }
    } catch (error: any) {
      console.error("Error fetching quotations:", error);
      if (error?.response?.status === 403 || error?.response?.status === 401) {
        setErrorMsg(error.response.data.message || "Access denied");
      }
    } finally {
      setLoading(false);
    }
  };

  const handleAddDocument = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files || files.length === 0) return;

    const newCount = documents.length + files.length;
    if (newCount > MAX_QUOTES) {
      setErrorMsg(`Maximum ${MAX_QUOTES} quotations allowed`);
      return;
    }

    setUploading(true);
    setErrorMsg("");

    const formData = new FormData();
    Array.from(files).forEach((file) => {
      formData.append("quotations", file);
    });

    try {
      const response = await uploadQuotations(applicationId, formData);
      if (response.data.success) {
        await fetchQuotations();
      } else {
        setErrorMsg(response.data.message || "Upload failed");
      }
    } catch (error: any) {
      console.error("Error uploading:", error);
      if (error?.response?.status === 403) {
        setErrorMsg("Access denied. You can only upload documents to your own applications.");
      } else if (error?.response?.status === 401) {
        setErrorMsg("Unauthorized. Please log in again.");
      } else {
        setErrorMsg(error.response?.data?.message || "Upload failed. Please try again.");
      }
    } finally {
      setUploading(false);
    }
  };

  const confirmDelete = (id: number) => {
    setDeletingDocId(id);
  };

  const handleRemoveDocument = async () => {
    if (!deletingDocId) return;

    try {
      const response = await deleteQuotation(deletingDocId);
      if (response.data.success) {
        setDocuments((prev) => prev.filter((doc) => doc.id !== deletingDocId));
      }
    } catch (error: any) {
      console.error("Error deleting:", error);
      if (error?.response?.status === 403) {
        setErrorMsg("Access denied. You can only delete your own documents.");
      } else if (error?.response?.status === 401) {
        setErrorMsg("Unauthorized. Please log in again.");
      } else {
        setErrorMsg(error.response?.data?.message || "Delete failed. Please try again.");
      }
    } finally {
      setDeletingDocId(null);
    }
  };

  const handleDownload = async (id: number) => {
    try {
      window.open(
        `${process.env.NEXT_PUBLIC_EXPRESS_BACKEND_URL}/web/documents/download/quotation/${id}`,
        "_blank"
      );
    } catch (error) {
      console.error("Error downloading:", error);
    }
  };

  const formatFileSize = (bytes: number) => {
    if (bytes < 1024) return bytes + " B";
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB";
    return (bytes / (1024 * 1024)).toFixed(2) + " MB";
  };

  if (loading) {
    return (
      <div className="flex justify-center py-8">
        <div className="text-gray-500">Loading quotations...</div>
      </div>
    );
  }

  return (
    <div className="space-y-8 bg-white rounded-xl relative">
      <DeleteConfirmationModal
        isOpen={!!deletingDocId}
        fileName={
          documents.find((d) => d.id === deletingDocId)?.original_name || ""
        }
        onConfirm={handleRemoveDocument}
        onCancel={() => setDeletingDocId(null)}
      />

      <div className="space-y-6">
        <div className="flex items-center justify-between border-b pb-4">
          <h3 className="text-xl font-bold text-gray-800">Upload Quotation</h3>
          <label className="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition cursor-pointer flex items-center gap-2 shadow-sm">
            <span>{uploading ? "Uploading..." : "+ Add Quotation"}</span>
            <input
              type="file"
              multiple
              accept=".pdf,.jpg,.jpeg,.png"
              className="hidden"
              onChange={handleAddDocument}
              disabled={uploading || documents.length >= MAX_QUOTES}
            />
          </label>
        </div>

        {documents.length > 0 && (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {documents.map((doc) => (
              <div
                key={doc.id}
                className="relative group border border-gray-200 rounded-xl p-4 bg-gray-50 hover:bg-white hover:border-teal-500 hover:shadow-md transition-all"
              >
                <button
                  onClick={() => confirmDelete(doc.id)}
                  className="absolute -top-2 -right-2 bg-red-500 hover:bg-red-600 text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 transition-opacity shadow-lg z-10"
                >
                  <svg
                    width="12"
                    height="12"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="4"
                  >
                    <path d="M18 6L6 18M6 6l12 12" />
                  </svg>
                </button>

                {doc.status === "Approved" && (
                  <div className="absolute -top-2 -right-2 z-20">
                    <div className="bg-green-600 text-white rounded-full p-1.5 shadow-md border-2 border-white">
                      <svg
                        className="w-3 h-3"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        strokeWidth="4"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M5 13l4 4L19 7"
                        />
                      </svg>
                    </div>
                  </div>
                )}

                <div className="flex items-start gap-3">
                  <div className="bg-teal-100 p-3 rounded-lg text-teal-700">
                    <svg
                      width="24"
                      height="24"
                      fill="currentColor"
                      viewBox="0 0 20 20"
                    >
                      <path d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" />
                    </svg>
                  </div>
                  <div className="flex-1 min-w-0">
                    <p
                      className="text-sm font-bold text-gray-800 truncate"
                      title={doc.original_name}
                    >
                      {doc.original_name}
                    </p>
                    <div className="mt-1 flex items-center justify-between gap-2">
                      <p className="text-xs text-gray-500">
                        {formatFileSize(doc.file_size)}
                      </p>
                      <button
                        onClick={() => handleDownload(doc.id)}
                        className="text-[11px] px-2 py-[2px] rounded-md border border-teal-500 text-teal-600 hover:bg-teal-50 hover:text-teal-700 transition-all"
                      >
                        Download
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

        {documents.length === 0 && (
          <div className="border-2 border-dashed border-gray-200 rounded-xl py-10 text-center bg-gray-50/30">
            <p className="text-gray-400 italic">
              No documents attached. Click "Add Quotation" to begin.
            </p>
          </div>
        )}

        {documents.length > 0 && documents.length < MIN_QUOTES && (
          <p className="text-sm font-semibold text-orange-600">
            Minimum {MIN_QUOTES} quotations required. You have uploaded{" "}
            {documents.length}.
          </p>
        )}

        {errorMsg && (
          <p className="text-sm font-semibold text-red-600">{errorMsg}</p>
        )}
      </div>
    </div>
  );
}