import { createFileRoute, Outlet, useMatches } from "@tanstack/react-router";
import { useState } from "react";
import { properties } from "@/lib/properties";
import { PropertyCard } from "@/components/property-card";

export const Route = createFileRoute("/properties")({
  component: PropertiesLayout,
  head: () => ({
    meta: [
      { title: "Dubai Properties for Sale — Apartments, Villas & Off-Plan | Zamelect" },
      {
        name: "description",
        content:
          "Browse verified Dubai properties for sale: luxury apartments, villas, penthouses and off-plan launches across Marina, Downtown, Palm Jumeirah, Business Bay and JVC.",
      },
      { property: "og:title", content: "Dubai Properties — Zamelect" },
      { property: "og:description", content: "Verified Dubai listings for buyers and investors." },
      { property: "og:url", content: "/properties" },
    ],
    links: [{ rel: "canonical", href: "/properties" }],
  }),
});

function PropertiesLayout() {
  const matches = useMatches();
  const isChild = matches.some((m) => m.routeId === "/properties/$slug");
  if (isChild) return <Outlet />;
  return <PropertiesIndex />;
}

function PropertiesIndex() {
  const [filter, setFilter] = useState<"All" | "Off-Plan" | "Ready">("All");
  const shown = filter === "All" ? properties : properties.filter((p) => p.status === filter);

  return (
    <div className="pt-32 pb-24">
      <div className="container-luxe">
        <div className="max-w-2xl">
          <p className="text-[0.7rem] uppercase tracking-[0.28em] text-gold">Properties</p>
          <h1 className="mt-3 font-display text-5xl font-semibold leading-tight sm:text-6xl">
            Dubai's finest, curated.
          </h1>
          <p className="mt-5 text-muted-foreground">
            A living selection of apartments, villas, penthouses and off-plan launches
            we've personally vetted across Dubai's premier communities.
          </p>
        </div>

        <div className="mt-10 flex flex-wrap gap-2 border-b border-border pb-4">
          {(["All", "Off-Plan", "Ready"] as const).map((f) => (
            <button
              key={f}
              onClick={() => setFilter(f)}
              className={`rounded-full px-5 py-2 text-sm font-medium transition ${
                filter === f
                  ? "bg-foreground text-background"
                  : "border border-border text-foreground/70 hover:text-foreground"
              }`}
            >
              {f}
            </button>
          ))}
          <span className="ml-auto self-center text-sm text-muted-foreground">
            {shown.length} properties
          </span>
        </div>

        <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {shown.map((p) => (
            <PropertyCard key={p.slug} property={p} />
          ))}
        </div>
      </div>
    </div>
  );
}