"use client";

import { Zap } from "lucide-react";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { CardioLoader } from "@/components/ui/cardio-loader";
import { Input } from "@/components/ui/input";
import { useSubmitTest } from "@/data/speed/test-submit-mutation";
import { useRouter } from "@/i18n/navigation";

export function QuickTestBar() {
  const [url, setUrl] = useState("");
  const router = useRouter();
  const t = useTranslations("QuickTest");
  const mutation = useSubmitTest();

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const trimmed = url.trim();
    if (!trimmed) return;

    mutation.mutate(trimmed, {
      onSuccess(data) {
        router.push(`/dashboard/tests/${data.id}`);
      },
      onError(err) {
        toast.error(err.message);
      },
    });
  }

  return (
    <form onSubmit={handleSubmit} className="flex items-center gap-3">
      <Input
        type="text"
        placeholder={t("placeholder")}
        value={url}
        onChange={(e) => setUrl(e.target.value)}
        className="flex-1"
        required
      />
      <Button type="submit" disabled={mutation.isPending}>
        {mutation.isPending ? (
          <span className="mr-2 inline-flex h-4 w-4 items-center justify-center">
            <CardioLoader size={16} stroke={2} speed={1.8} />
          </span>
        ) : (
          <Zap className="mr-2 h-4 w-4" />
        )}
        {t("analyze")}
      </Button>
    </form>
  );
}