import { db } from "@/lib/db"
import { Button } from "@/components/ui/button"
import { deleteSubscriber } from "./actions"

export const metadata = { title: "Admin — Newsletter" }

export default async function AdminNewsletterPage() {
  const subscribers = await db.newsletter.findMany({ orderBy: { createdAt: "desc" } })
  const emails = subscribers.map((s) => s.email).join(", ")

  return (
    <div>
      <div className="flex items-center justify-between mb-8">
        <h1 className="text-2xl font-heading font-bold uppercase tracking-tight text-[var(--text)]">
          Newsletter
        </h1>
        <p className="font-mono text-xs uppercase tracking-widest text-[var(--text-muted)]">
          {subscribers.length} abonné{subscribers.length > 1 ? "s" : ""}
        </p>
      </div>

      <div className="border border-[var(--border)] bg-[var(--surface)]">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-[var(--border)]">
              {["Email", "Inscrit le"].map((h) => (
                <th
                  key={h}
                  className="text-left px-4 py-3 font-mono text-xs uppercase tracking-widest text-[var(--text-muted)]"
                >
                  {h}
                </th>
              ))}
              <th className="px-4 py-3" />
            </tr>
          </thead>
          <tbody className="divide-y divide-[var(--border)]">
            {subscribers.map((s) => {
              const deleteWithId = deleteSubscriber.bind(null, s.id)
              return (
                <tr key={s.id} className="hover:bg-[var(--surface-raised)] transition-colors">
                  <td className="px-4 py-4 text-[var(--text)]">{s.email}</td>
                  <td className="px-4 py-4 text-[var(--text-secondary)]">
                    {new Date(s.createdAt).toLocaleDateString("fr-BE")}
                  </td>
                  <td className="px-4 py-4 text-right">
                    <form action={deleteWithId}>
                      <Button type="submit" variant="ghost" size="sm">
                        Retirer
                      </Button>
                    </form>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
        {subscribers.length === 0 && (
          <div className="py-16 text-center text-[var(--text-muted)]">Aucun abonné pour le moment.</div>
        )}
      </div>

      {subscribers.length > 0 && (
        <div className="mt-8 border border-[var(--border)] bg-[var(--surface)] p-6">
          <p className="font-mono text-xs uppercase tracking-widest text-[var(--text-muted)] mb-3">
            Copier toutes les adresses
          </p>
          <textarea
            readOnly
            defaultValue={emails}
            className="w-full h-24 border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-xs font-mono text-[var(--text-secondary)] resize-none"
          />
        </div>
      )}
    </div>
  )
}