import React, { useState, useCallback, useMemo } from 'react';
import TicketChatMessage from '@/src/components/web/TicketChatMessage';
import TicketReplyForm from '@/src/components/web/TicketReplyForm';
import { addReply, uploadAdminReplyImages } from '@/src/services/admin/services';
import { TicketReply } from '@/src/types/web/types';

interface AdminTicketRepliesSectionProps {
  ticketId: number;
  initialReplies: TicketReply[];
  onReplyAdded: () => void;
}

const AdminTicketRepliesSection = React.memo(({ 
  ticketId, 
  initialReplies, 
  onReplyAdded 
}: AdminTicketRepliesSectionProps) => {
  const [replies, setReplies] = useState<TicketReply[]>(initialReplies);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleReplySubmit = useCallback(async (message: string, files?: File[]) => {
    if (isSubmitting) return;
    
    try {
      setIsSubmitting(true);
      let imageUrls: string[] = [];

      // Upload images first if any
      if (files && files.length > 0) {
        const formData = new FormData();
        files.forEach((file) => {
          formData.append("images", file);
        });
        
        const uploadResponse = await uploadAdminReplyImages(formData);
        
        if (uploadResponse.data.success && uploadResponse.data.data.files) {
          imageUrls = uploadResponse.data.data.files.map((file: any) => file.file_url);
        }
      }

      const payload = {
        message: message || "[Image attachment]",
        images: imageUrls,
      };
      
      const response = await addReply(ticketId, payload);
      
      if (response.data.success) {
        const serverReply = response.data.data;
        const newReply: TicketReply = {
          id: serverReply.id,
          ticket_id: serverReply.ticket_id,
          message: serverReply.message,
          reply_by: serverReply.reply_by,
          created_on: serverReply.created_on,
          images: serverReply.images || []
        };

        setReplies(prev => [...prev, newReply]);
        onReplyAdded();
      }
      
    } catch (error) {
      console.error("Error adding reply:", error);
      throw error;
    } finally {
      setIsSubmitting(false);
    }
  }, [ticketId, isSubmitting, onReplyAdded]);

  const memoizedReplies = useMemo(() => replies, [replies]);

  return (
    <>
      {memoizedReplies.length > 0 && (
        <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
          <div className="border-b border-gray-200 px-6 py-4 bg-gray-50">
            <div className="flex items-center justify-between">
              <h3 className="text-base font-semibold text-gray-900">
                Comments
              </h3>
              <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-200 text-gray-700">
                {memoizedReplies.length} update{memoizedReplies.length !== 1 ? "s" : ""}
              </span>
            </div>
          </div>

          <div className="max-h-[600px] overflow-y-auto p-6">
            {memoizedReplies.map((reply) => (
              <TicketChatMessage
                key={reply.id}
                message={reply.message}
                replyBy={reply.reply_by}
                createdOn={reply.created_on}
                images={reply.images?.map((img) => img.image_url)}
                isAdminView={true}
              />
            ))}
          </div>
        </div>
      )}

      <TicketReplyForm 
        onSubmit={handleReplySubmit} 
        isSubmitting={isSubmitting}
      />
    </>
  );
});

AdminTicketRepliesSection.displayName = 'AdminTicketRepliesSection';

export default AdminTicketRepliesSection;