DentalManagementMH06/apps/Frontend/src/components/settings/InsuranceCredForm.tsx

import { useEffect, useState } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@/lib/queryClient";
import { toast } from "@/hooks/use-toast";
import { Eye, EyeOff } from "lucide-react";

type CredentialFormProps = {
  onClose: () => void;
  userId: number;
  defaultValues?: {
    id?: number;
    siteKey: string;
    username: string;
    password: string;
  };
};

const SITE_KEY_OPTIONS = [
  { value: "MH", label: "MassHealth (MH)" },
  { value: "DDMA", label: "Delta Dental MA (DDMA)" },
  { value: "DELTAINS", label: "Delta Dental Ins (DELTAINS)" },
  { value: "TUFTS_SCO", label: "Tufts SCO (TUFTS_SCO)" },
  { value: "UNITED_SCO", label: "United SCO / DentalHub (UNITED_SCO)" },
  { value: "CCA", label: "CCA (CCA)" },
  { value: "BCBS_MA", label: "BCBS MA (BCBS_MA)" },
];

export function CredentialForm({ onClose, userId, defaultValues }: CredentialFormProps) {
  const [siteKey, setSiteKey] = useState(defaultValues?.siteKey || "");
  const [username, setUsername] = useState(defaultValues?.username || "");
  const [password, setPassword] = useState(defaultValues?.password || "");
  const [showPassword, setShowPassword] = useState(false);

  const queryClient = useQueryClient();

  // Create or Update Mutation inside form
  const mutation = useMutation({
    mutationFn: async () => {
      const payload = {
        siteKey: siteKey.trim(),
        username: username.trim(),
        password: password.trim(),
        userId,
      };

      const url = defaultValues?.id
        ? `/api/insuranceCreds/${defaultValues.id}`
        : "/api/insuranceCreds/";

      const method = defaultValues?.id ? "PUT" : "POST";

      const res = await apiRequest(method, url, payload);

      if (!res.ok) {
        const errorData = await res.json().catch(() => null);
        throw new Error(errorData?.message || "Failed to save credential");
      }
      return res.json();
    },
    onSuccess: () => {
      toast({
        title: `Credential ${defaultValues?.id ? "updated" : "created"}.`,
      });
      queryClient.invalidateQueries({ queryKey: ["/api/insuranceCreds/"] });
      onClose();
    },
    onError: (error: any) => {
      toast({
        title: "Error",
        description: error.message || "Unknown error",
        variant: "destructive",
      });
    },
  });

  // Reset form on defaultValues change (edit mode)
  useEffect(() => {
    setSiteKey(defaultValues?.siteKey || "");
    setUsername(defaultValues?.username || "");
    setPassword(defaultValues?.password || "");
  }, [defaultValues]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (!siteKey || !username || !password) {
      toast({
        title: "Error",
        description: "All fields are required.",
        variant: "destructive",
      });
      return;
    }

    mutation.mutate();
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
      <div className="bg-white rounded-lg p-6 w-full max-w-md shadow-lg">
        <h2 className="text-lg font-bold mb-4">
          {defaultValues?.id ? "Edit Credential" : "Create Credential"}
        </h2>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium">Insurance</label>
            <select
              value={siteKey}
              onChange={(e) => setSiteKey(e.target.value)}
              className="mt-1 p-2 border rounded w-full bg-white"
            >
              <option value="">— Select insurance —</option>
              {SITE_KEY_OPTIONS.map((opt) => (
                <option key={opt.value} value={opt.value}>
                  {opt.label}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium">Username</label>
            <input
              type="text"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              className="mt-1 p-2 border rounded w-full"
            />
          </div>
          <div>
            <label className="block text-sm font-medium">Password</label>
            <div className="relative mt-1">
              <input
                type={showPassword ? "text" : "password"}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="p-2 border rounded w-full pr-10"
              />
              <button
                type="button"
                onClick={() => setShowPassword((prev) => !prev)}
                className="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700"
                tabIndex={-1}
              >
                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
              </button>
            </div>
          </div>
          <div className="flex justify-end gap-2">
            <button
              type="button"
              onClick={onClose}
              className="text-gray-600 hover:underline"
              disabled={mutation.isPending}
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={mutation.isPending}
              className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
            >
              {mutation.isPending
                ? defaultValues?.id
                  ? "Updating..."
                  : "Creating..."
                : defaultValues?.id
                ? "Update"
                : "Create"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}