import { notFound } from 'next/navigation';
import { getLeadForReview } from '@/lib/funnel/public-queries';
import { enviarOpinion } from '../actions';
import OpinionForm from '@/components/funnel/OpinionForm';
import TenantBrand from '@/components/funnel/TenantBrand';

export const dynamic = 'force-dynamic';

export default async function OpinionPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const data = await getLeadForReview(id);
  if (!data || !data.tenant) notFound();

  const { lead, tenant, yaEnviado } = data;

  return (
    <>
      <TenantBrand
        nombreEmpresa={tenant.nombreEmpresa}
        logoUrl={tenant.logoUrl}
        subtitle="Tu opinión"
      />
      <div className="container py-10 max-w-2xl flex flex-col gap-6">
        <div className="flex flex-col gap-2">
          <h1 className="text-2xl font-black tracking-tight text-black">
            {lead.nombre.split(' ')[0]}, ¿qué tal fue tu reforma con {tenant.nombreEmpresa}?
          </h1>
          <p className="text-sm text-gray-500 leading-relaxed">
            Tu opinión nos ayuda muchísimo. Cuéntanos cómo fue y, si quieres, sube alguna foto del
            resultado.
          </p>
        </div>

        {yaEnviado ? (
          <div className="bg-white border border-gray-200 rounded-xl p-8 text-center flex flex-col gap-3">
            <span className="text-4xl" aria-hidden="true">
              ✅
            </span>
            <h2 className="text-xl font-black text-black">Ya hemos recibido tu opinión</h2>
            <p className="text-sm text-gray-500">¡Gracias por tomarte el tiempo!</p>
          </div>
        ) : (
          <div className="bg-white border border-gray-200 rounded-xl p-6 md:p-8 shadow-sm">
            <OpinionForm action={enviarOpinion.bind(null, id)} nombreCliente={lead.nombre} />
          </div>
        )}
      </div>
    </>
  );
}
