DentalManagementMH06/apps/Frontend/src/components/settings/twilio-settings-card.tsx

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

type TwilioSettings = {
  id?: number;
  accountSid: string;
  authToken: string;
  phoneNumber: string;
  greetingMessage?: string | null;
  twimlAppSid?: string | null;
};

export function TwilioSettingsCard() {
  const { toast } = useToast();
  const [accountSid, setAccountSid] = useState("");
  const [authToken, setAuthToken] = useState("");
  const [phoneNumber, setPhoneNumber] = useState("");
  const [greetingMessage, setGreetingMessage] = useState("");
  const [twimlAppSid, setTwimlAppSid] = useState("");
  const [showAuthToken, setShowAuthToken] = useState(false);

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

  useEffect(() => {
    if (settings) {
      setAccountSid(settings.accountSid ?? "");
      setAuthToken(settings.authToken ?? "");
      setPhoneNumber(settings.phoneNumber ?? "");
      setGreetingMessage(settings.greetingMessage ?? "");
      setTwimlAppSid(settings.twimlAppSid ?? "");
    }
  }, [settings]);

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

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!accountSid.trim() || !authToken.trim() || !phoneNumber.trim()) return;
    saveMutation.mutate({ accountSid: accountSid.trim(), authToken: authToken.trim(), phoneNumber: phoneNumber.trim(), greetingMessage: greetingMessage.trim() || null, twimlAppSid: twimlAppSid.trim() || null });
  };

  const isConfigured = !!(settings?.accountSid && settings?.authToken && settings?.phoneNumber);

  return (
    <Card>
      <CardContent className="space-y-4 py-6">
        <div className="flex items-center gap-2">
          <h3 className="text-lg font-semibold">Twilio Settings</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>
        <p className="text-sm text-gray-500">
          Enter your Twilio credentials to enable SMS and calling features. Find these in your{" "}
          <span className="font-medium">Twilio Console</span> → Account Info.
        </p>

        {isLoading ? (
          <p className="text-sm text-gray-400">Loading...</p>
        ) : (
          <form className="space-y-4" onSubmit={handleSubmit}>
            <div>
              <label className="block text-sm font-medium">Account SID</label>
              <input
                type="text"
                value={accountSid}
                onChange={(e) => setAccountSid(e.target.value)}
                className="mt-1 p-2 border rounded w-full font-mono text-sm"
                placeholder="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
                required
              />
            </div>

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

            <div>
              <label className="block text-sm font-medium">Twilio Phone Number</label>
              <input
                type="text"
                value={phoneNumber}
                onChange={(e) => setPhoneNumber(e.target.value)}
                className="mt-1 p-2 border rounded w-full font-mono text-sm"
                placeholder="+1xxxxxxxxxx"
                required
              />
              <p className="text-xs text-gray-500 mt-1">Must be in E.164 format, e.g. +16175551234</p>
            </div>

            <div>
              <label className="block text-sm font-medium">Voicemail Greeting</label>
              <textarea
                value={greetingMessage}
                onChange={(e) => setGreetingMessage(e.target.value)}
                className="mt-1 p-2 border rounded w-full text-sm resize-none"
                rows={3}
                placeholder="Thank you for calling. Please leave a message after the beep and we will get back to you shortly."
              />
              <p className="text-xs text-gray-500 mt-1">This message plays when a patient calls your Twilio number. Leave blank to use the default.</p>
            </div>

            <div>
              <label className="block text-sm font-medium">TwiML App SID <span className="text-gray-400 font-normal">(for in-browser calling)</span></label>
              <input
                type="text"
                value={twimlAppSid}
                onChange={(e) => setTwimlAppSid(e.target.value)}
                className="mt-1 p-2 border rounded w-full font-mono text-sm"
                placeholder="APxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
              />
              <p className="text-xs text-gray-500 mt-1">
                In Twilio Console → TwiML Apps → create one → set Voice URL to{" "}
                <code className="bg-gray-100 px-1 rounded text-xs">https://communitydentistsoflowell.mydentalofficemanagement.com/api/twilio/webhook/voice-browser</code>
                {" "}then paste the App SID here. Required for the dial pad.
              </p>
            </div>

            <div className="flex items-center gap-3 pt-1">
              <button
                type="submit"
                className="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700 text-sm"
                disabled={saveMutation.isPending}
              >
                {saveMutation.isPending ? "Saving..." : "Save Twilio Settings"}
              </button>
            </div>

            {isConfigured && (
              <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">Twilio Webhook URLs</p>
                <p>SMS: <code className="bg-white border px-1 rounded">https://communitydentistsoflowell.mydentalofficemanagement.com/api/twilio/webhook/sms</code></p>
                <p>Voice: <code className="bg-white border px-1 rounded">https://communitydentistsoflowell.mydentalofficemanagement.com/api/twilio/webhook/voice</code></p>
                <p className="text-gray-400">Set these in your Twilio Console → Phone Numbers → your number</p>
              </div>
            )}
          </form>
        )}
      </CardContent>
    </Card>
  );
}