{/* Setup walkthrough */} {__( "Before you start — getting WhatsApp Cloud API access", "yatra", )} {__( "All values below come from Meta's WhatsApp Business Platform. Bring your own credentials — messages are billed directly by Meta, no markup from the plugin.", "yatra", )}

{/* Credentials */} {__("WhatsApp Cloud API credentials", "yatra")} {__( "Encrypted credentials Meta requires for the plugin to send messages on your behalf. Stored with libsodium AEAD; the browser only ever sees a masked last-4 hint.", "yatra", )} setShowToken((v) => !v)} onChange={setTokenInput} onSave={() => { onSaveCredential("access_token", tokenInput); setTokenInput(""); }} onClear={() => onSaveCredential("access_token", "")} saving={saving} /> setShowWebhook((v) => !v)} onChange={setWebhookInput} onSave={() => { onSaveCredential("webhook_secret", webhookInput); setWebhookInput(""); }} onClear={() => onSaveCredential("webhook_secret", "")} saving={saving} /> {/* Identifiers + admin phone */} {__("Business identifiers", "yatra")} {__( "Numeric IDs from Meta + the admin phone that receives operator-recipient templates.", "yatra", )}

{__("Phone number ID", "yatra")} setPhoneNumberId(e.target.value)} />

{__("WhatsApp Business Account ID", "yatra")} setBusinessAccountId(e.target.value)} />

{__("Sender display name", "yatra")} setSenderName(e.target.value)} />

{__("Default country code", "yatra")} setDefaultCountryCode(e.target.value)} />

{/* Admin phone — destination for recipient_type=admin templates */}

{__("Admin phone (for operator notifications)", "yatra")}

{__( 'Destination for any template with recipient type "Admin" — for example a "New booking" alert sent to the operator. Leave blank to skip those sends. Must be in E.164 format.', "yatra", )}

setAdminPhone(e.target.value)} />

{/* Compliance */} {__("Compliance & opt-in", "yatra")} setOptInRequired(e.target.checked)} className="mt-1" />

{__("Require opt-in before sending", "yatra")}

{__( "Refuses sends to phone numbers that haven't explicitly opted in. Admin-recipient templates are exempt (the operator owns that number).", "yatra", )}

{__("Opt-in checkbox copy", "yatra")}

setOptInCopy(e.target.value)}
              placeholder={__(
                "Send me booking updates and trip reminders on WhatsApp. Reply STOP to opt out anytime.",
                "yatra",
              )}
            />
          </div>
        </CardContent>
      </Card>

{/* Reminder schedule */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Clock className="h-5 w-5 text-blue-500" />
            {__("Reminder schedule", "yatra")}
          </CardTitle>
          <CardDescription>
            {__(
              "How far before / after a trip the time-based templates fire. Clamped 1–168 hours.",
              "yatra",
            )}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label>{__("Departure reminder (hours before)", "yatra")}</Label>
              <Input
                type="number"
                min={1}
                max={168}
                value={reminderBefore}
                onChange={(e) => setReminderBefore(Number(e.target.value) || 0)}
              />
            </div>
            <div className="space-y-2">
              <Label>{__("Review request (hours after)", "yatra")}</Label>
              <Input
                type="number"
                min={1}
                max={168}
                value={reviewAfter}
                onChange={(e) => setReviewAfter(Number(e.target.value) || 0)}
              />
            </div>
          </div>
        </CardContent>
      </Card>

{dirty && (
        <CardFooter className="flex justify-end border-t border-gray-100 pt-4 dark:border-gray-700/50">
          <Button onClick={saveAll} disabled={saving}>
            {saving ? (
              <>
                <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
                {__("Saving…", "yatra")}
              </>
            ) : (
              <>
                <Save className="mr-1.5 h-4 w-4" />
                {__("Save WhatsApp settings", "yatra")}
              </>
            )}
          </Button>
        </CardFooter>
      )}
    </div>
  );
};

/**
 * Renders the read-only webhook configuration block — the operator
 * copies these values into Meta's WhatsApp → Webhooks subscription:
 *   • Callback URL          → this plugin's REST endpoint
 *   • Verify token          → auto-generated on first settings save
 *   • App Secret status     → visibility flag (the secret itself is
 *                             encrypted at rest and never sent here)
 */
const WebhookSetupCard: React.FC<{ meta: WhatsappMeta }> = ({ meta }) => {
  const { showToast } = useToast();
  const webhook = meta.webhook;
  const [justCopied, setJustCopied] = useState<"url" | "token" | null>(null);

const tokenMissing = !webhook?.verify_token;

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Webhook className="h-4 w-4 text-blue-600 dark:text-blue-400" />
          {__("Meta webhook setup", "yatra")}
        </CardTitle>
        <CardDescription>
          {__(
            "Paste these values into your Meta app → WhatsApp → Configuration → Webhooks. Once verified, Meta will deliver message status callbacks (sent / delivered / read / failed) and inbound replies here.",
            "yatra",
          )}{" "}
          <a
            href="https://developers.facebook.com/docs/whatsapp/cloud-api/guides/set-up-webhooks"
            target="_blank"
            rel="noopener noreferrer"
            className="text-blue-600 hover:underline dark:text-blue-400"
          >
            {__("Setup guide", "yatra")}{" "}
            <ExternalLink className="inline h-3 w-3" />
          </a>
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Callback URL */}
        <div>
          <Label
            htmlFor="whatsapp-webhook-url"
            className="text-xs text-gray-500 dark:text-gray-400"
          >
            {__("Callback URL", "yatra")}
          </Label>
          <div className="mt-1 flex gap-2">
            <Input
              id="whatsapp-webhook-url"
              readOnly
              value={webhook?.url || ""}
              className="font-mono text-sm"
              onFocus={(e) => e.currentTarget.select()}
            />
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={() => copy(webhook?.url || "", "url")}
              disabled={!webhook?.url}
              aria-label={__("Copy callback URL", "yatra")}
            >
              {justCopied === "url" ? (
                <>
                  <Check className="mr-1.5 h-3.5 w-3.5" />
                  {__("Copied", "yatra")}
                </>
              ) : (
                <>
                  <Copy className="mr-1.5 h-3.5 w-3.5" />
                  {__("Copy", "yatra")}
                </>
              )}
            </Button>
          </div>
        </div>

{/* Verify token */}
        <div>
          <Label
            htmlFor="whatsapp-verify-token"
            className="text-xs text-gray-500 dark:text-gray-400"
          >
            {__("Verify token", "yatra")}
          </Label>
          <div className="mt-1 flex gap-2">
            <Input
              id="whatsapp-verify-token"
              readOnly
              value={webhook?.verify_token || ""}
              placeholder={
                tokenMissing
                  ? __(
                      "Will be generated when you save settings for the first time.",
                      "yatra",
                    )
                  : ""
              }
              className="font-mono text-sm"
              onFocus={(e) => e.currentTarget.select()}
            />
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={() => copy(webhook?.verify_token || "", "token")}
              disabled={tokenMissing}
              aria-label={__("Copy verify token", "yatra")}
            >
              {justCopied === "token" ? (
                <>
                  <Check className="mr-1.5 h-3.5 w-3.5" />
                  {__("Copied", "yatra")}
                </>
              ) : (
                <>
                  <Copy className="mr-1.5 h-3.5 w-3.5" />
                  {__("Copy", "yatra")}
                </>
              )}
            </Button>
          </div>
          {tokenMissing && (
            <p className="mt-1 text-xs text-amber-600 dark:text-amber-400">
              {__(
                "Save your settings once to generate a verify token, then come back to copy it.",
                "yatra",
              )}
            </p>
          )}
        </div>

