import { useState, useEffect } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
import { Card, CardContent } from "@/components/ui/card";
import { CheckCircle } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { apiRequest, queryClient } from "@/lib/queryClient";

export function SeleniumSettingsCard() {
  const { toast } = useToast();
  const [paymentGroupId, setPaymentGroupId] = useState("");

  const { data: settings, isLoading } = useQuery({
    queryKey: ["/api/selenium-settings"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/selenium-settings");
      if (!res.ok) return null;
      return res.json();
    },
  });

  useEffect(() => {
    if (settings) {
      setPaymentGroupId(settings.paymentGroupId ?? "");
    }
  }, [settings]);

  const saveMutation = useMutation({
    mutationFn: async (data) => {
      const res = await apiRequest("PUT", "/api/selenium-settings", data);
      if (!res.ok) {
        const err = await res.json().catch(() => null);
        throw new Error(err?.message || "Failed to save Selenium settings");
      }
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/selenium-settings"] });
      toast({ title: "Selenium Settings Saved" });
    },
    onError: (err) => {
      toast({ title: "Error", description: err?.message || "Failed to save settings", variant: "destructive" });
    },
  });

  if (isLoading) {
    return (
      <Card>
        <CardContent className="py-6">
          <p className="text-sm text-gray-500">Loading...</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardContent className="space-y-6 py-6">
        <div>
          <div className="flex items-center gap-2">
            <h3 className="text-lg font-semibold">Selenium Settings</h3>
            {settings?.paymentGroupId && (
              <span className="flex items-center gap-1 text-xs text-green-600 font-medium">
                <CheckCircle className="h-3.5 w-3.5" /> Configured
              </span>
            )}
          </div>
          <p className="text-sm text-gray-500 mt-1">
            Configure values used by Selenium automation workers (United eligibility, claim, and pre-auth).
          </p>
        </div>

        <form
          className="space-y-4"
          onSubmit={(e) => {
            e.preventDefault();
            saveMutation.mutate({ paymentGroupId });
          }}
        >
          <div>
            <label className="block text-sm font-medium text-gray-700">
              Payment Group ID
            </label>
            <p className="text-xs text-gray-400 mb-1">
              The office name as it appears in the United/DentalHub portal dropdown (e.g. "Summit Dental Care" or "Broadway Dental").
            </p>
            <input
              type="text"
              value={paymentGroupId}
              onChange={(e) => setPaymentGroupId(e.target.value)}
              className="mt-1 p-2 border rounded w-full"
              placeholder="e.g. Summit Dental Care"
            />
          </div>

          <button
            type="submit"
            className="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700 disabled:opacity-50"
            disabled={saveMutation.isPending}
          >
            {saveMutation.isPending ? "Saving..." : "Save Settings"}
          </button>
        </form>
      </CardContent>
    </Card>
  );
}