import { motion } from "motion/react";
import { useEffect, useRef } from "react";
import { usePageTracking } from "../../hooks/usePageTracking";
import { useInbox } from "../context/InboxContext";

const cardStyle = {
  backgroundImage:
    "linear-gradient(180deg, rgba(46, 27, 61, 0.9) 0%, rgba(35, 24, 62, 0.94) 100%), linear-gradient(120deg, #7c3aed 0%, #f97316 58%, #facc15 100%)",
  backgroundOrigin: "border-box",
  backgroundClip: "padding-box, border-box",
  border: "0.5px solid transparent",
  boxShadow:
    "0 -5px 16px rgba(7, 0, 18, 0.35), 0 8px 14px rgba(5, 2, 12, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12)",
} as const;

export function MessagesPage() {
  usePageTracking("پیام‌ها");
  const { messages, loading, markMessagesAsRead } = useInbox();
  const hasMarkedAsReadRef = useRef(false);

  useEffect(() => {
    if (!loading && messages.length > 0 && !hasMarkedAsReadRef.current) {
      const unreadStageIds = messages
        .filter((msg) => msg.status === "خوانده نشده")
        .map((msg) => String(msg.stageID));

      if (unreadStageIds.length > 0) {
        hasMarkedAsReadRef.current = true;
        markMessagesAsRead(unreadStageIds);
      }
    }
  }, [loading, messages, markMessagesAsRead]);

  return (
    <div className="flex h-full min-h-0 flex-col pb-3 pt-4">
      <div className="min-h-0 flex-1 overflow-y-auto px-4">
        {loading ? (
          <div className="flex h-full items-center justify-center">
            <div className="text-center">
              <div className="mx-auto mb-3 h-10 w-10 animate-spin rounded-full border-4 border-[#ffd6f0]/30 border-t-[#ff79cf]" />
              <p className="text-sm font-bold text-[#FBE7F5]">در حال بارگذاری پیام‌ها...</p>
            </div>
          </div>
        ) : messages.length === 0 ? (
          <div className="flex h-full items-center justify-center">
            <p className="text-sm font-bold text-[#FBE7F5]/88">پیامی وجود ندارد</p>
          </div>
        ) : (
          <div className="space-y-3" dir="rtl">
            {messages.map((message, index) => {
              const isUnread = message.status === "خوانده نشده";
              return (
                <motion.article
                  key={`${message.user_id}-${index}`}
                  initial={{ opacity: 0, y: 12 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: Math.min(index * 0.05, 0.25), duration: 0.26 }}
                  className="relative overflow-hidden rounded-2xl px-4 py-3"
                  style={cardStyle}
                >
                  <span
                    className="absolute inset-y-0 right-0 w-1.5"
                    style={{
                      background: isUnread
                        ? "linear-gradient(180deg, rgba(255,97,152,0.95) 0%, rgba(234,71,170,0.88) 100%)"
                        : "linear-gradient(180deg, rgba(148,163,184,0.35) 0%, rgba(100,116,139,0.28) 100%)",
                    }}
                  />

                  <h3 className="pr-3 text-sm font-extrabold text-[#FBE7F5]">{message.title}</h3>
                  <p className="mt-1.5 pr-3 text-xs leading-6 text-[#F2DFF0]/88">{message.Message}</p>
                </motion.article>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}
