import { XIcon } from "lucide-react";
import Link from "next/link";
import { ResourceNotFoundError } from "@formbricks/types/errors";
import { ConnectWithFormbricks } from "@/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks";
import { getEnvironment } from "@/lib/environment/service";
import { getPublicDomain } from "@/lib/getPublicUrl";
import { getProjectByEnvironmentId } from "@/lib/project/service";
import { getTranslate } from "@/lingodotdev/server";
import { Button } from "@/modules/ui/components/button";
import { Header } from "@/modules/ui/components/header";

interface ConnectPageProps {
  params: Promise<{
    environmentId: string;
  }>;
}

const Page = async (props: ConnectPageProps) => {
  const params = await props.params;
  const t = await getTranslate();
  const environment = await getEnvironment(params.environmentId);

  if (!environment) {
    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
  }

  const project = await getProjectByEnvironmentId(environment.id);
  if (!project) {
    throw new ResourceNotFoundError(t("common.workspace"), null);
  }

  const channel = project.config.channel || null;

  const publicDomain = getPublicDomain();

  return (
    <div className="flex min-h-full flex-col items-center justify-center py-10">
      <Header title={t("environments.connect.headline")} subtitle={t("environments.connect.subtitle")} />
      <div className="space-y-4 text-center">
        <p className="text-4xl font-medium text-slate-800"></p>
        <p className="text-sm text-slate-500"></p>
      </div>
      <ConnectWithFormbricks
        environment={environment}
        publicDomain={publicDomain}
        appSetupCompleted={environment.appSetupCompleted}
        channel={channel}
      />
      <Button
        className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
        variant="ghost"
        asChild>
        <Link href={`/environments/${environment.id}`}>
          <XIcon className="h-7 w-7" strokeWidth={1.5} />
        </Link>
      </Button>
    </div>
  );
};

export default Page;
