"use client";

import { useState, useEffect, useMemo, useCallback } from "react";
import { useSearchParams } from "next/navigation";
import TicketHeroSection from "@/src/components/web/TicketHeroSection";
import TicketHeader from "@/src/components/web/TicketHeader";
import TicketDetailsCard from "@/src/components/web/TicketDetailsCard";
import TicketRepliesSection from "@/src/components/web/TicketRepliesSection";
import Faq from "@/src/components/web/Faq";
import { getTicketWithReplies } from "@/src/services/web/services";
import { Ticket } from "@/src/types/web/types";

export default function ViewTicket() {
  const searchParams = useSearchParams();
  const ticketId = searchParams.get("id");
  const [ticket, setTicket] = useState<Ticket | null>(null);
  const [loading, setLoading] = useState(true);

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

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

  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?.ticket_no, ticket?.created_on, ticket?.title, ticket?.description, ticket?.status, ticket?.uploads]);

  // Memoize replies to prevent unnecessary re-renders
  const replies = useMemo(() => ticket?.replies || [], [ticket?.replies]);

  if (loading) return <div className="text-center py-10">Loading...</div>;
  if (!ticket || !ticketDetails) return <div className="text-center py-10">Ticket not found</div>;

  return (
    <>
      {/* HERO - Memoized component that won't re-render */}
      <TicketHeroSection />

      <section className="w-full py-10 px-0 md:px-4">
        <div className="max-w-7xl mx-auto">
          {/* HEADER - Memoized component that won't re-render */}
          <TicketHeader />

          <div className="space-y-6">
            {/* TICKET DETAILS - Only re-renders if ticket details change */}
            <TicketDetailsCard
              ticketNumber={ticketDetails.ticketNumber}
              postedOn={ticketDetails.postedOn}
              title={ticketDetails.title}
              description={ticketDetails.description}
              status={ticketDetails.status}
              uploads={ticketDetails.uploads}
            />

            {/* REPLIES SECTION - Manages its own state and optimized rendering */}
            <TicketRepliesSection
              ticketId={parseInt(ticketId!)}
              initialReplies={replies}
            />
          </div>
        </div>
      </section>

      {/* FAQ - Memoized component that won't re-render */}
      <Faq />
    </>
  );
}