"use client";

import React, { useState } from "react";
import QuotationCard from "./QuotationCard";
import DeleteConfirmationModal from "./DeleteConfirmationModal";
import { uploadQuotations } from "@/src/services/admin/services";
import { useCustomToast } from "@/src/hooks/web/useCustomToast";

const MIN_QUOTES = 3;
const MAX_QUOTES = 10;

interface UploadedFile {
  id: string;
  name: string;
  size: string;
  file: File;
}

interface QuotationUploadFormProps {
  token: string;
  uploadedCount?: number;
  onSuccess?: () => void;
}

export default function QuotationUploadForm({ token, uploadedCount = 0, onSuccess }: QuotationUploadFormProps) {
  const [documents, setDocuments] = useState<UploadedFile[]>([]);
  const [deletingDocId, setDeletingDocId] = useState<string | null>(null);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);
  const [isUploading, setIsUploading] = useState(false);
  const { showToast } = useCustomToast();

  const handleAddDocument = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      const newFiles = Array.from(e.target.files).map((file) => ({
        id: Math.random().toString(36).substr(2, 9),
        name: file.name,
        size: (file.size / 1024).toFixed(1) + " KB",
        file,
      }));

      setDocuments((prev) => {
        const total = uploadedCount + prev.length + newFiles.length;

        if (total > MAX_QUOTES) {
          setErrorMsg(`Maximum ${MAX_QUOTES} quotations allowed. You already have ${uploadedCount} uploaded.`);
          return prev;
        }

        setErrorMsg(null);
        return [...prev, ...newFiles];
      });
    }
  };

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

  const handleRemoveDocument = () => {
    if (deletingDocId) {
      setDocuments((prev) => prev.filter((doc) => doc.id !== deletingDocId));
      setDeletingDocId(null);
    }
  };

  const handleSave = async () => {
    if (documents.length < MIN_QUOTES) {
      setErrorMsg(`Please upload at least ${MIN_QUOTES} quotations before saving.`);
      return;
    }

    if (documents.length > MAX_QUOTES) {
      setErrorMsg(`You can upload maximum ${MAX_QUOTES} quotations only.`);
      return;
    }

    setErrorMsg(null);
    setIsUploading(true);

    try {
      const files = documents.map((doc) => doc.file);
      await uploadQuotations(token, files);
      showToast({
        title: "Success!",
        description: "Quotations uploaded successfully.",
        type: "success",
      });
      setDocuments([]);
      if (onSuccess) onSuccess();
    } catch (error: any) {
      showToast({
        title: "Error",
        description: error.response?.data?.message || "Failed to upload quotations.",
        type: "error",
      });
      
    } finally {
      setIsUploading(false);
    }
  };

  const activeDocName = documents.find((d) => d.id === deletingDocId)?.name;

  return (
    <div className="space-y-8 bg-white rounded-xl relative">
      <DeleteConfirmationModal
        isOpen={!!deletingDocId}
        fileName={activeDocName || ""}
        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>+ Add Quotation</span>
            <input
              type="file"
              multiple
              accept=".jpg,.jpeg,.png,.pdf"
              className="hidden"
              onChange={handleAddDocument}
              disabled={isUploading || uploadedCount + 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) => (
              <QuotationCard
                key={doc.id}
                id={doc.id}
                name={doc.name}
                size={doc.size}
                onRemove={confirmDelete}
                showRemove={!isUploading}
              />
            ))}
          </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>
        )}

        {uploadedCount + documents.length >= MAX_QUOTES && (
          <p className="text-sm font-semibold text-blue-600">
            Maximum limit reached. You have {uploadedCount} uploaded and {documents.length} pending quotations.
          </p>
        )}

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

      <div className="flex justify-end pt-4 border-t border-gray-100">
        <button
          type="button"
          disabled={documents.length < MIN_QUOTES || documents.length > MAX_QUOTES || isUploading}
          className={`px-5 py-2 rounded-md text-white transition flex items-center gap-2 ${
            documents.length < MIN_QUOTES || documents.length > MAX_QUOTES || isUploading
              ? "bg-gray-300 cursor-not-allowed"
              : "bg-teal-600 hover:bg-teal-700"
          }`}
          onClick={handleSave}
        >
          {isUploading && (
            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
          )}
          {isUploading ? "Uploading..." : "Upload Quotation"}
        </button>
      </div>
    </div>
  );
}