import type { Metadata } from "next";
import { requireUser } from "@/lib/auth";
import { prisma } from "@/lib/db";
import { ImportForm } from "@/components/settings/Forms";

export const metadata: Metadata = { title: "Import und Export" };

export default async function DataPage() {
  const user = await requireUser("/einstellungen/daten");

  const [entries, watches] = await Promise.all([
    prisma.libraryEntry.count({ where: { userId: user.id, deletedAt: null } }),
    prisma.watch.count({ where: { userId: user.id } }),
  ]);

  return (
    <div className="space-y-6">
      <section className="fl-card p-5">
        <h2 className="text-lg font-semibold">Import</h2>
        <p className="mb-4 mt-1 text-sm text-[var(--fl-muted)]">
          Bringt Titel aus einem anderen Werkzeug mit.
        </p>
        <ImportForm />
      </section>

      <section className="fl-card p-5">
        <h2 className="text-lg font-semibold">Export</h2>
        <p className="mb-4 mt-1 text-sm text-[var(--fl-muted)]">
          Deine Daten gehören dir: {entries} Einträge und {watches} Sichtungen zum Mitnehmen.
        </p>
        <div className="flex flex-wrap gap-2">
          <a href="/api/v1/export?format=json" className="fl-btn fl-btn-primary" download>
            Als JSON
          </a>
          <a href="/api/v1/export?format=csv" className="fl-btn fl-btn-ghost" download>
            Als CSV
          </a>
        </div>
        <p className="mt-3 text-xs text-[var(--fl-faint)]">
          JSON enthält zusätzlich alle Sichtungen und Universen, CSV ist die schlanke Tabellenform
          für Tabellenkalkulationen.
        </p>
      </section>
    </div>
  );
}