import { getTranslations } from "next-intl/server";
import { Bell, ShoppingBag, Tag, Shield } from "lucide-react";

export async function generateMetadata({
    params,
}: {
    params: Promise<{ locale: string }>;
}) {
    const { locale } = await params;
    const t = await getTranslations({ locale, namespace: "user-profile" });
    return {
        title: t("notifications") || "Notifications",
    };
}

export default async function NotificationsPage() {
    const t = await getTranslations("profile");

    const categories = [
        {
            icon: ShoppingBag,
            title: t("notifications-order-updates"),
            description: t("notifications-order-updates-desc"),
        },
        {
            icon: Tag,
            title: t("notifications-promotions"),
            description: t("notifications-promotions-desc"),
        },
        {
            icon: Shield,
            title: t("notifications-account"),
            description: t("notifications-account-desc"),
        },
    ];

    return (
        <div className="bg-white dark:bg-surface-dark p-6 rounded-lg border border-gray-200 dark:border-gray-700 min-h-[400px]">
            {/* Header */}
            <div className="flex items-start gap-4 mb-6">
                <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-1">
                    <Bell className="w-5 h-5 text-primary" />
                </div>
                <div>
                    <h2 className="text-2xl font-bold dark:text-white">{t("notifications")}</h2>
                    <p className="text-gray-500 dark:text-gray-400 mt-1 text-sm">
                        {t("notifications-subtitle")}
                    </p>
                </div>
            </div>

            {/* Notification Categories */}
            <div className="space-y-4 mb-8">
                {categories.map((cat) => (
                    <div
                        key={cat.title}
                        className="flex items-start gap-4 p-4 rounded-xl border border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50"
                    >
                        <div className="w-9 h-9 rounded-lg bg-white dark:bg-gray-700 flex items-center justify-center flex-shrink-0 shadow-sm">
                            <cat.icon className="w-4 h-4 text-gray-600 dark:text-gray-300" />
                        </div>
                        <div className="min-w-0">
                            <p className="font-semibold text-sm text-gray-900 dark:text-white">{cat.title}</p>
                            <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{cat.description}</p>
                        </div>
                    </div>
                ))}
            </div>

            {/* No notifications state */}
            <div className="text-center py-8 border-t border-gray-100 dark:border-gray-700">
                <Bell className="w-10 h-10 text-gray-200 dark:text-gray-600 mx-auto mb-3" />
                <p className="text-gray-400 dark:text-gray-500 text-sm">{t("no-notifications")}</p>
            </div>
        </div>
    );
}