import { useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import { toast } from "sonner";
import { Building2 } from "lucide-react";
import { supabase } from "@/integrations/supabase/client";
import { setCompanyStatus } from "@/lib/companies.functions";
import type { Database } from "@/integrations/supabase/types";

type Status = Database["public"]["Enums"]["company_status"];

export function CompaniesAdmin() {
  const qc = useQueryClient();
  const updateStatus = useServerFn(setCompanyStatus);
  const [busy, setBusy] = useState<string | null>(null);
  const { data } = useQuery({
    queryKey: ["admin-companies"],
    queryFn: async () => {
      const { data, error } = await supabase.from("companies").select("*").order("created_at", { ascending: false });
      if (error) throw error;
      return data;
    },
  });

  async function setStatus(id: string, status: Status) {
    setBusy(id);
    try {
      await updateStatus({ data: { companyId: id, status } });
      toast.success(`Company ${status}. The provider has been notified.`);
      await Promise.all([
        qc.invalidateQueries({ queryKey: ["admin-companies"] }),
        qc.invalidateQueries({ queryKey: ["audit-logs"] }),
      ]);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "Could not update the company.");
    } finally {
      setBusy(null);
    }
  }

  return (
    <div className="mt-4 space-y-3">
      {data?.map((c) => (
        <article key={c.id} className="rounded-2xl border border-border/60 bg-card p-4 shadow-card">
          <div className="flex items-start justify-between gap-3">
            <h2 className="flex items-center gap-2 text-sm font-semibold">
              <Building2 className="h-4 w-4 text-primary" /> {c.name}
            </h2>
            <span className="rounded-full bg-muted px-3 py-1 text-[11px] font-semibold capitalize">{c.status}</span>
          </div>
          <p className="mt-1 text-xs text-muted-foreground">
            {c.phone ?? "No phone"} • {c.email ?? "No email"}
          </p>
          {c.service_areas?.length ? (
            <p className="mt-1 text-xs text-muted-foreground">Areas: {c.service_areas.join(", ")}</p>
          ) : null}
          <div className="mt-3 flex flex-wrap gap-2">
            <button
              disabled={busy === c.id}
              onClick={() => setStatus(c.id, "approved")}
              className="rounded-xl bg-brand px-4 py-2 text-xs font-semibold text-primary-foreground disabled:opacity-60"
            >
              Approve
            </button>
            <button
              disabled={busy === c.id}
              onClick={() => setStatus(c.id, "pending")}
              className="rounded-xl border border-border px-4 py-2 text-xs font-semibold disabled:opacity-60"
            >
              Set pending
            </button>
            <button
              disabled={busy === c.id}
              onClick={() => setStatus(c.id, "suspended")}
              className="rounded-xl border border-destructive px-4 py-2 text-xs font-semibold text-destructive disabled:opacity-60"
            >
              Suspend
            </button>
          </div>
        </article>
      ))}
      {!data?.length ? <p className="text-sm text-muted-foreground">No companies registered yet.</p> : null}
    </div>
  );
}