import Link from "next/link";
import { StatusCard } from "@/components/admin/dashboard";
import { deleteArticle } from "@/actions/admin-articles";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

export default async function AdminArticles({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const { error } = await searchParams;
  const articles = await prisma.websiteArticles
    .findMany({
      orderBy: { createdAt: "desc" },
      select: { id: true, title: true, slug: true, createdAt: true },
      take: 50,
    })
    .catch(() => []);

  const latest = articles[0]?.createdAt
    ? articles[0].createdAt.toISOString().slice(0, 10)
    : "—";

  return (
    <main>
      <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
        <h1 style={{ flex: 1 }}>Articles</h1>
        <Link href="/admin/articles/new" className="btn btn-primary">
          + New article
        </Link>
      </div>
      <p className="muted" style={{ marginTop: "-0.4rem" }}>
        News articles (<code>website_articles</code>) shown on the public site. 50 most recent.
      </p>

      {error ? (
        <p className="muted" style={{ marginBottom: "1rem", color: "#dc2626" }}>
          Error: {error}
        </p>
      ) : null}

      <div className="admin-stats">
        <StatusCard label="Articles shown" value={articles.length} icon="📰" />
        <StatusCard label="Latest" value={latest} hint="most recent post" icon="🕒" />
      </div>

      <section className="admin-section">
        <h2>Recent articles</h2>
        {articles.length === 0 ? (
          <p className="muted">No articles yet.</p>
        ) : (
          <table>
            <thead>
              <tr>
                <th>Title</th>
                <th>Slug</th>
                <th>Created</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {articles.map((a) => (
                <tr key={String(a.id)}>
                  <td>
                    <Link href={`/admin/articles/${a.id}`} style={{ color: "var(--link-color)" }}>
                      {a.title}
                    </Link>
                  </td>
                  <td className="muted">
                    <code>{a.slug}</code>
                  </td>
                  <td className="muted" style={{ whiteSpace: "nowrap" }}>
                    {a.createdAt ? a.createdAt.toISOString().slice(0, 10) : "—"}
                  </td>
                  <td>
                    <div style={{ display: "flex", gap: "0.5rem" }}>
                      <Link href={`/admin/articles/${a.id}`} className="btn btn-primary" style={{ fontSize: "0.8rem", padding: "0.3rem 0.6rem" }}>
                        Edit
                      </Link>
                      <form action={deleteArticle} style={{ margin: 0 }}>
                        <input type="hidden" name="id" value={String(a.id)} />
                        <button
                          type="submit"
                          className="btn btn-danger"
                          style={{ fontSize: "0.8rem", padding: "0.3rem 0.6rem" }}
                        >
                          Delete
                        </button>
                      </form>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>
    </main>
  );
}