import Link from "next/link";
import PopupFormClient, { type PopupInicial } from "@/app/popups/form-client";
import { createAdminClient } from "@/lib/supabase-admin";

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

const CAMPOS =
  "id,title,message,image_url,image_url_mobile,image_side,background_color,text_color,cta_label,cta_url,cta_new_tab,require_ack,ack_label,frequency,audience,active,start_at,end_at";

export default async function EditarPopupPage({ params }: PageProps) {
  const { id } = await params;
  const admin = createAdminClient();

  const [{ data: popup }, { data: vinculos }, { data: companies }] = await Promise.all([
    admin.from("system_popups").select(CAMPOS).eq("id", id).maybeSingle(),
    admin.from("system_popup_companies").select("company_id").eq("popup_id", id),
    admin.from("companies").select("id,name").order("name", { ascending: true }).limit(2000),
  ]);

  if (!popup) {
    return (
      <div className="min-h-screen bg-slate-50/50 p-6 sm:p-10 font-sans">
        <div className="mx-auto max-w-[880px] rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
          <h1 className="text-xl font-semibold text-slate-900">Popup não encontrado</h1>
          <p className="mt-2 text-sm text-slate-500">Ele pode ter sido excluído, ou o endereço está errado.</p>
          <div className="mt-6">
            <Link
              href="/popups"
              className="inline-flex h-11 items-center justify-center rounded-xl bg-slate-900 px-5 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800"
            >
              Voltar para a listagem
            </Link>
          </div>
        </div>
      </div>
    );
  }

  const inicial = {
    ...(popup as Omit<PopupInicial, "company_ids">),
    company_ids: (vinculos || []).map((linha) => String(linha.company_id)),
  } as PopupInicial;

  const empresas = (companies || []).map((linha) => ({ id: String(linha.id), name: String(linha.name || "Sem nome") }));

  return <PopupFormClient mode="edit" initial={inicial} empresas={empresas} />;
}