"use client";

import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { toast } from "sonner";

import { QuotaExhaustedDialog } from "@/components/billing/quota-exhausted-dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { inviteMember } from "@/lib/actions/team";

export function InviteForm() {
  const t = useTranslations("Settings.team");
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [role, setRole] = useState<"admin" | "member">("member");
  const [isPending, startTransition] = useTransition();
  const [quotaDialog, setQuotaDialog] = useState<null | {
    kind: "seats";
    used: number;
    limit: number;
    plan: string;
  }>(null);

  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const trimmed = email.trim();
    if (!trimmed) return;
    startTransition(async () => {
      try {
        await inviteMember({ email: trimmed, role });
        toast.success(t("inviteSuccess", { email: trimmed }));
        setEmail("");
        router.refresh();
      } catch (err) {
        const msg = err instanceof Error ? err.message : String(err);
        const m = msg.match(/Quota exceeded for (\w+) on plan (\w+): (\d+)\/(\d+)/);
        if (m) {
          setQuotaDialog({
            kind: m[1] as "seats",
            plan: m[2]!,
            used: Number(m[3]),
            limit: Number(m[4]),
          });
        } else {
          toast.error(t("inviteFailed"));
        }
      }
    });
  }

  return (
    <>
      <form onSubmit={onSubmit} className="flex flex-col gap-3 rounded-lg border p-4">
        <h3 className="text-sm font-semibold">{t("inviteTitle")}</h3>
        <div className="flex flex-wrap items-end gap-2">
          <div className="flex min-w-[240px] flex-1 flex-col gap-1">
            <Label htmlFor="invite-email" className="text-xs">
              {t("inviteEmailLabel")}
            </Label>
            <Input
              id="invite-email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder={t("inviteEmailPlaceholder")}
              required
            />
          </div>
          <div className="flex flex-col gap-1">
            <Label htmlFor="invite-role" className="text-xs">
              {t("inviteRoleLabel")}
            </Label>
            <Select value={role} onValueChange={(v) => setRole(v as "admin" | "member")}>
              <SelectTrigger id="invite-role" className="w-[160px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="member">{t("inviteRoleMember")}</SelectItem>
                <SelectItem value="admin">{t("inviteRoleAdmin")}</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <Button type="submit" disabled={isPending || !email.trim()}>
            {isPending ? t("inviteSubmitting") : t("inviteSubmit")}
          </Button>
        </div>
      </form>
      {quotaDialog && (
        <QuotaExhaustedDialog
          open={true}
          onOpenChange={(v) => !v && setQuotaDialog(null)}
          kind={quotaDialog.kind}
          used={quotaDialog.used}
          limit={quotaDialog.limit}
          plan={quotaDialog.plan}
        />
      )}
    </>
  );
}