import React from "react";
import { useAppSelector } from "../../hooks/hooks";
import type { MessageListProps } from "../../types";
import { formatDate, formatTime } from "../../utils/datetime";
import styles from "./MessageList.module.scss";

export function MessageList({
    messages,
    error,
}: MessageListProps) {

    const { sessionExpired } = useAppSelector((s) => s.auth);

    if (error) {
        return <div className={styles.error}>{error}</div>;
    }

    let lastDate: string | null = null;
    return (
        <>
            {/* 1. Show the banner only once at the top of the container */}
            {sessionExpired && (
                <div className={styles.sessionExpired}>
                    Your chat session has expired. Please refresh the page to start a new chat.
                </div>
            )}

            {/* 2. Handle Empty State */}
            {!messages.length ? (
                <div className={styles.infoText}>No messages.</div>
            ) : (
                /* 3. Handle Message List */
                messages.map((m) => {
                    const date = formatDate(m.created_at);
                    const time = formatTime(m.created_at);
                    const showDate = date && date !== lastDate;
                    lastDate = date;

                    const messageClass =
                        styles[`message_${m.sender}`] ?? styles.message ?? "";

                    return (
                        <React.Fragment key={m.id}>
                            {showDate && (
                                <div className={styles.dateSeparator}>{date}</div>
                            )}

                            <div className={messageClass}>
                                <div className={styles.userWithContent}>
                                    <div className={styles.content}>
                                        <div className={styles.meta}>
                                            <span className={styles.time}>{time}</span>
                                            <div className={styles.sender}>{m.sender}</div>
                                        </div>
                                        {m.content}</div>
                                </div>
                            </div>
                        </React.Fragment>
                    );
                })
            )}
        </>
    );
}