asterisk-voicemail/frontend/src/components/SettingsPage.tsx

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { api } from "../lib/api";

export default function SettingsPage() {
  const qc = useQueryClient();
  const { data, isLoading, error } = useQuery({ queryKey: ["settings"], queryFn: api.settings });
  const save = useMutation({
    mutationFn: api.saveSettings,
    onSuccess: () => alert("Settings saved"),
  });
  if (isLoading) return <div className="wrap"><div className="card empty">Loading...</div></div>;
  if (error) return <div className="wrap"><div className="card err">{(error as Error).message}</div></div>;
  if (!data) return null;

  const s = (k: string, fallback = "") => (data as any)?.[k] ?? fallback;
  const yn = (k: string) => s(k, "no") === "yes";

  return (
    <div className="wrap">
      <div className="card">
        <form
          onSubmit={(e) => {
            e.preventDefault();
            const fd = new FormData(e.currentTarget);
            save.mutate(fd);
          }}
        >
          <label>Email address</label>
          <input name="email_address" defaultValue={s("email_address")} />

          <label style={{ fontWeight: 400, margin: 0, display: "flex", alignItems: "center", gap: 5 }}>
            <input type="checkbox" name="email_enabled" defaultChecked={yn("email_enabled")} /> Email notifications
          </label>
          <label style={{ fontWeight: 400, margin: 0, display: "flex", alignItems: "center", gap: 5 }}>
            <input type="checkbox" name="attach_audio" defaultChecked={yn("attach_audio")} /> Attach recording to email
          </label>

          <label style={{ fontWeight: 400, margin: 0, display: "flex", alignItems: "center", gap: 5 }}>
            <input type="checkbox" name="telegram_enabled" defaultChecked={yn("telegram_enabled")} /> Send Telegram DM
          </label>
          <label>Telegram chat ID</label>
          <input name="telegram_chat_id" defaultValue={s("telegram_chat_id")} />
          <label style={{ fontWeight: 400, margin: 0, display: "flex", alignItems: "center", gap: 5 }}>
            <input type="checkbox" name="telegram_audio" defaultChecked={yn("telegram_audio")} /> Include audio as voice note
          </label>
          <label style={{ fontWeight: 400, margin: 0, display: "flex", alignItems: "center", gap: 5 }}>
            <input type="checkbox" name="telegram_transcript" defaultChecked={yn("telegram_transcript")} /> Send transcript follow-up
          </label>

          <label style={{ fontWeight: 400, margin: 0, display: "flex", alignItems: "center", gap: 5 }}>
            <input type="checkbox" name="transcribe" defaultChecked={yn("transcribe")} /> Transcribe recordings
          </label>
          <label style={{ fontWeight: 400, margin: 0, display: "flex", alignItems: "center", gap: 5 }}>
            <input type="checkbox" name="summarise" defaultChecked={yn("summarise")} /> Generate summary
          </label>
          <label style={{ fontWeight: 400, margin: 0, display: "flex", alignItems: "center", gap: 5 }}>
            <input type="checkbox" name="contact_lookup" defaultChecked={yn("contact_lookup")} /> Resolve caller ID from contacts
          </label>

          <div className="row" style={{ marginTop: 16 }}>
            <button type="submit" className="primary">Save</button>
          </div>
        </form>
      </div>
    </div>
  );
}