"use client";

import { useEffect, useState } from "react";

interface ContactMessage {
  id: string;
  name: string;
  email?: string;
  phone?: string;
  subject?: string;
  message: string;
  isRead: boolean;
  createdAt: string;
  board?: { id: string; name: string } | null;
}

export default function AdminMessages() {
  const [messages, setMessages] = useState<ContactMessage[]>([]);

  useEffect(() => {
    fetch("/api/contact", {
      headers: { Authorization: `Bearer ${localStorage.getItem("auth_token")}` },
    })
      .then((r) => r.json())
      .then(setMessages)
      .catch(() => {});
  }, []);

  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-900 mb-6">پیام‌های دریافتی</h1>

      <div className="space-y-3">
        {messages.map((m) => (
          <div key={m.id} className={`rounded-xl border bg-white p-5 ${!m.isRead ? "border-[#2563EB] bg-blue-50/20" : ""}`}>
            <div className="flex items-center justify-between mb-2">
              <div>
                <span className="font-medium text-gray-900">{m.name}</span>
                {m.subject && <span className="text-gray-500 mr-2">- {m.subject}</span>}
                {m.board && (
                  <span className="text-[10px] bg-blue-50 text-[#2563EB] px-2 py-0.5 rounded-full mr-2 font-medium">
                    {m.board.name}
                  </span>
                )}
              </div>
              <div className="text-xs text-gray-400">
                {new Date(m.createdAt).toLocaleDateString("fa-IR")}
              </div>
            </div>
            {m.email && <div className="text-xs text-gray-500 mb-1">ایمیل: {m.email}</div>}
            {m.phone && <div className="text-xs text-gray-500 mb-1" dir="ltr">تلفن: {m.phone}</div>}
            <p className="text-sm text-gray-600 mt-2">{m.message}</p>
          </div>
        ))}
        {messages.length === 0 && (
          <div className="text-center py-12 bg-white rounded-xl border">
            <p className="text-gray-500">پیامی دریافت نشده است</p>
          </div>
        )}
      </div>
    </div>
  );
}