"use client"

import { FormEvent, useCallback, useEffect, useState } from "react";
import Swal from "sweetalert2";

interface MessageDetail {
    id: string;
    ticket_number: string;
    tenant: string;
    subject: string;
    category: string;
    priority: string;
    status: string;
    message: Message[];
}

interface Message {
    sender: string;
    message: string;
    created_at: string;
}

export default function ReadMessage({
    message_id
}:{
    message_id: string;
}) {
    const [messageDetail, setMessageDetail] = useState<MessageDetail | null>(null);
    const [loadingMessage, setLoadingMessage] = useState(true);
    const [submitting, setSubmitting] = useState(false);

    const loadMessage = useCallback(async () => {
        if (!message_id) { 
            return; 
        }

        try {
            setLoadingMessage(true);
            const response = await fetch(`/api/support/${message_id}`, {
                method: "GET",
                cache: "no-store",
            });

            const result = await response.json();

            if (!response.ok) {
                throw new Error(
                    result.message || "Failed to fetch tenant"
                );
            }

            const data = result.data;

            setMessageDetail(data);
        } catch (error) {
            console.error("Failed to load tenant:", error);

            Swal.fire({
                icon: "error",
                title: "Failed",
                text:
                    error instanceof Error
                        ? error.message
                        : "Failed to load tenant",
            });
        } finally {
            setLoadingMessage(false);
        }
    }, [message_id])

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

    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const form = e.currentTarget;
        const formData = new FormData(form);
        const message = String(formData.get("message") || "").trim();

        if (!message) { 
            Swal.fire({ 
                icon: "warning", 
                title: "Message Required", 
                text: "Please type a message first.", 
            }); 
            return; 
        }

        setSubmitting(true);

        Swal.fire({
            title: "Replying Ticket...",
            text: "Please wait",
            allowOutsideClick: false,
            didOpen: () => {
            Swal.showLoading();
            },
        });

        try {
            const response = await fetch(`/api/support/${message_id}/reply`, {
                method: "POST",
                headers: { 
                    "Content-Type": "application/json", 
                }, 
                body: JSON.stringify({ 
                    message, 
                }),
            });

            const data = await response.json();
            Swal.close();

            if (!response.ok) {
                Swal.fire({
                    icon: "error",
                    title: "Failed",
                    text: data.msg || "Something went wrong",
                });
                return
            }

            form.reset();
            await loadMessage();
        } catch (error) {
            console.log("Create tenant error:", error);
            Swal.fire({
                icon: "error",
                title: "Error",
                text: "Something went wrong",
            });
        } finally {
            setSubmitting(false);
        }
    }

    const getStatusTicket = (status?: string) => {
        switch (status?.toLowerCase()) {
            case "open":
                return "text-green";
            case "in_progress":
                return "text-blue";
            case "waiting_customer":
                return "text-yellow";
            case "resolved":
                return "text-default";
            case "closed":
                return "text-default";
            default:
                return "text-green";
        }
    };

    const getPriorityTicket = (status?: string) => {
        switch (status?.toLowerCase()) {
            case "low":
                return "text-green";
            case "medium":
                return "text-yellow";
            case "high":
                return "text-orange";
            case "urgent":
                return "text-red";
        }
    };
    return (
        <>
        <div className="row g-0 flex-fill" style={{ minHeight: 0, }}>
            <div className="col-12 col-lg-5 col-xl-3 border-end d-flex flex-column">
                <div className="card-header d-none d-md-block">
                    <h4>Ticket No : {messageDetail?.ticket_number}</h4>
                </div>
                <div className="card-body p-0 scrollable flex-fill p-3">
                    <table className="table table-sm table-borderless">
                        <tbody>
                            <tr>
                                <td>Subject</td>
                                <td className="fw-medium text-end">{messageDetail?.subject}</td>
                            </tr>
                            <tr>
                                <td>Tenant</td>
                                <td className="w-1 fw-medium text-end">{messageDetail?.tenant}</td>
                            </tr>
                            <tr>
                                <td>Category</td>
                                <td className="w-1 fw-medium text-end">{messageDetail?.category}</td>
                            </tr>
                            <tr>
                                <td>Priority</td>
                                <td className="w-1 fw-medium text-end">
                                    <span className={`badge badge-outline ${getPriorityTicket(messageDetail?.priority)}`}>{messageDetail?.priority}</span>
                                </td>
                            </tr>
                            <tr>
                                <td>Status</td>
                                <td className="w-1 fw-medium text-end">
                                    <span className={`badge badge-outline ${getStatusTicket(messageDetail?.status)}`}>{messageDetail?.status}</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div className="col-9 border-end d-flex flex-column" style={{ height: "100%", minHeight: 0,}}>
                <div className="card-body" style={{ height: "450px", minHeight: 0, overflowY: "auto", overflowX: "hidden",}}>
                    <div className="chat">
                        <div className="chat-bubbles">
                            {messageDetail?.message.map((data, i) => (
                                <div className="chat-item" key={i}>
                                    <div className={`row align-items-end ${data.sender === 'ADMIN' ? 'justify-content-end' : ''}`}>
                                        {data.sender !== 'ADMIN' && (
                                            <div className="col-auto">
                                                <span className="avatar avatar-1" style={{ backgroundImage: "url('/static/tenant.jpg')" }}/>
                                            </div>
                                        )}
                                        <div className="col col-lg-6">
                                            <div className={`chat-bubble ${data.sender === 'ADMIN' ? 'chat-bubble-me' : ''}`}>
                                                <div className="chat-bubble-title">
                                                    <div className="row">
                                                        <div className="col chat-bubble-author">{data.sender}</div>
                                                        <div className="col-auto chat-bubble-date">{data.created_at}</div>
                                                    </div>
                                                </div>
                                                <div className="chat-bubble-body">
                                                    <p>{data.message}</p>
                                                </div>
                                            </div>
                                        </div>
                                        {data.sender === 'ADMIN' && (
                                            <div className="col-auto">
                                                <span className="avatar avatar-1" style={{ backgroundImage: "url('/static/favicon.ico')" }}/>
                                            </div>
                                        )}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
                <div className="card-footer flex-shrink-0">
                    <form className="space-y" onSubmit={handleSubmit}>
                        <div className="row">
                            <div className="col-11">
                                <textarea name="message" className="form-control" autoComplete="off" placeholder="Type message" rows={3} disabled={submitting}/>
                            </div>
                            <div className="col-1">
                                <button type="submit" className="btn btn-outline btn-success align-items-center" disabled={submitting}>
                                    {submitting ? "Sending..." : "Reply"}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </>
    )
}