Wellspringmanagement01/apps/Frontend/src/components/settings/ai-settings-card.tsx

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

type AiSettings = {
  id?: number;
  apiKey: string;
  aiEnabled: boolean;
  openAiKey: string;
  openAiEnabled: boolean;
  claudeAiKey: string;
  claudeAiEnabled: boolean;
  dentalMgmtKey: string;
  dentalMgmtEnabled: boolean;
};

type Provider = "openAi" | "claudeAi" | "dentalMgmt";

function ApiKeySection({
  title,
  description,
  apiKey,
  enabled,
  isConfigured,
  onSave,
  onToggle,
  isSaving,
  isToggling,
}: {
  title: string;
  description: string;
  apiKey: string;
  enabled: boolean;
  isConfigured: boolean;
  onSave: (key: string) => void;
  onToggle: (enabled: boolean) => void;
  isSaving: boolean;
  isToggling: boolean;
}) {
  const [localKey, setLocalKey] = useState(apiKey);
  const [showKey, setShowKey] = useState(false);

  useEffect(() => {
    setLocalKey(apiKey);
  }, [apiKey]);

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <h3 className="text-lg font-semibold">{title}</h3>
          {isConfigured && (
            <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>
        <div className="flex items-center gap-2">
          <span className="text-sm text-gray-500">{enabled ? "On" : "Off"}</span>
          <Switch checked={enabled} onCheckedChange={onToggle} disabled={isToggling} />
        </div>
      </div>

      <p className="text-sm text-gray-500">{description}</p>

      <div>
        <label className="block text-sm font-medium">API Key</label>
        <div className="relative mt-1">
          <input
            type={showKey ? "text" : "password"}
            value={localKey}
            onChange={(e) => setLocalKey(e.target.value)}
            className="p-2 border rounded w-full pr-10 font-mono text-sm"
            placeholder="••••••••••••••••••••••••••••••••••••••"
          />
          <button
            type="button"
            onClick={() => setShowKey((v) => !v)}
            className="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700"
            tabIndex={-1}
          >
            {showKey ? <EyeOff size={16} /> : <Eye size={16} />}
          </button>
        </div>
      </div>

      <button
        onClick={() => { if (localKey.trim()) onSave(localKey.trim()); }}
        className="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700 text-sm"
        disabled={isSaving || !localKey.trim()}
      >
        {isSaving ? "Saving..." : "Save"}
      </button>
    </div>
  );
}

export function AiSettingsCard() {
  const { toast } = useToast();
  const [apiKey, setApiKey] = useState("");
  const [showGoogleKey, setShowGoogleKey] = useState(false);
  const [aiEnabled, setAiEnabled] = useState(true);

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

  useEffect(() => {
    if (settings) {
      setApiKey(settings.apiKey ?? "");
      setAiEnabled(settings.aiEnabled ?? true);
    }
  }, [settings]);

  // Google AI save
  const googleSaveMutation = useMutation({
    mutationFn: async (key: string) => {
      const res = await apiRequest("PUT", "/api/ai/settings", { apiKey: key });
      if (!res.ok) throw new Error((await res.json().catch(() => null))?.message || "Failed to save");
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/ai/settings"] });
      toast({ title: "Saved", description: "Google AI API key saved." });
    },
    onError: (err: any) => toast({ title: "Error", description: err?.message, variant: "destructive" }),
  });

  // Google AI toggle
  const googleToggleMutation = useMutation({
    mutationFn: async (enabled: boolean) => {
      const res = await apiRequest("PUT", "/api/ai/enabled", { aiEnabled: enabled });
      if (!res.ok) throw new Error((await res.json().catch(() => null))?.message || "Failed");
      return res.json();
    },
    onSuccess: (_d, enabled) => {
      queryClient.invalidateQueries({ queryKey: ["/api/ai/settings"] });
      toast({ title: enabled ? "Google AI Enabled" : "Google AI Disabled" });
    },
    onError: (err: any) => {
      setAiEnabled((v) => !v);
      toast({ title: "Error", description: err?.message, variant: "destructive" });
    },
  });

  // Provider key save
  const providerKeyMutation = useMutation({
    mutationFn: async ({ provider, apiKey }: { provider: Provider; apiKey: string }) => {
      const res = await apiRequest("PUT", "/api/ai/provider-key", { provider, apiKey });
      if (!res.ok) throw new Error((await res.json().catch(() => null))?.message || "Failed");
      return { provider };
    },
    onSuccess: ({ provider }) => {
      queryClient.invalidateQueries({ queryKey: ["/api/ai/settings"] });
      const names: Record<Provider, string> = { openAi: "OpenAI", claudeAi: "Claude AI", dentalMgmt: "DentalManagement AI" };
      toast({ title: "Saved", description: `${names[provider]} API key saved.` });
    },
    onError: (err: any) => toast({ title: "Error", description: err?.message, variant: "destructive" }),
  });

  // Provider toggle
  const providerToggleMutation = useMutation({
    mutationFn: async ({ provider, enabled }: { provider: Provider; enabled: boolean }) => {
      const res = await apiRequest("PUT", "/api/ai/provider-enabled", { provider, enabled });
      if (!res.ok) throw new Error((await res.json().catch(() => null))?.message || "Failed");
      return { provider, enabled };
    },
    onSuccess: ({ provider, enabled }) => {
      queryClient.invalidateQueries({ queryKey: ["/api/ai/settings"] });
      const names: Record<Provider, string> = { openAi: "OpenAI", claudeAi: "Claude AI", dentalMgmt: "DentalManagement AI" };
      toast({ title: `${names[provider]} ${enabled ? "Enabled" : "Disabled"}` });
    },
    onError: (err: any) => toast({ title: "Error", description: err?.message, variant: "destructive" }),
  });

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

  return (
    <Card>
      <CardContent className="py-6 space-y-6">

        {/* Google AI */}
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <h3 className="text-lg font-semibold">Google AI Settings</h3>
              {!!settings?.apiKey && (
                <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>
            <div className="flex items-center gap-2">
              <span className="text-sm text-gray-500">{aiEnabled ? "On" : "Off"}</span>
              <Switch
                checked={aiEnabled}
                onCheckedChange={(v) => { setAiEnabled(v); googleToggleMutation.mutate(v); }}
                disabled={googleToggleMutation.isPending}
              />
            </div>
          </div>
          <p className="text-sm text-gray-500">
            Enter your Google AI Studio API key to enable AI-powered SMS replies.
          </p>
          <div>
            <label className="block text-sm font-medium">Google AI Studio API Key</label>
            <div className="relative mt-1">
              <input
                type={showGoogleKey ? "text" : "password"}
                value={apiKey}
                onChange={(e) => setApiKey(e.target.value)}
                className="p-2 border rounded w-full pr-10 font-mono text-sm"
                placeholder="AIza••••••••••••••••••••••••••••••••••••••"
              />
              <button
                type="button"
                onClick={() => setShowGoogleKey((v) => !v)}
                className="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700"
                tabIndex={-1}
              >
                {showGoogleKey ? <EyeOff size={16} /> : <Eye size={16} />}
              </button>
            </div>
          </div>
          <button
            onClick={() => { if (apiKey.trim()) googleSaveMutation.mutate(apiKey.trim()); }}
            className="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700 text-sm"
            disabled={googleSaveMutation.isPending || !apiKey.trim()}
          >
            {googleSaveMutation.isPending ? "Saving..." : "Save"}
          </button>
          {!!settings?.apiKey && (
            <div className="mt-2 p-3 bg-gray-50 rounded border text-xs text-gray-600 space-y-1">
              <p className="font-medium text-gray-700">AI Auto-Reply Rules</p>
              <p><span className="text-green-600 font-medium">Patient replies "Yes"</span> → AI sends a thank-you confirmation</p>
              <p><span className="text-red-500 font-medium">Patient replies "No" / "Not available"</span> → AI notifies them an assistant will follow up</p>
            </div>
          )}
        </div>

        <Separator />

        {/* OpenAI */}
        <ApiKeySection
          title="OpenAI Settings"
          description="Enter your OpenAI API key to enable OpenAI-powered features."
          apiKey={settings?.openAiKey ?? ""}
          enabled={settings?.openAiEnabled ?? false}
          isConfigured={!!settings?.openAiKey}
          onSave={(key) => providerKeyMutation.mutate({ provider: "openAi", apiKey: key })}
          onToggle={(v) => providerToggleMutation.mutate({ provider: "openAi", enabled: v })}
          isSaving={providerKeyMutation.isPending && (providerKeyMutation.variables as any)?.provider === "openAi"}
          isToggling={providerToggleMutation.isPending && (providerToggleMutation.variables as any)?.provider === "openAi"}
        />

        <Separator />

        {/* Claude AI */}
        <ApiKeySection
          title="Claude AI Settings"
          description="Enter your Anthropic Claude API key to enable Claude-powered features."
          apiKey={settings?.claudeAiKey ?? ""}
          enabled={settings?.claudeAiEnabled ?? false}
          isConfigured={!!settings?.claudeAiKey}
          onSave={(key) => providerKeyMutation.mutate({ provider: "claudeAi", apiKey: key })}
          onToggle={(v) => providerToggleMutation.mutate({ provider: "claudeAi", enabled: v })}
          isSaving={providerKeyMutation.isPending && (providerKeyMutation.variables as any)?.provider === "claudeAi"}
          isToggling={providerToggleMutation.isPending && (providerToggleMutation.variables as any)?.provider === "claudeAi"}
        />

        <Separator />

        {/* DentalManagement AI */}
        <ApiKeySection
          title="DentalManagement AI Settings"
          description="Enter your DentalManagement AI API key to enable DentalManagement-powered features."
          apiKey={settings?.dentalMgmtKey ?? ""}
          enabled={settings?.dentalMgmtEnabled ?? false}
          isConfigured={!!settings?.dentalMgmtKey}
          onSave={(key) => providerKeyMutation.mutate({ provider: "dentalMgmt", apiKey: key })}
          onToggle={(v) => providerToggleMutation.mutate({ provider: "dentalMgmt", enabled: v })}
          isSaving={providerKeyMutation.isPending && (providerKeyMutation.variables as any)?.provider === "dentalMgmt"}
          isToggling={providerToggleMutation.isPending && (providerToggleMutation.variables as any)?.provider === "dentalMgmt"}
        />

      </CardContent>
    </Card>
  );
}