"use client";

import React, { useState, useEffect, useCallback, useMemo } from "react";
import { useSearchParams } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

import TicketDetailsCard from "@/src/components/web/TicketDetailsCard";
import AdminTicketRepliesSection from "@/src/components/admin/ticket/AdminTicketRepliesSection";
import {
  getTicketById,
  updateTicketStatus,
} from "@/src/services/admin/services";
import ManageTicketStatus from "./ManageTicketStatus";
import {
  manageTicketStatusSchema,
  manageTicketStatusFormData,
} from "@/src/validation/admin/validation";

// Memoized message components
const SuccessMessage = React.memo(({ message }: { message: string }) => (
  <div className="bg-green-50 border border-green-200 rounded-lg p-4">
    <p className="text-sm text-green-800 font-medium">{message}</p>
  </div>
));
SuccessMessage.displayName = 'SuccessMessage';

const ErrorMessage = React.memo(({ message }: { message: string }) => (
  <div className="bg-red-50 border border-red-200 rounded-lg p-4">
    <p className="text-sm text-red-800 font-medium">{message}</p>
  </div>
));
ErrorMessage.displayName = 'ErrorMessage';

const LoadingSpinner = React.memo(() => (
  <div className="text-center py-10">Loading...</div>
));
LoadingSpinner.displayName = 'LoadingSpinner';

const NotFound = React.memo(() => (
  <div className="text-center py-10">Ticket not found</div>
));
NotFound.displayName = 'NotFound';

export default function AdminViewTicket() {
  const searchParams = useSearchParams();
  const ticketId = searchParams.get("id");
  const [ticket, setTicket] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [updating, setUpdating] = useState(false);
  const [successMessage, setSuccessMessage] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  const {
    control,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm<manageTicketStatusFormData>({
    resolver: zodResolver(manageTicketStatusSchema),
    defaultValues: {
      status: "PENDING",
    },
  });

  const loadTicket = useCallback(async () => {
    if (!ticketId) return;
    
    try {
      setLoading(true);
      const response = await getTicketById(parseInt(ticketId));
      if (response.data.success) {
        setTicket(response.data.data);
      }
    } catch (error) {
      console.error("Error loading ticket:", error);
      setErrorMessage("Failed to load ticket");
    } finally {
      setLoading(false);
    }
  }, [ticketId]);

  const handleStatusUpdate = useCallback(async (data: manageTicketStatusFormData) => {
    if (!ticketId) return;
    
    try {
      setUpdating(true);
      const response = await updateTicketStatus(parseInt(ticketId), data.status);
      if (response.data.success) {
        setSuccessMessage("Ticket status updated successfully");
        await loadTicket();
      }
    } catch (error) {
      console.error("Error updating status:", error);
      setErrorMessage("Failed to update ticket status");
    } finally {
      setUpdating(false);
    }
  }, [ticketId, loadTicket]);

  const handleReplyAdded = useCallback(() => {
    setSuccessMessage("Reply added successfully");
  }, []);

  // Auto-clear messages
  useEffect(() => {
    if (successMessage) {
      const timer = setTimeout(() => setSuccessMessage(""), 3000);
      return () => clearTimeout(timer);
    }
  }, [successMessage]);

  useEffect(() => {
    if (errorMessage) {
      const timer = setTimeout(() => setErrorMessage(""), 5000);
      return () => clearTimeout(timer);
    }
  }, [errorMessage]);

  useEffect(() => {
    loadTicket();
  }, [loadTicket]);

  useEffect(() => {
    if (ticket?.status) {
      reset({ status: ticket.status });
    }
  }, [ticket, reset]);

  // Memoized ticket details
  const ticketDetails = useMemo(() => {
    if (!ticket) return null;
    return {
      ticketNumber: ticket.ticket_no,
      postedOn: new Date(ticket.created_on).toLocaleString(),
      title: ticket.title,
      description: ticket.description,
      status: ticket.status,
      uploads: ticket.uploads,
    };
  }, [ticket]);

  const replies = useMemo(() => ticket?.replies || [], [ticket?.replies]);

  if (loading) return <LoadingSpinner />;
  if (!ticket || !ticketDetails) return <NotFound />;

  return (
    <>
      <div className="space-y-6">
        {successMessage && <SuccessMessage message={successMessage} />}
        {errorMessage && <ErrorMessage message={errorMessage} />}

        <TicketDetailsCard
          ticketNumber={ticketDetails.ticketNumber}
          postedOn={ticketDetails.postedOn}
          title={ticketDetails.title}
          description={ticketDetails.description}
          status={ticketDetails.status}
          uploads={ticketDetails.uploads}
        />
      </div>
      
      <div className="grid grid-cols-1 lg:grid-cols-10 gap-6 items-start">
        <div className="lg:col-span-7 space-y-4">
          <div className="space-y-6">
            <AdminTicketRepliesSection
              ticketId={parseInt(ticketId!)}
              initialReplies={replies}
              onReplyAdded={handleReplyAdded}
            />
          </div>
        </div>
        
        <div className="lg:col-span-3 space-y-4 sticky top-6 h-fit">
          <form onSubmit={handleSubmit(handleStatusUpdate)}>
            <ManageTicketStatus
              control={control}
              errors={errors}
              isReadOnly={false}
              updating={updating}
            />
          </form>
        </div>
      </div>
    </>
  );
}