import { createFileRoute, Link } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { Building2, MapPin, Star } from "lucide-react";
import { AppShell } from "@/components/AppShell";
import { supabase } from "@/integrations/supabase/client";

export const Route = createFileRoute("/providers")({
  head: () => ({
    meta: [
      { title: "Find Service Providers | Emma Mold Inspection Services" },
      {
        name: "description",
        content:
          "Browse approved mold inspection, treatment, cleaning and fumigation companies, compare service areas and book the provider you prefer.",
      },
      { property: "og:title", content: "Find a mold service provider" },
      { property: "og:description", content: "Approved inspection, treatment and fumigation companies near you." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: ProvidersPage,
});

function ProvidersPage() {
  const { data, isLoading } = useQuery({
    queryKey: ["providers"],
    queryFn: async () => {
      const { data, error } = await supabase
        .from("companies")
        .select("id,name,slug,logo_url,description,service_areas,services_offered,rating,review_count,phone,email")
        .eq("status", "approved")
        .order("name");
      if (error) throw error;
      return data;
    },
  });

  return (
    <AppShell>
      <h1 className="text-2xl font-bold">Find Service Providers</h1>
      <p className="mt-1 text-sm text-muted-foreground">
        Approved companies offering inspection, treatment, cleaning, fumigation and pest control.
      </p>

      <div className="mt-5 space-y-3">
        {isLoading ? <p className="text-sm text-muted-foreground">Loading providers…</p> : null}
        {data?.map((c) => (
          <article key={c.id} className="rounded-3xl border border-border/60 bg-card p-4 shadow-card">
            <div className="flex items-start gap-3">
              {c.logo_url ? (
                <img src={c.logo_url} alt={`${c.name} logo`} className="h-12 w-12 rounded-2xl object-cover" />
              ) : (
                <span className="flex h-12 w-12 items-center justify-center rounded-2xl bg-muted">
                  <Building2 className="h-5 w-5 text-primary" />
                </span>
              )}
              <div className="min-w-0 flex-1">
                <h2 className="text-sm font-semibold">{c.name}</h2>
                {c.rating ? (
                  <p className="mt-0.5 flex items-center gap-1 text-[11px] text-muted-foreground">
                    <Star className="h-3 w-3 text-primary" /> {c.rating} ({c.review_count} reviews)
                  </p>
                ) : (
                  <p className="mt-0.5 text-[11px] text-muted-foreground">New provider</p>
                )}
              </div>
            </div>
            {c.description ? <p className="mt-2 text-xs text-muted-foreground">{c.description}</p> : null}
            {c.service_areas?.length ? (
              <p className="mt-2 flex items-center gap-1 text-[11px] text-muted-foreground">
                <MapPin className="h-3 w-3" /> {c.service_areas.join(", ")}
              </p>
            ) : null}
            {c.services_offered?.length ? (
              <div className="mt-2 flex flex-wrap gap-1.5">
                {c.services_offered.map((s) => (
                  <span key={s} className="rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium">
                    {s}
                  </span>
                ))}
              </div>
            ) : null}
            <Link
              to="/book"
              search={{ service: undefined, company: c.id }}
              className="mt-3 block rounded-2xl bg-brand py-3 text-center text-sm font-semibold text-primary-foreground"
            >
              Book with {c.name}
            </Link>
          </article>
        ))}
        {!isLoading && !data?.length ? (
          <p className="rounded-2xl bg-muted p-4 text-sm text-muted-foreground">
            No approved providers yet. Emma Mold Inspection Services handles your booking directly in the meantime.
          </p>
        ) : null}
      </div>

      <div className="mt-6 rounded-3xl border border-border/60 bg-soft p-4 shadow-card">
        <h2 className="text-sm font-semibold">Run a mold service company?</h2>
        <p className="mt-1 text-xs text-muted-foreground">
          Register your company, add your team and start receiving bookings once Emma Exclusive Teams approves you.
        </p>
        <Link to="/provider" className="mt-3 inline-block rounded-2xl border border-border px-4 py-2.5 text-xs font-semibold">
          Service provider portal
        </Link>
      </div>
    </AppShell>
  );
}