import { prisma, getOrCreateSettings } from "@/lib/db";
import { sanitizeForDisplay, safeUrl } from "@/lib/sanitize";
import { TIERS, formatUSD } from "@/lib/tiers";

export const dynamic = "force-dynamic";
export const metadata = { title: "Donors — PIFF" };

export default async function DonorsPage() {
  const [donations, settings] = await Promise.all([
    prisma.donation.findMany({
      where: { status: "APPROVED" },
      orderBy: { approvedAt: "desc" },
    }),
    getOrCreateSettings(),
  ]);

  const goal = settings.goalCents || 25_000_000;
  const raised = settings.totalRaisedCents || 0;
  const pct = Math.min(100, (raised / goal) * 100);

  return (
    <section className="mx-auto max-w-3xl px-6 py-16">
      <h1 className="font-display text-4xl font-bold text-text">
        Wall of donors
      </h1>

      <div className="mt-8 rounded-2xl border border-border bg-surface p-6">
        <div className="flex items-baseline justify-between">
          <div>
            <div className="text-xs uppercase tracking-wider text-textmuted">
              Raised
            </div>
            <div className="font-display text-3xl font-bold text-text">
              {formatUSD(raised)}
            </div>
          </div>
          <div className="text-right">
            <div className="text-xs uppercase tracking-wider text-textmuted">
              Goal
            </div>
            <div className="font-display text-2xl text-textmuted">
              {formatUSD(goal)}
            </div>
          </div>
        </div>
        <div className="mt-4 h-2 overflow-hidden rounded-full bg-border">
          <div
            className="h-full bg-primary transition-all"
            style={{ width: `${pct}%` }}
          />
        </div>
        <div className="mt-2 text-xs text-textmuted">
          {donations.length} approved donations toward the first home.
        </div>
      </div>

      <ul className="mt-12 divide-y divide-border">
        {donations.length === 0 && (
          <li className="py-10 text-center text-textmuted">
            No approved donations yet. Be the first.
          </li>
        )}
        {donations.map((d) => {
          const tier = TIERS[d.tierId as keyof typeof TIERS];
          const url = safeUrl(d.websiteUrl);
          const display = d.isAnonymous ? "Anonymous" : d.donorName || "Anonymous";
          return (
            <li key={d.id} className="py-5">
              <div className="flex items-baseline justify-between gap-4">
                <div className="flex-1">
                  <div className="font-medium text-text">
                    {url && !d.isAnonymous ? (
                      <a
                        href={url}
                        target="_blank"
                        rel="nofollow noopener noreferrer"
                        className="text-primary underline-offset-2 hover:underline"
                      >
                        {display}
                      </a>
                    ) : (
                      display
                    )}
                  </div>
                  <div className="mt-1 italic text-textmuted">
                    &ldquo;{sanitizeForDisplay(d.message)}&rdquo;
                  </div>
                  <div className="mt-1 text-xs text-textmuted">
                    {tier?.label ?? d.tierId} ·{" "}
                    {new Date(d.approvedAt ?? d.createdAt).toLocaleDateString()}
                  </div>
                </div>
                <div className="font-display text-lg font-semibold text-primary">
                  {formatUSD(d.amountCents)}
                </div>
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}