songs2vid/app/dashboard/settings/page.tsx

import Link from "next/link";
import { redirect } from "next/navigation";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { prisma } from "@/lib/db";
import { AccountPrivacyActions } from "@/components/AccountPrivacyActions";
import { DashboardShell } from "@/components/DashboardShell";
import { getUserApiKeyStatus } from "@/lib/api-keys";
import { getApiRateLimitStatus } from "@/lib/api-rate-limit";
import { ApiKeySettings } from "@/components/ApiKeySettings";

function InfoRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex justify-between gap-4">
      <dt className="text-gray-400">{label}</dt>
      <dd className="text-right text-white">{value}</dd>
    </div>
  );
}

export default async function SettingsPage() {
  const session = await getServerSession(authOptions);
  if (!session?.user?.email) redirect("/");

  const user = await prisma.user.findUnique({
    where: { email: session.user.email },
    include: { youtubeConnection: true },
  });
  if (!user) redirect("/");

  const [apiKeyStatus, apiRateLimit] = await Promise.all([
    getUserApiKeyStatus(user.id),
    getApiRateLimitStatus(user.id),
  ]);
  const youtube = user.youtubeConnection;
  const channelUrl = youtube ? `https://www.youtube.com/channel/${youtube.channelId}` : null;

  return (
    <DashboardShell channelTitle={youtube?.channelTitle}>
      <div className="mx-auto max-w-4xl px-6 py-8">
        <h1 className="mb-6 text-2xl font-bold text-white">Settings</h1>
        <div className="space-y-6">
          <section className="rounded-lg border border-gray-700 bg-surface-light p-6">
            <h2 className="mb-4 text-lg font-semibold text-white">Account</h2>
            <dl className="space-y-3 text-sm">
              <InfoRow label="Name" value={user.name || "Not set"} />
              <InfoRow label="Email" value={user.email} />
              <InfoRow label="Videos created" value={String(user.createdVideoCount)} />
            </dl>
          </section>

          <section className="rounded-lg border border-gray-700 bg-surface-light p-6">
            <h2 className="mb-4 text-lg font-semibold text-white">YouTube</h2>
            {youtube ? (
              <dl className="space-y-3 text-sm">
                <InfoRow label="Channel name" value={youtube.channelTitle} />
                <InfoRow label="Channel ID" value={youtube.channelId} />
              </dl>
            ) : (
              <p className="text-sm text-red-400">YouTube account not connected.</p>
            )}
            {channelUrl && (
              <a
                href={channelUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-4 inline-flex rounded bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent-hover"
              >
                Go to your channel
              </a>
            )}
            <p className="mt-4 text-sm text-gray-400">
              To refresh YouTube permissions,{" "}
              <Link href="/" className="text-accent hover:underline">sign out and sign in again</Link>.
            </p>
          </section>

          <section className="rounded-lg border border-gray-700 bg-surface-light p-6">
            <h2 className="mb-4 text-lg font-semibold text-white">API key</h2>
            <ApiKeySettings initialStatus={apiKeyStatus} initialRateLimit={apiRateLimit} />
          </section>

          <section className="rounded-lg border border-gray-700 bg-surface-light p-6">
            <h2 className="mb-2 text-lg font-semibold text-white">Account deletion &amp; data</h2>
            <p className="mb-4 text-sm text-gray-400">
              Request a copy of your data or permanently delete your account and uploads.
            </p>
            <AccountPrivacyActions email={user.email} />
          </section>
        </div>
      </div>
    </DashboardShell>
  );
}