import { prisma } from "@/core/db/prisma";
import { verifySession } from "@/core/security/session";
import { Link, redirect } from "@/i18n/routing";
import { getLocale } from "next-intl/server";
import { ArrowLeft, Mail, MailOpen, Inbox } from "lucide-react";
import { MarkReadButton, DeleteMessageButton } from "@/features/messages/message-actions";

export default async function AdminInboxPage() {
  const session = await verifySession();
  const locale = await getLocale();

  if (!session) {
    redirect({ href: "/admin/login", locale });
  }

  const messages = await prisma.message.findMany({
    orderBy: { createdAt: "desc" },
  });

  const unreadCount = messages.filter((m) => !m.isRead).length;

  return (
    <div className="min-h-screen bg-muted/10 p-6 lg:p-12">
      <div className="max-w-5xl mx-auto">
        <div className="flex items-center justify-between mb-8">
          <div className="flex items-center gap-4">
            <Link
              href="/admin/dashboard"
              className="p-2 rounded-full hover:bg-muted text-muted-foreground transition-colors"
            >
              <ArrowLeft size={20} />
            </Link>
            <div>
              <h1 className="text-3xl font-bold tracking-tight flex items-center gap-3">
                Inbox
                {unreadCount > 0 && (
                  <span className="text-sm font-mono font-bold px-2.5 py-1 rounded-full bg-blue-500 text-white">
                    {unreadCount} baru
                  </span>
                )}
              </h1>
              <p className="text-sm text-muted-foreground mt-1">
                Pesan masuk dari pengunjung portfolio.
              </p>
            </div>
          </div>
        </div>

        {messages.length === 0 ? (
          <div className="p-12 text-center flex flex-col items-center bg-card rounded-2xl border border-border/50">
            <Inbox size={48} className="text-muted-foreground/40 mb-4" />
            <h3 className="text-lg font-bold">Inbox kosong</h3>
            <p className="text-sm text-muted-foreground">Belum ada pesan masuk.</p>
          </div>
        ) : (
          <div className="space-y-3">
            {messages.map((message) => (
              <div
                key={message.id}
                className={`relative p-5 rounded-2xl border transition-all ${
                  message.isRead
                    ? "bg-card border-border/50 opacity-70"
                    : "bg-card border-blue-500/30 shadow-sm shadow-blue-500/5"
                }`}
              >
                {/* Unread indicator */}
                {!message.isRead && (
                  <span className="absolute top-4 left-4 w-2 h-2 rounded-full bg-blue-500" />
                )}

                <div className="flex items-start justify-between gap-4 pl-4">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-3 mb-1">
                      <div
                        className={`p-1.5 rounded-lg ${
                          message.isRead
                            ? "text-muted-foreground bg-muted"
                            : "text-blue-500 bg-blue-500/10"
                        }`}
                      >
                        {message.isRead ? <MailOpen size={14} /> : <Mail size={14} />}
                      </div>
                      <span className="font-bold text-sm">{message.senderName}</span>
                      <span className="text-xs text-muted-foreground font-mono">
                        {message.senderEmail}
                      </span>
                    </div>
                    <p className="text-sm text-muted-foreground leading-relaxed line-clamp-3 pl-9">
                      {message.content}
                    </p>
                    <p className="text-[11px] text-muted-foreground/60 font-mono mt-2 pl-9">
                      {new Date(message.createdAt).toLocaleString("id-ID")}
                    </p>
                  </div>

                  <div className="flex items-center gap-1 flex-shrink-0">
                    {!message.isRead && <MarkReadButton id={message.id} />}
                    <DeleteMessageButton id={message.id} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
