import { getTranslations, setRequestLocale } from "next-intl/server";
import { Link } from "@/i18n/navigation";
import { ArrowUpRight, Palette, Sparkles } from "lucide-react";

export default async function SystemSettingsPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);

  const t = await getTranslations("settings");

  return (
    <div className="space-y-6">
      <div className="relative overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--bg)]/50 p-5 sm:p-6">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_0%_0%,var(--accent-muted),transparent_55%)]" />
        <div className="relative">
          <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--bg-elevated)] px-2.5 py-1 text-[11px] font-medium text-[var(--text-muted)]">
            <Sparkles className="h-3.5 w-3.5 text-[var(--accent)]" />
            {t("overviewBadge")}
          </div>
          <h2 className="text-lg font-semibold tracking-tight sm:text-xl">{t("overviewTitle")}</h2>
          <p className="mt-1.5 max-w-xl text-sm leading-relaxed text-[var(--text-muted)]">
            {t("overviewBody")}
          </p>
        </div>
      </div>

      <div>
        <h3 className="mb-3 text-[11px] font-semibold uppercase tracking-widest text-[var(--text-faint)]">
          {t("sectionsLabel")}
        </h3>
        <div className="grid gap-3">
          <Link
            href="/dashboard/settings/branding"
            className="group flex items-center gap-4 rounded-2xl border border-[var(--border)] bg-[var(--bg)]/40 p-4 transition-colors hover:border-[var(--accent)]/35 hover:bg-[var(--bg-hover)]/30 sm:p-5"
          >
            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[var(--accent-muted)] text-[var(--accent)]">
              <Palette className="h-5 w-5" />
            </div>
            <div className="min-w-0 flex-1">
              <p className="text-sm font-semibold text-[var(--text)]">{t("nav.branding")}</p>
              <p className="mt-0.5 text-xs leading-relaxed text-[var(--text-muted)]">
                {t("brandingHint")}
              </p>
            </div>
            <span className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-[var(--text-faint)] transition-colors group-hover:bg-[var(--accent-muted)] group-hover:text-[var(--accent)]">
              <ArrowUpRight className="h-4 w-4" />
            </span>
          </Link>
        </div>
      </div>
    </div>
  );
}