"use client";
import { FC, useEffect, useState } from "react";
import getData from "@/utils/fetch";
import { useQuery } from "@tanstack/react-query";
import { Badge } from "flowbite-react";
import Spinner from "../spinner";
import TicketReplyThread from "./ticket-reply-thread";
import { TSticketSchema } from "../forms/schema/ticket";
import ActionButton from "../action-button";

interface Props {
    ticketId: string;
    api?: string;
    redirect?: string;
}

const TicketView: FC<Props> = ({ ticketId, api = "/api/v1/tickets", redirect = "/tickets" }) => {
    const getTicket = async (): Promise<TSticketSchema> => {
        const response = await getData(`${api}/${ticketId}`);
        return response?.data;
    };

    const {
        data: ticket,
        isLoading,
        isFetching,
    } = useQuery({
        queryKey: ["ticket", ticketId],
        queryFn: () => getTicket(),
        refetchOnWindowFocus: false,
    });

    const getPriorityColor = (priority: string) => {
        switch (priority) {
            case "high":
                return "failure";
            case "medium":
                return "warning";
            case "low":
                return "success";
            default:
                return "info";
        }
    };

    const getStatusColor = (status: string) => {
        switch (status) {
            case "open":
                return "info";
            case "in_progress":
                return "warning";
            case "resolved":
                return "success";
            case "closed":
                return "gray";
            default:
                return "info";
        }
    };

    if (isLoading || isFetching) {
        return (
            <div className="relative">
                <div className="grid fixed left-2/4 top-1/2 z-50">
                    <Spinner size="xl" color="purple" />
                </div>
            </div>
        );
    }

    return (
        <div className="p-4">
            <div className="bg-white mb-6">
                <div className="flex justify-between items-start mb-4">
                    <div>
                        <h1 className="text-2xl font-bold mb-2">Ticket #{ticket?.ticketId}</h1>
                        <div className="flex gap-2 mb-4">
                            <Badge color={getPriorityColor(ticket?.priority)}>
                                {ticket?.priority}
                            </Badge>
                            <Badge color={getStatusColor(ticket?.status)}>
                                {ticket?.status.replace("_", " ")}
                            </Badge>
                        </div>
                    </div>
                    <div>
                        <ActionButton href={redirect} type="back" />
                    </div>
                </div>

                <div className="grid grid-cols-2 gap-4 mb-6">
                    <div>
                        <h3 className="font-semibold mb-2">Client:</h3>
                        <p>Name: {ticket?.client?.name}</p>
                        <p>Phone: {ticket?.client?.phone}</p>
                        {ticket?.client?.current_address && (
                            <p>Address: {ticket?.client?.current_address}</p>
                        )}
                    </div>
                    <div>
                        <h3 className="font-semibold mb-2">Information</h3>
                        {ticket.tag?.map((tag) => (
                            <Badge className="inline-block m-1" size={"sm"} color={"gray"} key={tag.id}>{tag.name}</Badge>
                        ))}
                        <p>Assigned To: {ticket?.staff?.name || 'Not Assigned'}</p>
                    </div>
                </div>

                <div className="mb-6">
                    <h3 className="font-semibold mb-2">Message</h3>
                    <div className="bg-gray-50 p-4 rounded-lg">
                        <p>{ticket?.message}</p>
                    </div>
                </div>

                <div>
                    <TicketReplyThread ticketId={ticketId} />
                </div>
            </div>
        </div>
    );
};

export default TicketView;