"use client";
import { useState } from "react";
import { fetchClient } from "@/lib/api-client";

export default function InviteVendorCard() {
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const [code, setCode] = useState<string | null>(null);

  async function handleInvite() {
    setLoading(true);
    setMessage(null);
    setCode(null);
    try {
      const res = await fetchClient<{ code: string }>("/admin/invitations", { method: "POST" });
      setMessage("Invitation created");
      setCode(res.code);
    } catch (e: any) {
      setMessage(e?.message || "Failed to send invitation");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="rounded-lg border border-border/60 bg-background p-4 h-full min-h-[200px]">
      <h2 className="font-medium">Invite Vendor</h2>
      <p className="text-sm text-muted-foreground mt-1">Generate a new invitation code</p>
      <div className="mt-4 space-y-3">
        <button
          onClick={handleInvite}
          className="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm text-primary-foreground disabled:opacity-60"
          disabled={loading}
        >
          {loading ? "Generating..." : "Generate Invite Code"}
        </button>
        {message && <p className="text-xs text-muted-foreground">{message}</p>}
        {code && (
          <div className="text-sm">
            Code: <span className="font-mono px-1.5 py-0.5 rounded bg-muted">{code}</span>
          </div>
        )}
      </div>
    </div>
  );
}