import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { createServerSupabase } from "@chowrest/db/server";
import { ListingsView } from "../../_listings-view";

export const dynamic = "force-dynamic";

const SITE = process.env.NEXT_PUBLIC_SITE_URL ?? "https://chowrest-property.com";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}): Promise<Metadata> {
  const { id } = await params;
  const supabase = await createServerSupabase();
  const { data } = await supabase
    .from("profiles")
    .select("full_name")
    .eq("id", id)
    .maybeSingle();
  if (!data) return { title: "Agent" };
  return {
    title: `${data.full_name ?? "Agent"} — Chowrest Property`,
    alternates: { canonical: `${SITE}/agent/${id}` },
  };
}

export default async function AgentPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const supabase = await createServerSupabase();

  const [{ data: agent }, { data: listings }] = await Promise.all([
    supabase
      .from("profiles")
      .select("id, full_name, phone, avatar_url, role")
      .eq("id", id)
      .maybeSingle(),
    supabase
      .from("properties")
      .select(
        "id, title, price, type, bedrooms, bathrooms, area_sqm, city, province, images, featured, special_deal, special_deal_label, lat, lng, status",
      )
      .eq("agent_id", id)
      .eq("status", "for_sale")
      .order("featured", { ascending: false })
      .order("created_at", { ascending: false }),
  ]);

  if (!agent) notFound();

  return (
    <>
      <header className="flex items-center gap-4 border-b border-zinc-200 pb-6">
        {agent.avatar_url ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={agent.avatar_url}
            alt={agent.full_name ?? "Agent"}
            className="h-16 w-16 rounded-full object-cover"
          />
        ) : (
          <div className="h-16 w-16 rounded-full bg-zinc-200" />
        )}
        <div>
          <h1 className="text-2xl font-bold tracking-tight">
            {agent.full_name ?? "Agent"}
          </h1>
          <p className="mt-1 text-sm text-zinc-500">
            {agent.role === "admin"
              ? "Broker"
              : agent.role === "agent"
                ? "Agent"
                : agent.role}
            {agent.phone && (
              <>
                {" · "}
                <a
                  href={`tel:${agent.phone}`}
                  className="hover:text-zinc-900"
                >
                  {agent.phone}
                </a>
              </>
            )}
          </p>
        </div>
      </header>

      <h2 className="mt-8 text-lg font-semibold">
        Listings ({listings?.length ?? 0})
      </h2>

      {listings && listings.length > 0 ? (
        <ListingsView listings={listings} />
      ) : (
        <p className="mt-6 text-sm text-zinc-500">
          This agent has no active listings.
        </p>
      )}

      <p className="mt-10 text-sm text-zinc-500">
        <a href="/" className="hover:text-zinc-900">
          ← All listings
        </a>
      </p>
    </>
  );
}