{/* App secret status (read-only) */}
        <div className="rounded-md bg-gray-50 dark:bg-gray-800/50 px-3 py-2.5 text-sm">
          {webhook?.app_secret_configured ? (
            <span className="inline-flex items-center gap-2 text-green-700 dark:text-green-400">
              <CheckCircle2 className="h-4 w-4" />
              {__(
                "App Secret is configured — webhook signatures will be verified.",
                "yatra",
              )}
            </span>
          ) : (
            <span className="inline-flex items-center gap-2 text-amber-700 dark:text-amber-400">
              <XCircle className="h-4 w-4" />
              {__(
                "App Secret not set — inbound webhook events will be rejected for security. Paste your Meta App Secret above as “Webhook verify secret”.",
                "yatra",
              )}
            </span>
          )}
        </div>
      </CardContent>
    </Card>
  );
};

const CredentialField: React.FC<{
  label: string;
  description?: string;
  docsUrl?: string;
  optional?: boolean;
  placeholder: string;
  configured: boolean;
  visible: boolean;
  value: string;
  onToggle: () => void;
  onChange: (v: string) => void;
  onSave: () => void;
  onClear: () => void;
  saving: boolean;
}> = ({
  label,
  description,
  docsUrl,
  optional,
  placeholder,
  configured,
  visible,
  value,
  onToggle,
  onChange,
  onSave,
  onClear,
  saving,
}) => (
  <div className="space-y-2">
    <div className="flex items-center justify-between gap-3">
      <Label className="flex items-center gap-1.5">
        {label}
        {optional && (
          <span className="text-[10px] uppercase tracking-wide text-gray-400">
            {__("optional", "yatra")}
          </span>
        )}
      </Label>
      {docsUrl && (
        <a
          href={docsUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1 text-xs text-blue-600 hover:underline dark:text-blue-400"
        >
          {__("Where to find this", "yatra")}
          <ExternalLink className="h-3 w-3" />
        </a>
      )}
    </div>
    {description && (
      <p className="text-xs text-gray-500 dark:text-gray-400 flex items-start gap-1.5">
        <Info className="h-3.5 w-3.5 mt-0.5 flex-shrink-0 text-gray-400" />
        <span>{description}</span>
      </p>
    )}
    <div className="flex gap-2">
      <div className="relative flex-1">
        <Input
          type={visible ? "text" : "password"}
          value={value}
          placeholder={placeholder}
          onChange={(e) => onChange(e.target.value)}
        />
        <button
          type="button"
          onClick={onToggle}
          className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
        >
          {visible ? (
            <EyeOff className="h-4 w-4" />
          ) : (
            <Eye className="h-4 w-4" />
          )}
        </button>
      </div>
      <Button onClick={onSave} disabled={saving || value.trim() === ""}>
        <Save className="mr-1.5 h-4 w-4" />
        {__("Save", "yatra")}
      </Button>
      {configured && (
        <Button variant="outline" onClick={onClear} disabled={saving}>
          {__("Clear", "yatra")}
        </Button>
      )}
    </div>
    {configured && (
      <p className="text-xs text-green-600 dark:text-green-400">
        <CheckCircle2 className="mr-1 inline h-3 w-3" />
        {__("Configured", "yatra")}
      </p>
    )}
  </div>
);

/* -------------------------------------------------------------------------- */
/*  Templates tab — DB-driven list + create/edit                              */
/* -------------------------------------------------------------------------- */

const TemplatesTab: React.FC = () => {
  const [editingId, setEditingId] = useState<number | "new" | null>(null);

const { data: tplData, isLoading: tplLoading } = useQuery({
    queryKey: ["whatsapp-templates"],
    queryFn: () => whatsappApi.listTemplates(),
  });
  const { data: eventsData, isLoading: eventsLoading } = useQuery({
    queryKey: ["whatsapp-events"],
    queryFn: () => whatsappApi.listEvents(),
  });

if (tplLoading || eventsLoading) {
    return (
      <div className="flex justify-center py-16">
        <Loader2 className="h-10 w-10 animate-spin text-gray-400" />
      </div>
    );
  }

const templates = tplData?.data ?? [];
  const events = eventsData?.data ?? [];

if (editingId !== null) {
    const existing =
      editingId === "new"
        ? null
        : (templates.find((t) => t.id === editingId) ?? null);
    return (
      <TemplateEditForm
        existing={existing}
        events={events}
        onClose={() => setEditingId(null)}
      />
    );
  }

return (
    <TemplatesList
      templates={templates}
      events={events}
      onEdit={(id) => setEditingId(id)}
      onCreate={() => setEditingId("new")}
    />
  );
};

const TemplatesList: React.FC<{
  templates: WhatsappTemplate[];
  events: WhatsappEvent[];
  onEdit: (id: number) => void;
  onCreate: () => void;
}> = ({ templates, events, onEdit, onCreate }) => {
  const queryClient = useQueryClient();
  const { showToast } = useToast();
  const eventName = (key: string) =>
    events.find((e) => e.key === key)?.name ?? key;

// Confirm-before-delete state, replaces native window.confirm()
  // for visual + accessibility consistency with the rest of the admin.
  const [pendingDelete, setPendingDelete] = useState<{
    id: number;
    name: string;
  } | null>(null);
  // Version-history dialog state. Holds the template the operator
  // clicked "History" on; null = dialog closed.
  const [historyFor, setHistoryFor] = useState<{
    id: number;
    name: string;
    isSystem: boolean;
  } | null>(null);

// First-install recovery — if no system templates exist (e.g. seed
  // didn't run because of a hook-order race) we surface a "Restore
  // default templates" button so the operator can recover without
  // dev intervention.
  const noSystemTemplates = templates.every((t) => !t.is_system);

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
            {__("WhatsApp templates", "yatra")}
          </h3>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
            {__(
              "System templates ship with the plugin — you can toggle them on/off but not edit or delete them. Add custom templates for any event you want.",
              "yatra",
            )}
          </p>
        </div>
        <div className="flex items-center gap-2">
          {noSystemTemplates && (
            <Button
              variant="outline"
              onClick={() => restoreDefaults.mutate()}
              disabled={restoreDefaults.isPending}
            >
              {restoreDefaults.isPending ? (
                <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
              ) : (
                <Plus className="mr-1.5 h-4 w-4" />
              )}
              {__("Restore default templates", "yatra")}
            </Button>
          )}
          <Button onClick={onCreate}>
            <Plus className="mr-1.5 h-4 w-4" />
            {__("Add custom template", "yatra")}
          </Button>
        </div>
      </div>

<Card>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-gray-50 dark:bg-gray-800">
                <tr>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                    {__("Name", "yatra")}
                  </th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                    {__("Event", "yatra")}
                  </th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                    {__("Recipient", "yatra")}
                  </th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                    {__("Type", "yatra")}
                  </th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                    {__("Status", "yatra")}
                  </th>
                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                    {__("Actions", "yatra")}
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
                {templates.length === 0 ? (
                  <tr>
                    <td
                      colSpan={6}
                      className="p-8 text-center text-gray-500 dark:text-gray-400"
                    >
                      {__(
                        "No templates yet — click Add custom template.",
                        "yatra",
                      )}
                    </td>
                  </tr>
                ) : (
                  templates.map((tpl) => (
                    <tr
                      key={tpl.id}
                      className="hover:bg-gray-50 dark:hover:bg-gray-800/50"
                    >
                      <td className="px-4 py-3">
                        <div className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
                          <FileText className="h-4 w-4 text-blue-500" />
                          {tpl.name}
                        </div>
                        {tpl.description && (
                          <div className="mt-0.5 text-xs text-gray-500 dark:text-gray-400 line-clamp-1">
                            {tpl.description}
                          </div>
                        )}
                      </td>
                      <td className="px-4 py-3">
                        <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400">
                          <Zap className="w-3 h-3" />
                          {eventName(tpl.event_key)}
                        </span>
                      </td>
                      <td className="px-4 py-3">
                        <Badge
                          className={
                            tpl.recipient_type === "admin"
                              ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400"
                              : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
                          }
                        >
                          {tpl.recipient_type === "admin"
                            ? __("Admin", "yatra")
                            : __("Customer", "yatra")}
                        </Badge>
                      </td>
                      <td className="px-4 py-3">
                        <Badge
                          className={
                            tpl.is_system
                              ? "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300"
                              : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
                          }
                        >
                          {tpl.is_system
                            ? __("System", "yatra")
                            : __("Custom", "yatra")}
                        </Badge>
                      </td>
                      <td className="px-4 py-3">
                        <Badge
                          className={
                            tpl.is_active
                              ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
                              : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300"
                          }
                        >
                          {tpl.is_active
                            ? __("Active", "yatra")
                            : __("Disabled", "yatra")}
                        </Badge>
                      </td>
                      <td className="px-4 py-3 text-right">
                        <div className="inline-flex gap-1">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => onEdit(tpl.id)}
                          >
                            <Pencil className="mr-1.5 h-3.5 w-3.5" />
                            {__("Edit", "yatra")}
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() =>
                              setHistoryFor({
                                id: tpl.id,
                                name: tpl.name,
                                isSystem: tpl.is_system,
                              })
                            }
                            aria-label={__("Version history", "yatra")}
                            title={__("Version history", "yatra")}
                          >
                            <History className="h-3.5 w-3.5" />
                          </Button>
                          {!tpl.is_system && (
                            <Button
                              variant="outline"
                              size="sm"
                              className="border-red-200 text-red-700 hover:bg-red-50 dark:border-red-700 dark:text-red-300 dark:hover:bg-red-900/30"
                              onClick={() =>
                                setPendingDelete({ id: tpl.id, name: tpl.name })
                              }
                              disabled={deleteTpl.isPending}
                              aria-label={__("Delete template", "yatra")}
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </Button>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
      <ConfirmationDialog
        isOpen={pendingDelete !== null}
        onClose={() => {
          if (!deleteTpl.isPending) setPendingDelete(null);
        }}
        onConfirm={() => {
          if (pendingDelete) deleteTpl.mutate(pendingDelete.id);
        }}
        title={__("Delete template?", "yatra")}
        description={
          pendingDelete
            ? __(
                "Delete the “{name}” template? This cannot be undone, and any events bound to it will stop sending until you create a replacement.",
                "yatra",
              ).replace("{name}", pendingDelete.name)
            : ""
        }
        confirmText={__("Delete template", "yatra")}
        cancelText={__("Cancel", "yatra")}
        variant="danger"
        isLoading={deleteTpl.isPending}
      />

<TemplateHistoryDialog
        template={historyFor}
        onClose={() => setHistoryFor(null)}
      />
    </div>
  );
};

/* -------------------------------------------------------------------------- */
/*  Template version-history dialog                                           */
/*                                                                            */
/*  Lists every prior snapshot of a template newest-first. Each row shows     */
/*  the version number, who edited, when, and a short summary of what they   */
/*  changed. Clicking a row expands its body so the operator can compare      */
/*  before/after at a glance. "Restore this version" rewrites the live row    */
/*  with the snapshot's fields (honoring the system-row immutability rule —   */
/*  for system templates only `is_active` restores).                          */
/* -------------------------------------------------------------------------- */

const TemplateHistoryDialog: React.FC<{
  template: { id: number; name: string; isSystem: boolean } | null;
  onClose: () => void;
}> = ({ template, onClose }) => {
  const queryClient = useQueryClient();
  const { showToast } = useToast();
  const [expandedId, setExpandedId] = useState<number | null>(null);
  const [pendingRestore, setPendingRestore] =
    useState<WhatsappTemplateVersion | null>(null);

const enabled = template !== null;
  const { data, isLoading } = useQuery({
    queryKey: ["whatsapp-template-versions", template?.id],
    queryFn: () => whatsappApi.listTemplateVersions(template!.id),
    enabled,
  });

if (!template) return null;
  const versions = data?.data ?? [];

return (
    <Modal
      isOpen
      onClose={onClose}
      title={sprintf(
        /* translators: %s: template name */
        __("Version history — %s", "yatra"),
        template.name,
      )}
      size="xl"
    >
      <div className="space-y-3">
        {template.isSystem && (
          <Alert variant="info">
            {__(
              "Restoring a system template only resets its Active/Disabled toggle. Body, event binding, and recipient type are managed by the plugin and can't be reverted from history.",
              "yatra",
            )}
          </Alert>
        )}

{isLoading ? (
          <div className="flex justify-center py-8">
            <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
          </div>
        ) : versions.length === 0 ? (
          <div className="text-center py-10">
            <Clock className="w-10 h-10 text-gray-400 mx-auto" />
            <p className="mt-3 text-sm text-gray-600 dark:text-gray-400">
              {__(
                "No prior versions yet. Make an edit and history starts building from the next save.",
                "yatra",
              )}
            </p>
          </div>
        ) : (
          <div className="space-y-2 max-h-[60vh] overflow-y-auto">
            {versions.map((v) => {
              const isExpanded = expandedId === v.id;
              return (
                <div
                  key={v.id}
                  className="rounded-md border border-gray-200 dark:border-gray-700"
                >
                  <button
                    type="button"
                    className="w-full flex items-start gap-3 px-3 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-800/40"
                    onClick={() => setExpandedId(isExpanded ? null : v.id)}
                  >
                    <Badge className="bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 mt-0.5">
                      v{v.version_number}
                    </Badge>
                    <div className="flex-1 min-w-0">
                      <div className="text-sm text-gray-900 dark:text-white">
                        {v.change_summary || __("(no diff captured)", "yatra")}
                      </div>
                      <div className="text-xs text-gray-500 mt-0.5">
                        {v.created_at}
                        {v.created_by !== null && (
                          <span>
                            {" · "}
                            {sprintf(
                              /* translators: %d: WP user id of the editor */
                              __("by user #%d", "yatra"),
                              v.created_by,
                            )}
                          </span>
                        )}
                      </div>
                    </div>
                    <ChevronDown
                      className={`h-4 w-4 text-gray-400 mt-1 transition-transform ${
                        isExpanded ? "rotate-180" : ""
                      }`}
                    />
                  </button>
                  {isExpanded && (
                    <div className="border-t border-gray-200 dark:border-gray-700 p-3 space-y-2 text-xs">
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-gray-600 dark:text-gray-300">
                        <div>
                          <div className="font-medium text-gray-500">
                            {__("Name", "yatra")}
                          </div>
                          <div>{v.snapshot.name || "—"}</div>
                        </div>
                        <div>
                          <div className="font-medium text-gray-500">
                            {__("Event", "yatra")}
                          </div>
                          <div className="font-mono">
                            {v.snapshot.event_key || "—"}
                          </div>
                        </div>
                        <div>
                          <div className="font-medium text-gray-500">
                            {__("Recipient", "yatra")}
                          </div>
                          <div>{v.snapshot.recipient_type || "—"}</div>
                        </div>
                        <div>
                          <div className="font-medium text-gray-500">
                            {__("Active", "yatra")}
                          </div>
                          <div>
                            {v.snapshot.is_active
                              ? __("Yes", "yatra")
                              : __("No", "yatra")}
                          </div>
                        </div>
                      </div>
                      <div>
                        <div className="font-medium text-gray-500">
                          {__("Body", "yatra")}
                        </div>
                        <pre className="mt-1 whitespace-pre-wrap rounded bg-gray-50 dark:bg-gray-800/50 p-2 font-mono text-[11px] max-h-48 overflow-y-auto">
                          {v.snapshot.body || "—"}
                        </pre>
                      </div>
                      <div className="flex justify-end pt-1">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => setPendingRestore(v)}
                        >
                          <RotateCcw className="h-3.5 w-3.5 mr-1" />
                          {__("Restore this version", "yatra")}
                        </Button>
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>

<ConfirmationDialog
        isOpen={pendingRestore !== null}
        onClose={() => {
          if (!restore.isPending) setPendingRestore(null);
        }}
        onConfirm={() => {
          if (pendingRestore) restore.mutate(pendingRestore.id);
        }}
        title={__("Restore this version?", "yatra")}
        description={
          pendingRestore
            ? sprintf(
                __(
                  "This rewrites the live template with v%d's contents. The current state is saved as a new version first so you can roll back this restore later.",
                  "yatra",
                ),
                pendingRestore.version_number,
              )
            : ""
        }
        confirmText={__("Restore version", "yatra")}
        cancelText={__("Cancel", "yatra")}
        isLoading={restore.isPending}
      />
    </Modal>
  );
};

const TemplateEditForm: React.FC<{
  existing: WhatsappTemplate | null;
  events: WhatsappEvent[];
  onClose: () => void;
}> = ({ existing, events, onClose }) => {
  const queryClient = useQueryClient();
  const { showToast } = useToast();
  const isCreate = existing === null;
  const isSystem = !!existing?.is_system;

const [name, setName] = useState(existing?.name ?? "");
  const [description, setDescription] = useState(existing?.description ?? "");
  const [eventKey, setEventKey] = useState(existing?.event_key ?? "");
  const [recipient, setRecipient] = useState<"customer" | "admin">(
    existing?.recipient_type ?? "customer",
  );
  const [isActive, setIsActive] = useState(existing?.is_active ?? true);
  const [metaTemplateName, setMetaTemplateName] = useState(
    existing?.meta_template_name ?? "",
  );
  const [languageCode, setLanguageCode] = useState(
    existing?.language_code ?? "en_US",
  );
  const [body, setBody] = useState(existing?.body ?? "");
  const [copiedVar, setCopiedVar] = useState<string | null>(null);
  const [showEventDropdown, setShowEventDropdown] = useState(false);

const bodyRef = React.useRef<HTMLTextAreaElement | null>(null);

// Variables list re-derived whenever the selected event changes —
  // each event declares its own variables array on the server.
  const selectedEvent = useMemo(
    () => events.find((e) => e.key === eventKey) ?? null,
    [events, eventKey],
  );
  const variables = selectedEvent?.variables ?? [];

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <Button variant="outline" size="sm" onClick={onClose}>
            <ArrowLeft className="mr-1.5 h-4 w-4" />
            {__("Back to templates", "yatra")}
          </Button>
          <div>
            <h2 className="flex items-center gap-2 text-xl font-semibold text-gray-900 dark:text-white">
              <FileText className="h-5 w-5 text-blue-500" />
              {isCreate ? __("Add custom template", "yatra") : existing!.name}
              {isSystem && (
                <Badge className="bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300">
                  {__("System", "yatra")}
                </Badge>
              )}
            </h2>
            {existing?.description && (
              <p className="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                {existing.description}
              </p>
            )}
          </div>
        </div>
        <Button
          onClick={() => save.mutate()}
          disabled={save.isPending || name.trim() === ""}
        >
          {save.isPending ? (
            <>
              <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
              {__("Saving…", "yatra")}
            </>
          ) : (
            <>
              <Save className="mr-1.5 h-4 w-4" />
              {isCreate
                ? __("Create template", "yatra")
                : __("Save changes", "yatra")}
            </>
          )}
        </Button>
      </div>

<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div className="space-y-6 lg:col-span-2">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <span>{__("Template details", "yatra")}</span>
                <label className="flex items-center gap-2 text-sm font-normal">
                  <input
                    type="checkbox"
                    checked={isActive}
                    onChange={(e) => setIsActive(e.target.checked)}
                  />
                  <Badge
                    className={
                      isActive
                        ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
                        : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300"
                    }
                  >
                    {isActive ? __("Active", "yatra") : __("Disabled", "yatra")}
                  </Badge>
                </label>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {isSystem && (
                <div className="rounded-md border border-blue-200 bg-blue-50/60 p-3 dark:border-blue-700 dark:bg-blue-900/20">
                  <div className="flex items-start gap-2">
                    <Info className="mt-0.5 h-4 w-4 shrink-0 text-blue-600 dark:text-blue-400" />
                    <div className="text-xs text-blue-900 dark:text-blue-200">
                      {__(
                        "This is a system template. You can toggle it on or off but every other field is locked — that way plugin updates can safely refresh the copy. Create a custom template if you need different content for this event.",
                        "yatra",
                      )}
                    </div>
                  </div>
                </div>
              )}

<div className="space-y-2">
                <Label>{__("Template name", "yatra")}</Label>
                <Input
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  readOnly={isSystem}
                  className={isSystem ? "bg-gray-50 dark:bg-gray-900/40" : ""}
                  placeholder={__("e.g. Welcome to your trip", "yatra")}
                />
              </div>

<div className="space-y-2">
                <Label>{__("Description", "yatra")}</Label>
                <Input
                  value={description ?? ""}
                  onChange={(e) => setDescription(e.target.value)}
                  readOnly={isSystem}
                  className={isSystem ? "bg-gray-50 dark:bg-gray-900/40" : ""}
                  placeholder={__(
                    "Short description shown in the template list",
                    "yatra",
                  )}
                />
              </div>

{/* Trigger Event — read-only chip for system, dropdown for custom */}
              <div>
                <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                  {__("Trigger Event", "yatra")}
                </label>
                {isSystem ? (
                  <div className="space-y-2">
                    <div className="flex items-center gap-2">
                      <span className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-800">
                        <Zap className="w-4 h-4" />
                        {selectedEvent?.name ?? eventKey}
                      </span>
                      <span className="text-xs text-gray-500 dark:text-gray-400">
                        {__("System templates can't change events", "yatra")}
                      </span>
                    </div>
                    {selectedEvent?.description && (
                      <div className="p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg border border-indigo-200 dark:border-indigo-800">
                        <p className="text-sm text-indigo-800 dark:text-indigo-300">
                          {selectedEvent.description}
                        </p>
                      </div>
                    )}
                  </div>
                ) : (
                  <div className="relative">
                    <button
                      type="button"
                      onClick={() => setShowEventDropdown((v) => !v)}
                      className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-left flex items-center justify-between hover:border-gray-400 dark:hover:border-gray-500 transition-colors"
                    >
                      {selectedEvent ? (
                        <div className="flex items-center gap-2">
                          <Zap className="w-4 h-4 text-blue-500" />
                          <span className="text-sm font-medium text-gray-900 dark:text-white">
                            {selectedEvent.name}
                          </span>
                          <code className="text-xs px-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded">
                            {selectedEvent.key}
                          </code>
                        </div>
                      ) : (
                        <div className="flex items-center gap-2">
                          <Zap className="w-4 h-4 text-gray-400" />
                          <span className="text-sm text-gray-500 dark:text-gray-400">
                            {__("Pick an event…", "yatra")}
                          </span>
                        </div>
                      )}
                      <ChevronDown
                        className={`w-4 h-4 text-gray-400 transition-transform ${
                          showEventDropdown ? "rotate-180" : ""
                        }`}
                      />
                    </button>
                    {showEventDropdown && (
                      <div className="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-80 overflow-y-auto">
                        <div className="py-1">
                          {events.map((event) => {
                            const active = event.key === eventKey;
                            return (
                              <button
                                key={event.key}
                                type="button"
                                onClick={() => {
                                  setEventKey(event.key);
                                  setShowEventDropdown(false);
                                }}
                                className={`w-full px-3 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-b border-gray-100 dark:border-gray-700 last:border-b-0 ${
                                  active
                                    ? "bg-indigo-50 dark:bg-indigo-900/20"
                                    : ""
                                }`}
                              >
                                <div className="flex items-start gap-2">
                                  <Zap
                                    className={`w-4 h-4 mt-0.5 flex-shrink-0 ${
                                      active ? "text-blue-500" : "text-gray-400"
                                    }`}
                                  />
                                  <div className="flex-1 min-w-0">
                                    <div className="flex items-center gap-2">
                                      <span
                                        className={`text-sm font-medium ${
                                          active
                                            ? "text-blue-800 dark:text-blue-400"
                                            : "text-gray-900 dark:text-white"
                                        }`}
                                      >
                                        {event.name}
                                      </span>
                                      <code className="text-xs px-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded">
                                        {event.key}
                                      </code>
                                    </div>
                                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-2">
                                      {event.description}
                                    </p>
                                  </div>
                                  {active && (
                                    <Check className="w-4 h-4 text-blue-500 flex-shrink-0" />
                                  )}
                                </div>
                              </button>
                            );
                          })}
                        </div>
                      </div>
                    )}
                  </div>
                )}
                {selectedEvent && (
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 italic">
                    {selectedEvent.description}
                  </p>
                )}
              </div>

{/* Recipient type */}
              <div className="space-y-2">
                <Label>{__("Recipient", "yatra")}</Label>
                <div className="flex gap-2">
                  <label
                    className={`flex-1 flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer ${
                      recipient === "customer"
                        ? "border-blue-300 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/20"
                        : "border-gray-300 dark:border-gray-600"
                    } ${isSystem ? "opacity-60 cursor-not-allowed" : ""}`}
                  >
                    <input
                      type="radio"
                      checked={recipient === "customer"}
                      onChange={() => !isSystem && setRecipient("customer")}
                      disabled={isSystem}
                    />
                    <UserCircle className="h-4 w-4 text-blue-600" />
                    <div>
                      <div className="text-sm font-medium">
                        {__("Customer", "yatra")}
                      </div>
                      <div className="text-xs text-gray-500 dark:text-gray-400">
                        {__("Sends to the booking customer", "yatra")}
                      </div>
                    </div>
                  </label>
                  <label
                    className={`flex-1 flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer ${
                      recipient === "admin"
                        ? "border-orange-300 bg-orange-50 dark:border-orange-700 dark:bg-orange-900/20"
                        : "border-gray-300 dark:border-gray-600"
                    } ${isSystem ? "opacity-60 cursor-not-allowed" : ""}`}
                  >
                    <input
                      type="radio"
                      checked={recipient === "admin"}
                      onChange={() => !isSystem && setRecipient("admin")}
                      disabled={isSystem}
                    />
                    <UserCircle className="h-4 w-4 text-orange-600" />
                    <div>
                      <div className="text-sm font-medium">
                        {__("Admin", "yatra")}
                      </div>
                      <div className="text-xs text-gray-500 dark:text-gray-400">
                        {__(
                          "Sends to the admin phone in Delivery settings",
                          "yatra",
                        )}
                      </div>
                    </div>
                  </label>
                </div>
                {isSystem && (
                  <p className="text-xs text-gray-500 dark:text-gray-400 italic">
                    {__(
                      "System templates can't change recipient type.",
                      "yatra",
                    )}
                  </p>
                )}
              </div>

{/* Meta provider settings */}
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label>{__("Meta template name", "yatra")}</Label>
                  <Input
                    value={metaTemplateName}
                    onChange={(e) => setMetaTemplateName(e.target.value)}
                    readOnly={isSystem}
                    className={isSystem ? "bg-gray-50 dark:bg-gray-900/40" : ""}
                    placeholder="yatra_booking_confirmed"
                  />
                </div>
                <div className="space-y-2">
                  <Label>{__("Language code", "yatra")}</Label>
                  <Input
                    value={languageCode}
                    onChange={(e) => setLanguageCode(e.target.value)}
                    readOnly={isSystem}
                    className={isSystem ? "bg-gray-50 dark:bg-gray-900/40" : ""}
                    placeholder="en_US"
                  />
                </div>
              </div>

<div>
                <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                  {__("Message body", "yatra")}
                </label>
                <textarea
                  ref={bodyRef}
                  value={body}
                  onChange={(e) => setBody(e.target.value)}
                  rows={12}
                  readOnly={isSystem}
                  className={`w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg font-mono text-sm text-gray-900 dark:text-white ${
                    isSystem
                      ? "bg-gray-50 dark:bg-gray-900/40"
                      : "bg-white dark:bg-gray-800"
                  }`}
                  placeholder={__(
                    "Use {{variable}} syntax — variables come from the trigger event.",
                    "yatra",
                  )}
                />
                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                  {isSystem
                    ? __(
                        "System template body is locked. Create a custom template to author your own copy for this event.",
                        "yatra",
                      )
                    : __(
                        "Click a variable on the right to copy, double-click to insert at the cursor.",
                        "yatra",
                      )}
                </p>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Variables sidebar — filtered by selected event */}
        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Code className="w-5 h-5 text-blue-500" />
                {__("Available Variables", "yatra")}
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {!selectedEvent ? (
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {__(
                    "Pick a Trigger Event above to see the variables you can use here.",
                    "yatra",
                  )}
                </p>
              ) : variables.length === 0 ? (
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {__("This event has no variables.", "yatra")}
                </p>
              ) : (
                <>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    {__(
                      "Click to copy, double-click to insert at cursor",
                      "yatra",
                    )}
                  </p>
                  <div className="space-y-1">
                    {variables.map((v) => {
                      const placeholder = `{{${v.key}}}`;
                      return (
                        <button
                          key={v.key}
                          type="button"
                          onClick={() => copyVariable(placeholder)}
                          onDoubleClick={() => insertVariable(placeholder)}
                          className="w-full text-left px-2 py-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors group"
                        >
                          <div className="flex items-center justify-between">
                            <code className="text-xs text-blue-600 dark:text-blue-400">
                              {placeholder}
                            </code>
                            {copiedVar === placeholder ? (
                              <Check className="w-3 h-3 text-green-500" />
                            ) : (
                              <Copy className="w-3 h-3 text-gray-400 opacity-0 group-hover:opacity-100" />
                            )}
                          </div>
                          {v.description && (
                            <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                              {v.description}
                            </p>
                          )}
                        </button>
                      );
                    })}
                  </div>
                </>
              )}
            </CardContent>
          </Card>

{!isCreate && (
            <TemplateTestSendCard
              templateId={existing!.id}
              recipient={recipient}
            />
          )}
        </div>
      </div>
    </div>
  );
};

const TemplateTestSendCard: React.FC<{
  templateId: number;
  recipient: "customer" | "admin";
}> = ({ templateId, recipient }) => {
  const { showToast } = useToast();
  const [phone, setPhone] = useState("");
  const [sending, setSending] = useState(false);
  const [result, setResult] = useState<{ ok: boolean; message: string } | null>(
    null,
  );

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Send className="h-5 w-5 text-blue-500" />
          {__("Send test message", "yatra")}
        </CardTitle>
        <CardDescription>
          {recipient === "admin"
            ? __(
                "Admin-recipient templates send to the admin phone in Delivery settings.",
                "yatra",
              )
            : __("Sends this template to the phone you enter below.", "yatra")}
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-3">
        {recipient === "customer" && (
          <div className="space-y-2">
            <Label>{__("Phone (E.164)", "yatra")}</Label>
            <Input
              value={phone}
              placeholder="+9779800000000"
              onChange={(e) => setPhone(e.target.value)}
            />
          </div>
        )}
        <Button onClick={run} disabled={sending} className="w-full">
          {sending ? (
            <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
          ) : (
            <Send className="mr-1.5 h-4 w-4" />
          )}
          {__("Send test", "yatra")}
        </Button>
        {result && (
          <div
            className={`flex items-start gap-2 rounded-md p-3 text-sm ${
              result.ok
                ? "bg-green-50 text-green-800 dark:bg-green-900/20 dark:text-green-200"
                : "bg-red-50 text-red-800 dark:bg-red-900/20 dark:text-red-200"
            }`}
          >
            {result.ok ? (
              <CheckCircle2 className="mt-0.5 h-4 w-4" />
            ) : (
              <XCircle className="mt-0.5 h-4 w-4" />
            )}
            <span>{result.message}</span>
          </div>
        )}
      </CardContent>
    </Card>
  );
};

/* -------------------------------------------------------------------------- */
/*  Frontend widget settings                                                  */
/* -------------------------------------------------------------------------- */

/**
 * "Frontend widget" tab — configures the public-facing click-to-
 * WhatsApp affordances rendered by `Services/Widget.php`:
 *   - Floating button (wp_footer)
 *   - Single-trip sidebar CTA
 *   - `[yatra_whatsapp_button]` shortcode
 *
 * The widget uses wa.me deep linking (free) — no Cloud API call on
 * tap, so this tab is independent of the credentials in Delivery.
 */
const WidgetSection: React.FC<{
  settings: WhatsappSettings;
  onSave: (patch: Partial<WhatsappSettings>) => void;
  saving: boolean;
}> = ({ settings, onSave, saving }) => {
  const w: WhatsappWidgetSettings = settings.widget;
  const [enabled, setEnabled] = useState(w.enabled);
  const [contactPhone, setContactPhone] = useState(w.contact_phone);
  const [prefilled, setPrefilled] = useState(w.prefilled_message);
  const [displayOn, setDisplayOn] = useState<"all" | "trips_only">(
    w.display_on,
  );
  const [position, setPosition] = useState<"bottom-right" | "bottom-left">(
    w.position,
  );
  const [label, setLabel] = useState(w.label);
  const [showOnSidebar, setShowOnSidebar] = useState(w.show_on_trip_sidebar);

React.useEffect(() => {
    setEnabled(w.enabled);
    setContactPhone(w.contact_phone);
    setPrefilled(w.prefilled_message);
    setDisplayOn(w.display_on);
    setPosition(w.position);
    setLabel(w.label);
    setShowOnSidebar(w.show_on_trip_sidebar);
  }, [
    w.enabled,
    w.contact_phone,
    w.prefilled_message,
    w.display_on,
    w.position,
    w.label,
    w.show_on_trip_sidebar,
  ]);

const dirty =
    enabled !== w.enabled ||
    contactPhone !== w.contact_phone ||
    prefilled !== w.prefilled_message ||
    displayOn !== w.display_on ||
    position !== w.position ||
    label !== w.label ||
    showOnSidebar !== w.show_on_trip_sidebar;

const save = () =>
    onSave({
      widget: {
        enabled,
        contact_phone: contactPhone,
        prefilled_message: prefilled,
        display_on: displayOn,
        position,
        label,
        show_on_trip_sidebar: showOnSidebar,
      },
    });

// Live preview of the wa.me URL the button will open against.
  const previewUrl = useMemo(() => {
    const digits = contactPhone.replace(/[^0-9]/g, "");
    const msg = prefilled.replace(/\{\{trip_name\}\}/g, "Demo Trip");
    return digits
      ? `https://wa.me/${digits}?text=${encodeURIComponent(msg)}`
      : "";
  }, [contactPhone, prefilled]);

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MessageCircle className="h-5 w-5 text-green-500" />
            {__("Public WhatsApp widget", "yatra")}
          </CardTitle>
          <CardDescription>
            {__(
              'Adds a "Chat on WhatsApp" affordance to your public site. Free for the operator — uses wa.me deep linking, no per-tap charges. Independent of the Cloud API credentials you configured under Delivery.',
              "yatra",
            )}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-5">
          {/* Master toggle */}
          <label className="flex items-start gap-3 cursor-pointer">
            <input
              type="checkbox"
              checked={enabled}
              onChange={(e) => setEnabled(e.target.checked)}
              className="mt-1"
            />
            <div>
              <div className="text-sm font-medium text-gray-900 dark:text-white">
                {__("Enable widget", "yatra")}
              </div>
              <div className="text-xs text-gray-500 dark:text-gray-400">
                {__(
                  "Off by default. When on, renders per the display rules below.",
                  "yatra",
                )}
              </div>
            </div>
          </label>

{/* Contact phone */}
          <div className="space-y-2">
            <Label>{__("Contact phone (E.164)", "yatra")}</Label>
            <Input
              value={contactPhone}
              placeholder="+9779800000000"
              onChange={(e) => setContactPhone(e.target.value)}
            />
            <p className="text-xs text-gray-500 dark:text-gray-400">
              {__(
                "Visitors land on a chat with THIS number. Can be any WhatsApp-enabled phone — doesn't have to be the Cloud-API phone you use for outbound automation.",
                "yatra",
              )}
            </p>
          </div>

{/* Prefilled message */}
          <div className="space-y-2">
            <Label>{__("Pre-filled message", "yatra")}</Label>
            <textarea
              className="w-full rounded-md border border-gray-300 bg-white p-2 text-sm dark:border-gray-600 dark:bg-gray-800"
              rows={3}
              value={prefilled}
              onChange={(e) => setPrefilled(e.target.value)}
              placeholder={__(
                "Hi! I'd like to know more about {{trip_name}}.",
                "yatra",
              )}
            />
            <p className="text-xs text-gray-500 dark:text-gray-400">
              {__(
                "Use {{trip_name}} to insert the current trip's name when the widget renders on a single-trip page. Replaced with the actual title at render time.",
                "yatra",
              )}
            </p>
          </div>

{/* Display rules */}
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label>{__("Show on", "yatra")}</Label>
              <div className="space-y-1">
                <label className="flex items-center gap-2 text-sm cursor-pointer">
                  <input
                    type="radio"
                    checked={displayOn === "trips_only"}
                    onChange={() => setDisplayOn("trips_only")}
                  />
                  {__("Single trip pages only", "yatra")}
                </label>
                <label className="flex items-center gap-2 text-sm cursor-pointer">
                  <input
                    type="radio"
                    checked={displayOn === "all"}
                    onChange={() => setDisplayOn("all")}
                  />
                  {__("Every frontend page", "yatra")}
                </label>
              </div>
            </div>
            <div className="space-y-2">
              <Label>{__("Position", "yatra")}</Label>
              <div className="space-y-1">
                <label className="flex items-center gap-2 text-sm cursor-pointer">
                  <input
                    type="radio"
                    checked={position === "bottom-right"}
                    onChange={() => setPosition("bottom-right")}
                  />
                  {__("Bottom right", "yatra")}
                </label>
                <label className="flex items-center gap-2 text-sm cursor-pointer">
                  <input
                    type="radio"
                    checked={position === "bottom-left"}
                    onChange={() => setPosition("bottom-left")}
                  />
                  {__("Bottom left", "yatra")}
                </label>
              </div>
            </div>
          </div>

{/* Label + trip-sidebar CTA */}
          <div className="space-y-2">
            <Label>{__("Button label", "yatra")}</Label>
            <Input
              value={label}
              placeholder={__("Chat on WhatsApp", "yatra")}
              onChange={(e) => setLabel(e.target.value)}
            />
            <p className="text-xs text-gray-500 dark:text-gray-400">
              {__("Leave blank to show only the WhatsApp icon.", "yatra")}
            </p>
          </div>

<label className="flex items-start gap-3 cursor-pointer">
            <input
              type="checkbox"
              checked={showOnSidebar}
              onChange={(e) => setShowOnSidebar(e.target.checked)}
              className="mt-1"
            />
            <div>
              <div className="text-sm font-medium text-gray-900 dark:text-white">
                {__(
                  "Also show a full-width CTA in the single-trip sidebar",
                  "yatra",
                )}
              </div>
              <div className="text-xs text-gray-500 dark:text-gray-400">
                {__(
                  'Renders an "Ask about this trip on WhatsApp" button next to the booking form, separate from the floating button.',
                  "yatra",
                )}
              </div>
            </div>
          </label>

{/* Preview + shortcode hint */}
          {previewUrl && (
            <div className="rounded-md border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800/40">
              <div className="mb-1 text-xs font-medium text-gray-600 dark:text-gray-300">
                {__("Preview URL the button will open", "yatra")}
              </div>
              <a
                href={previewUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="text-xs text-blue-600 break-all hover:underline dark:text-blue-400"
              >
                {previewUrl}
              </a>
            </div>
          )}

<div className="rounded-md border border-blue-200 bg-blue-50/60 p-3 dark:border-blue-700 dark:bg-blue-900/20">
            <div className="flex items-start gap-2">
              <Info className="mt-0.5 h-4 w-4 shrink-0 text-blue-600 dark:text-blue-400" />
              <div className="text-xs text-blue-900 dark:text-blue-200">
                {__(
                  'Drop the button anywhere using the shortcode [yatra_whatsapp_button label="Chat with us"]. Supports label, message, and trip_name attributes.',
                  "yatra",
                )}
              </div>
            </div>
          </div>
        </CardContent>
        {dirty && (
          <CardFooter className="flex justify-end border-t border-gray-100 pt-4 dark:border-gray-700/50">
            <Button onClick={save} disabled={saving}>
              {saving ? (
                <>
                  <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
                  {__("Saving…", "yatra")}
                </>
              ) : (
                <>
                  <Save className="mr-1.5 h-4 w-4" />
                  {__("Save widget settings", "yatra")}
                </>
              )}
            </Button>
          </CardFooter>
        )}
      </Card>
    </div>
  );
};

/* -------------------------------------------------------------------------- */
/*  Logs                                                                      */
/* -------------------------------------------------------------------------- */

const LogsList: React.FC = () => {
  const [page, setPage] = useState(1);
  const [statusFilter, setStatusFilter] = useState<string>("");
  const [phoneFilter, setPhoneFilter] = useState<string>("");
  // Debounced phone filter so we don't re-query on every keystroke.
  const [phoneFilterApplied, setPhoneFilterApplied] = useState<string>("");
  const perPage = 20;

React.useEffect(() => {
    const t = window.setTimeout(
      () => setPhoneFilterApplied(phoneFilter.trim()),
      350,
    );
    return () => window.clearTimeout(t);
  }, [phoneFilter]);

// Reset to page 1 whenever a filter changes.
  React.useEffect(() => {
    setPage(1);
  }, [statusFilter, phoneFilterApplied]);

const { data, isLoading } = useQuery({
    queryKey: [
      "whatsapp-messages",
      page,
      perPage,
      statusFilter,
      phoneFilterApplied,
    ],
    queryFn: () =>
      whatsappApi.listMessages({
        page,
        per_page: perPage,
        ...(statusFilter ? { status: statusFilter } : {}),
        ...(phoneFilterApplied ? { phone: phoneFilterApplied } : {}),
      }),
    refetchInterval: 15000,
    placeholderData: (prev) => prev, // smoother pagination — keep last page visible while loading
  });

const rows = data?.data ?? [];
  const totalItems = data?.total ?? 0;
  const totalPages = Math.max(1, Math.ceil(totalItems / perPage));

if (isLoading) {
    return (
      <Card>
        <CardContent className="p-12 flex justify-center">
          <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
        </CardContent>
      </Card>
    );
  }

const hasFilters = !!(statusFilter || phoneFilter);

return (
    <div className="space-y-4">
      <div>
        <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
          <Clock className="w-5 h-5 text-blue-500" />
          {__("Message logs", "yatra")}
        </h3>
        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
          {__(
            "Every outbound send and inbound reply, filterable by status or phone. Updated every 15 seconds.",
            "yatra",
          )}
        </p>
      </div>

{/* Canonical Yatra filter row — same pattern as Discounts / Bookings */}
      <Card>
        <CardContent className="p-3">
          <div className="flex flex-col lg:flex-row lg:items-center gap-2">
            <div className="flex-1 min-w-0">
              <Input
                type="text"
                value={phoneFilter}
                onChange={(e) => setPhoneFilter(e.target.value)}
                placeholder={__("Search by phone…", "yatra")}
                aria-label={__("Search by phone", "yatra")}
                className="w-full"
              />
            </div>
            <Select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              aria-label={__("Filter by status", "yatra")}
              className="w-full lg:w-48 lg:flex-none"
            >
              <option value="">{__("All statuses", "yatra")}</option>
              <option value="queued">{__("Queued", "yatra")}</option>
              <option value="sent">{__("Sent", "yatra")}</option>
              <option value="delivered">{__("Delivered", "yatra")}</option>
              <option value="read">{__("Read", "yatra")}</option>
              <option value="failed">{__("Failed", "yatra")}</option>
              <option value="received">
                {__("Received (inbound)", "yatra")}
              </option>
            </Select>
            {hasFilters && (
              <Button
                type="button"
                variant="outline"
                onClick={() => {
                  setStatusFilter("");
                  setPhoneFilter("");
                }}
                className="w-full lg:w-auto"
              >
                {__("Reset", "yatra")}
              </Button>
            )}
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="p-0">
          {rows.length === 0 ? (
            <div className="p-8 text-center text-gray-500 dark:text-gray-400">
              {totalItems === 0 && !statusFilter && !phoneFilterApplied
                ? __("No messages sent yet.", "yatra")
                : __("No messages match your filters.", "yatra")}
            </div>
          ) : (
            <Table>
              <TableHeader className="bg-gray-50 dark:bg-gray-800/50">
                <TableRow>
                  <TableHead className="w-28">
                    {__("Direction", "yatra")}
                  </TableHead>
                  <TableHead className="w-44">{__("Phone", "yatra")}</TableHead>
                  <TableHead>{__("Body / Error", "yatra")}</TableHead>
                  <TableHead className="w-48">
                    {__("Template", "yatra")}
                  </TableHead>
                  <TableHead className="w-28">
                    {__("Status", "yatra")}
                  </TableHead>
                  <TableHead className="w-44 whitespace-nowrap">
                    {__("Sent", "yatra")}
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {rows.map((row) => (
                  <TableRow key={row.id}>
                    <TableCell>
                      <Badge
                        className={
                          row.direction === "inbound"
                            ? "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400"
                            : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
                        }
                      >
                        {row.direction}
                      </Badge>
                    </TableCell>
                    <TableCell className="font-mono text-gray-900 dark:text-white whitespace-nowrap">
                      {row.phone}
                    </TableCell>
                    <TableCell className="text-gray-700 dark:text-gray-200">
                      <div
                        className="max-w-md truncate"
                        title={row.error_message || row.body || ""}
                      >
                        {row.error_message || row.body || "—"}
                      </div>
                    </TableCell>
                    <TableCell className="text-gray-500 dark:text-gray-400">
                      <span
                        className="truncate block max-w-[12rem]"
                        title={row.template_key || ""}
                      >
                        {row.template_key || "—"}
                      </span>
                    </TableCell>
                    <TableCell>
                      <Badge
                        className={
                          row.status === "sent" ||
                          row.status === "delivered" ||
                          row.status === "read"
                            ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
                            : row.status === "failed"
                              ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
                              : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
                        }
                      >
                        {row.status}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-gray-500 dark:text-gray-400 whitespace-nowrap">
                      {row.created_at
                        ? new Date(row.created_at).toLocaleString()
                        : "—"}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
          {rows.length > 0 && totalPages > 1 && (
            <div className="border-t border-gray-200 px-4 py-3 dark:border-gray-700">
              <Pagination
                currentPage={page}
                totalPages={totalPages}
                totalItems={totalItems}
                itemsPerPage={perPage}
                onPageChange={setPage}
                itemName={__("messages", "yatra")}
              />
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
};

/* -------------------------------------------------------------------------- */
/*  Opt-ins                                                                   */
/* -------------------------------------------------------------------------- */

/**
 * GDPR audit view — every phone number that has opted in (or been
 * explicitly opted out via inbound STOP keyword). Read-only here;
 * mutations happen via the booking form (in) and inbound webhook (out).
 *
 * Exports to CSV for data-portability requests.
 */
const OptInsList: React.FC = () => {
  const [search, setSearch] = useState("");
  const [filter, setFilter] = useState<"all" | "in" | "out">("all");

const { data, isLoading } = useQuery({
    queryKey: ["whatsapp-opt-ins"],
    queryFn: () => whatsappApi.listOptIns(),
    staleTime: 30 * 1000,
  });

// eslint-disable-next-line react-hooks/exhaustive-deps
  const rows = data?.data ?? [];

const inCount = useMemo(() => rows.filter((r) => r.opted_in).length, [rows]);
  const outCount = rows.length - inCount;

return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
            <Users className="w-5 h-5 text-blue-500" />
            {__("Opt-in audit", "yatra")}
          </h3>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
            {__(
              "Every phone number that's opted into WhatsApp messaging, plus those that opted out via inbound STOP keyword. Export this list for GDPR / privacy requests.",
              "yatra",
            )}
          </p>
        </div>
        <Button
          type="button"
          variant="outline"
          onClick={exportCsv}
          disabled={filtered.length === 0}
        >
          <ExternalLink className="mr-1.5 h-4 w-4" />
          {__("Export CSV", "yatra")}
        </Button>
      </div>

{/* Canonical Yatra filter row */}
      <Card>
        <CardContent className="p-3">
          <div className="flex flex-col lg:flex-row lg:items-center gap-2">
            <div className="flex-1 min-w-0">
              <Input
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder={__("Search by phone or source…", "yatra")}
                aria-label={__("Search opt-ins", "yatra")}
                className="w-full"
              />
            </div>
            <Select
              value={filter}
              onChange={(e) =>
                setFilter(e.target.value as "all" | "in" | "out")
              }
              aria-label={__("Filter opt-in status", "yatra")}
              className="w-full lg:w-56 lg:flex-none"
            >
              <option value="all">
                {__("All", "yatra")} ({rows.length})
              </option>
              <option value="in">
                {__("Opted in", "yatra")} ({inCount})
              </option>
              <option value="out">
                {__("Opted out", "yatra")} ({outCount})
              </option>
            </Select>
            {(search || filter !== "all") && (
              <Button
                type="button"
                variant="outline"
                onClick={() => {
                  setSearch("");
                  setFilter("all");
                }}
                className="w-full lg:w-auto"
              >
                {__("Reset", "yatra")}
              </Button>
            )}
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="p-0">
          {filtered.length === 0 ? (
            <div className="p-8 text-center text-gray-500 dark:text-gray-400">
              {rows.length === 0
                ? __(
                    "No opt-in records yet. Records appear here when customers tick the WhatsApp opt-in on a booking form, or reply STOP to opt out.",
                    "yatra",
                  )
                : __("No records match your search.", "yatra")}
            </div>
          ) : (
            <Table>
              <TableHeader className="bg-gray-50 dark:bg-gray-800/50">
                <TableRow>
                  <TableHead className="w-44">{__("Phone", "yatra")}</TableHead>
                  <TableHead className="w-32">
                    {__("Status", "yatra")}
                  </TableHead>
                  <TableHead>{__("Source", "yatra")}</TableHead>
                  <TableHead className="w-44 whitespace-nowrap">
                    {__("Updated", "yatra")}
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filtered.map((row) => (
                  <TableRow key={row.phone}>
                    <TableCell className="font-mono text-gray-900 dark:text-white whitespace-nowrap">
                      {row.phone}
                    </TableCell>
                    <TableCell>
                      {row.opted_in ? (
                        <Badge className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
                          <CheckCircle2 className="mr-1 h-3 w-3" />
                          {__("Opted in", "yatra")}
                        </Badge>
                      ) : (
                        <Badge className="bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300">
                          <XCircle className="mr-1 h-3 w-3" />
                          {__("Opted out", "yatra")}
                        </Badge>
                      )}
                    </TableCell>
                    <TableCell className="text-gray-500 dark:text-gray-400">
                      {row.source || "—"}
                    </TableCell>
                    <TableCell className="text-gray-500 dark:text-gray-400 whitespace-nowrap">
                      {row.updated_at}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  );
};

function extractError(e: any): string {
  if (!e) return "Request failed.";
  const data = e?.response?.data ?? e?.data ?? null;
  if (
    data &&
    typeof data === "object" &&
    typeof (data as any).message === "string"
  ) {
    return (data as any).message;
  }
  return e?.message || "Request failed.";
}

export default Whatsapp;

```

{__("Enable the WhatsApp Notifications module", "yatra")}