import { redirect } from "next/navigation";
import AdminShell from "@/components/admin/AdminShell";
import StatusSelect from "@/components/admin/StatusSelect";
import { requireAdminSession } from "@/lib/admin/auth";
import { getContactInquiries } from "@/lib/admin/store";

export default async function AdminContactsPage() {
  if (!await requireAdminSession()) redirect("/admin/login");
  const inquiries = await getContactInquiries();

  return (
    <AdminShell>
      <div className="admin-page-head">
        <p className="eyebrow">Anfragen</p>
        <h1>Kontaktanfragen</h1>
      </div>
      <section className="admin-card">
        <table className="admin-table">
          <thead><tr><th>Name</th><th>E-Mail</th><th>Betreff</th><th>Datum</th><th>Status</th></tr></thead>
          <tbody>
            {inquiries.map((item) => (
              <tr key={item.id}>
                <td>{item.name}</td>
                <td><a href={`mailto:${item.email}`}>{item.email}</a></td>
                <td>{item.subject}</td>
                <td>{new Date(item.createdAt).toLocaleString("de-DE")}</td>
                <td><StatusSelect id={item.id} type="contact" status={item.status} /></td>
              </tr>
            ))}
            {inquiries.length === 0 && <tr><td colSpan={5}>Noch keine Kontaktanfragen vorhanden.</td></tr>}
          </tbody>
        </table>
      </section>
      <section className="admin-card">
        <h2>Detailansicht</h2>
        <div className="admin-detail-grid">
          {inquiries.slice(0, 6).map((item) => (
            <article key={item.id} className="admin-detail">
              <h3>{item.name}</h3>
              <p><strong>{item.subject}</strong></p>
              <p>{item.message}</p>
            </article>
          ))}
        </div>
      </section>
    </AdminShell>
  );
}