import { Metadata } from "next";
import { notFound } from "next/navigation";
import { getTranslations } from "next-intl/server";
import React from "react";
import { createHelpers } from "@/lib/trpc/server";
import { ProfileEditor } from "@/components/dashboard/profile/profile-editor";
import { DashboardLayout, DashboardBreadcrump } from "@/components/layout/dashboard";
import { Routes } from "@/config/routes";

type Props = {
    params: Promise<{ id: string }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const { id } = await params;

    const helpers = await createHelpers();

    const profile = await helpers.profile.get.fetch({ id });

    if(!profile) {
        return {
            title: "Profile not found",
            description: "The requested profile could not be found."
        };
    }

    return {
        title: `Edit: ${profile.name || "Untitled Profile"}`,
        description: `Edit ${profile.name || "this profile"}`
    };
}

export default async function Page({ params }: Props) {
    const { id } = await params;

    const helpers = await createHelpers();
    const profile = await helpers.profile.get.fetch({ id });

    if(!profile) {
        notFound();
    }

    const t = await getTranslations();

    return (
        <DashboardLayout
          title={t("dashboard.profile.editor.update.title")}
          back={Routes.DASHBOARD.PROFILE_LIST}>
            <DashboardBreadcrump>
                <DashboardBreadcrump.Item href={Routes.DASHBOARD.PROFILE_LIST}>{t("dashboard.profile.list.title")}</DashboardBreadcrump.Item>
                <DashboardBreadcrump.Item active>{t("dashboard.profile.editor.update.title")}</DashboardBreadcrump.Item>
            </DashboardBreadcrump>

            <ProfileEditor
              mode="edit"
              id={profile.id}
              profile={profile} />
        </DashboardLayout>
    );
}