"use client";

import { Suspense } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { AppShell } from "@/components/AppShell";
import { PropertyForm } from "@/components/PropertyForm";
import { useCan } from "@/lib/abilities";

export default function NuevaPropiedadPage() {
  return (
    <AppShell>
      <Suspense fallback={null}>
        <NuevaPropiedad />
      </Suspense>
    </AppShell>
  );
}

function NuevaPropiedad() {
  const allowed = useCan("property:create");
  const params = useSearchParams();
  const customerId = params.get("customerId") ?? undefined;
  const customerName = params.get("customerName") ?? undefined;

  return (
    <>
      <div className="page-head">
        <Link href="/servicios" className="back-link">← Propiedades</Link>
        <h1 className="page-title">Nueva propiedad</h1>
      </div>
      {allowed ? (
        <PropertyForm fixedCustomerId={customerId} fixedCustomerName={customerName} />
      ) : (
        <div className="state-box state-error">
          No tiene permisos para crear propiedades.
        </div>
      )}
    </>
  );
}
